
今回はよく使うフォトギャラリーを作っていきましょう〜写真とキャプションの組み合わせのカード形のデザインです。<figure>という要素を使います



<figure>?フィギュアって読むんですか?あの人形の?



読み方はあってますね。figureは図という英語です。図とキャプションという組み合わせですが、htmlでは写真とキャプションの組み合わせも使っています。
完成イメージ
下図のようなフォトギャラリーを作成してみましょう。h1のタイトル要素にはgoogle fontsのoswaldを適用しています。ギャラリーとなる場所は、figure要素を使います。写真は、Photoshopなどで円に加工するのではなく、長方形の状態で用意し、cssを使って円表示にします。


HTMLコード模写 フォトギャラリーの動画
まずは動画に目を通してもらってから、下記のコード模写を行います。
Photo GalleryのHTMLをコード模写しよう
Photo_Gallery というフォルダを作成し、そのフォルダ内にindex.htmlとstyle.cssのファイルを作成しておきましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>column</title>
<link rel="stylesheet" href="style.css">
<!-- google font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- oswald -->
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap" rel="stylesheet">
<!-- 日本語NotoSansJP -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
<!-- /google font -->
</head>
<body>
<div class="container">
<header>
<h1 class="title">Photo Gallery</h1>
</header>
<div class="flex">
<section class="box">
<h1>写真名</h1>
<figure>
<a href="#"><img src="https://picsum.photos/200/200?random=1"></a>
<figcaption>
ここに写真の説明文が入ります。figcaptionという要素で写真のキャプションとなります。</figcaption>
</figure>
</section>
<section class="box">
<h1>写真名</h1>
<figure>
<a href="#"><img src="https://picsum.photos/200/200?random=2"></a>
<figcaption>
ここに写真の説明文が入ります。figcaptionという要素で写真のキャプションとなります。</figcaption>
</figure>
</section>
<section class="box">
<h1>写真名</h1>
<figure>
<a href="#"><img src="https://picsum.photos/200/200?random=3"></a>
<figcaption>
ここに写真の説明文が入ります。figcaptionという要素で写真のキャプションとなります。</figcaption>
</figure>
</section>
</div>
</div>
</body>
</html>
<div class=”flex”>〜</div>内にsection要素を指定します。section要素にはclass名boxを指定しています。
画像はキャプションを伴う場合、figure要素を使います。figureは図という意味をもち、グラフと説明文などに使われていましたが、画像とキャプション(figcaption要素)を使ってのマークアップに使用されます。


画像であるimg要素には、ランダムに画像を使用できる「Lorem Picsum」さんの画像リンクを使っています。
またhead要素内でgoogle font の日本語書体「NotoSansJP」を入れています。


HTMLのマークアップファイルが完成したら、style.cssファイルを同じフォルダに作成しておきましょう。
CSSコード模写 フォトギャラリーの動画2
次はCSSの作成です。下記の動画を参照してからCSSのコード模写を行いましょう。
親要素の<div class=”flex”>でdisplay:flex
.flex {
/* 子要素を横に並べる / display: flex; / 中の子要素の幅で親要素の幅に均等に余白を入れ広げる */
justify-content: space-between;
margin-bottom: 2em;
}
上記のコードの場合、子要素であるsection要素が増えた場合、横に詰め込むような形になります。


flex-wrapを追加
display:flexを適用する際にその要素にwidth(幅)が指定されている場合、その中で収めよう・・・としてしまうため、中の子要素の幅で行変えを行いたい場合があります。その場合はflex-wrap:wrapを追加します。
また、1行目・2行目の縦の余白を開けるためにrow-gapも追加します。
.flex {
/* 子要素を横に並べる / display: flex; / 中の子要素の幅で親要素の幅に均等に余白を入れ広げる */
justify-content: space-between;
margin-bottom: 2em;
flex-wrap: wrap;
row-gap: 2em;
}
section要素のclass=boxでの指定
section.box {
width: 30%;
text-align: center;
background-color: #fff;
border: 1px solid #333;
padding: 1em;
box-sizing: border-box;
}
上記のようにwidth:30%で子要素の幅を指定しても大丈夫ですが、flexboxには、flex-basicというプロパティもあります。同時に指定した場合、flex-basic側が優先されますので注意しましょう。


CSS模写コード
@charset utf-8;
*{
margin:0;
}
aricle,section,
figure,figcaption{
display: block;
}
body{
font-size:1em;
line-height: 1.7;
font-family: ‘Noto Sans JP’, sans-serif;
}
.container {
width:960px;
margin:0 auto;
}
.title {
text-align: center;
padding:.5em 0 ;
font-family: ‘Oswald’, sans-serif;
font-size:2em;
}
.flex{
display: flex;
justify-content: space-between;
margin-bottom: 2em;
}
section.box{
width:30%;
text-align: center;
background-color: #fff;
border:1px solid #333;
padding:1em;
box-sizing: border-box;
}
section.box h1{
margin-bottom: 1rem;
}
section.box figure a{
transition: 2s;
}
section.box figure a:hover{
opacity: 0.5;
}
section.box figure img{
border-radius: 50%;
}
section.box figcaption{
text-align: left;
text-align: justify;
}



フォトギャラリーのHTML/CSSコードは上記になりますね。
作成方法と合わせて見栄えを動画で確認しましょう