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


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

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

読み方はあってますね。figureは図という英語です。図とキャプションという組み合わせですが、htmlでは写真とキャプションの組み合わせも使っています。
目次
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&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; }

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