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

2022年8月2日Webサイト制作,ホームページ中級講座,動画

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

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

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

Contents

1. 完成イメージ
2. HTMLコード模写フォトギャラリーの動画
3. Photo GalleryのHTMLをコード模写しよう
4. CSSコード模写フォトギャラリーの動画２
5. 親要素の<div class="flex">でdisplay:flex
6. flex-wrapを追加
7. section要素のclass=boxでの指定
8. CSS模写コード

完成イメージ

下図のようなフォトギャラリーを作成してみましょう。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要素)を使ってのマークアップに使用されます。

<figure>: キャプションが付けられる図要素 - HTML: HyperText Mar

HTML の <figure> (キャプションが付けられる図) 要素は、図表などの自己完結型のコンテンツを表 ...

https://developer.mozilla.org/ja/docs/Web/HTML/Element/figur...

画像であるimg要素には、ランダムに画像を使用できる「Lorem Picsum」さんの画像リンクを使っています。

Lorem Picsum

Lorem Ipsum... but for photos

https://picsum.photos/

またhead要素内でgoogle font の日本語書体「NotoSansJP」を入れています。

Google Fonts: Noto Sans Japanese

Noto is a global font collection for writing in all modern and ancient languages. Noto Sans JP i ...

https://fonts.google.com/noto/specimen/Noto+Sans+JP?query=No...

HTMLのマークアップファイルが完成したら、style.cssファイルを同じフォルダに作成しておきましょう。

CSSコード模写フォトギャラリーの動画２

次は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を追加します。

また、１行目・２行目の縦の余白を開けるために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側が優先されますので注意しましょう。

flex-basis - CSS: カスケーディングスタイルシート | MDN

flex-basis は CSS のプロパティで、フレックスアイテムの主要部分の初期の寸法を設定します。 box-siz ...

https://developer.mozilla.org/ja/docs/Web/CSS/flex-basis

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;
}