20 ホームページ制作基礎講座 HTML編フォトギャラリーを作る

Yoshiko先生

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

はてな女史

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

Yoshiko先生

読み方はあってますね。figureは図という英語です。図とキャプションという組み合わせですが、htmlでは写真とキャプションの組み合わせも使っています。

Photo GalleryのHTMLの全体コード
これに合わせたCSSは
フォトギャラリーの動画はこちらです。

Photo GalleryのHTMLの全体コード

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>column</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&amp;subset=japanese" rel="stylesheet">
</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">から</section>までは繰り返し......................
</div>
</div>
</body>
</html>

これに合わせた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;
}