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

2020年4月15日2024年12月29日

URLをコピーしました！

今回は、Webデザインでよく使われるフォトギャラリーを作成します。写真とキャプションの組み合わせをカード形式で表示するデザインを、HTMLとCSSを使って実現していきます。

どんなフォトギャラリーを作るんですか？

今回は、写真とキャプションの組み合わせを使ったフォトギャリーを作っていきます！HTMLの<figure>という要素を活用します。

<figure>ってどう読むんですか？フィギュア？あの人形みたいな？

読み方は合っていますね！figureは英語で図やイラストを意味します。HTMLでは、写真や図とキャプション（説明文）を組み合わせるために使います。今回のフォトギャラリーも、写真とキャプションを組み合わせたデザインです。

完成イメージ

下図のようなフォトギャラリーを作成してみましょう。タイトル部分には<h1>要素を使用し、Google Fontsの「Oswald」を適用してスタイリッシュな見た目に。フォトギャラリー部分では、<figure>要素を使って写真とキャプションをカード形式でレイアウト。写真は長方形の状態で用意し、CSSで円形に加工します。

HTMLコード

以下はフォトギャラリーを構築するためのHTMLコード例です。このコードでは、<figure>要素を使用して画像とキャプションを組み合わせています。今回は、<h1>（タイトル）にはGoogle Fontsの「Oswald」、本文やキャプションには「Noto Sans JP」を適用しています。また、<a>タグで画像を囲むことで、クリック可能なギャラリーに。画像のURLにはhttps://picsum.photosを使用してランダムな写真をダミー表示させています。
本番環境では自分の画像を用意して使用してください。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Photo Gallery</title>
    <link rel="stylesheet" href="style.css">
    <!-- Google Fonts -->
    <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">
</head>
<body>
    <div class="container">
        <header>
            <h1 class="title">Photo Gallery</h1>
        </header>
        <div class="flex">
            <section class="box">
                <h2>写真名</h2>
                <figure>
                    <a href="#"><img src="https://picsum.photos/200/200?random=1" alt="写真1"></a>
                    <figcaption>ここに写真の説明文が入ります。`figcaption`という要素で写真のキャプションとなります。</figcaption>
                </figure>
            </section>
            <section class="box">
                <h2>写真名</h2>
                <figure>
                    <a href="#"><img src="https://picsum.photos/200/200?random=2" alt="写真2"></a>
                    <figcaption>ここに写真の説明文が入ります。`figcaption`という要素で写真のキャプションとなります。</figcaption>
                </figure>
            </section>
            <section class="box">
                <h2>写真名</h2>
                <figure>
                    <a href="#"><img src="https://picsum.photos/200/200?random=3" alt="写真3"></a>
                    <figcaption>ここに写真の説明文が入ります。`figcaption`という要素で写真のキャプションとなります。</figcaption>
                </figure>
            </section>
        </div>
    </div>
</body>
</html>

`<div class="flex">〜</div>`内の構造

<div class="flex">内に複数の<section>要素を配置しています。
section要素は、フォトギャラリーの各写真を表す独立したコンテンツの単位として使用されています。
section要素には、クラス名boxを指定しており、後ほどCSSでデザインやレイアウトを設定します。

`<figure>`要素の役割

画像とキャプションをまとめる要素
<figure>はHTML5で導入された要素で、図や画像とその説明文（キャプション）を関連付けてまとめるために使用します。
キャプションの指定
<figure>の中で、説明文を記述するために<figcaption>要素を使用します。
例: 写真のタイトルや補足説明を付ける際に便利です。

CSSコードを練習

次に、HTML構造に基づいてCSSを作成していきます。今回は、<div class="flex">を親要素としてdisplay: flexを適用し、子要素である<section>要素をレイアウトします。

親要素`<div class="flex">`で`display: flex`を適用

以下のコードでは、Flexboxを使用して子要素を横に並べています。また、justify-content: space-between;で均等に余白を入れる設定を行っています。

.flex {
    display: flex; /* 子要素を横に並べる */
    justify-content: space-between; /* 子要素間を均等に分ける */
    margin-bottom: 2em; /* 親要素の下に余白を設定 */
}

子要素が増えると、横に詰め込むような形になります。子要素の幅が親要素の幅を超えた場合、レイアウトが崩れる可能性があります。

flex-wrapを追加

子要素が多くなった場合に行を折り返すには、flex-wrap: wrap;を追加します。さらに、行間を調整するためにrow-gapを設定します。

.flex {
    display: flex; /* 子要素を横に並べる */
    justify-content: space-between; /* 子要素間を均等に分ける */
    margin-bottom: 2em; /* 親要素の下に余白を設定 */
    flex-wrap: wrap; /* 子要素を折り返し可能にする */
    row-gap: 2em; /* 行間の余白を設定 */
}

flex-wrap: wrap;子要素が親要素の幅を超える場合に、自動的に次の行に折り返します。
row-gap: 2em;各行の間に余白を追加して、見た目を整えます。

`section`要素の`.box`クラス指定

各子要素（<section class="box">）に適用するスタイルを定義します。ここでは、子要素の幅やデザインを指定します。

.box {
    width: 30%; /* 子要素の幅を30%に指定 */
    text-align: center; /* テキストを中央揃え */
    background-color: #fff; /* 背景色を白に設定 */
    border: 1px solid #333; /* 枠線を設定 */
    padding: 1em; /* 内側の余白を追加 */
    box-sizing: border-box; /* パディングとボーダーを含めたサイズ計算 */
}

width: 30%;子要素の幅を固定サイズではなく割合で設定することで、レスポンシブ対応がしやすくなります。
box-sizing: border-box;パディングやボーダーを含めて幅を計算することで、レイアウトが崩れにくくなります。

`flex-basis`について

Flexboxには、flex-basisというプロパティもあります。これは、要素の初期幅を指定するプロパティで、widthよりも優先されます。

.box {
    flex-basis: 30%; /* 子要素の初期幅を指定 */
    flex-grow: 1; /* 必要に応じて幅を広げる */
    text-align: center;
    background-color: #fff;
    border: 1px solid #333;
    padding: 1em;
    box-sizing: border-box;
}

レイアウトの幅を制御する際は、flex-basisを使用するかwidthを使用するか、状況に応じて選択しましょう。

CSS模写用コード

@charset "utf-8";

/* 全要素の余白をリセット */
* {
    margin: 0;
    padding: 0; /* パディングのリセットも追加 */
}

/* HTML5の要素をブロック要素として明示的に表示 */
article, 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: 0.5em 0; /* 上下に余白を設定 */
    font-family: 'Oswald', sans-serif; /* 見出し用フォント */
    font-size: 2em; /* フォントサイズを大きく設定 */
}

/* Flexboxによるレイアウト */
.flex {
    display: flex; /* 子要素を横並びに配置 */
    justify-content: space-between; /* 子要素間を均等に分ける */
    margin-bottom: 2em; /* 下に余白を設定 */
    flex-wrap: wrap; /* 子要素を折り返し可能に */
    row-gap: 2em; /* 行間の余白を設定 */
}

/* 各セクション（カード）のスタイル */
section.box {
    width: 30%; /* 子要素の幅を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: opacity 0.5s ease; /* スムーズなトランジション効果 */
}

section.box figure a:hover {
    opacity: 0.5; /* ホバー時の透明度を変更 */
}

/* 画像を円形に加工 */
section.box figure img {
    border-radius: 50%; /* 円形にする */
    transition: transform 0.3s ease; /* 拡大縮小のアニメーション効果 */
}

section.box figure img:hover {
    transform: scale(1.1); /* ホバー時に画像を拡大 */
}

/* キャプション部分のスタイル */
section.box figcaption {
    text-align: justify; /* キャプションを両端揃え */
    margin-top: 1em; /* 上に余白を追加 */
}

`transition: opacity 0.5s ease;`

CSSのtransitionプロパティを使うと、要素の状態が変化する際にスムーズなアニメーション効果を追加できます。

transition: opacity 0.5s ease;

opacity
アニメーションの対象となるプロパティです。この場合、透明度（opacity）が変化する際にアニメーションが適用されます。
0.5s
変化にかかる時間を指定します。この場合、透明度の変化が0.5秒かけてスムーズに実行されます。
ease
アニメーションの速度を「徐々に速くなり、徐々に遅くなる」自然な動きにします。

応用コードです。追加してみましょう。

a {
    opacity: 1; /* 通常時は完全に表示 */
    transition: opacity 0.5s ease; /* 透明度をスムーズに変化 */
}

a:hover {
    opacity: 0.5; /* ホバー時に透明度を50%に変更 */
}

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

次は、Table要素について

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

まずは動画に目を通してもらってから、下記のコード模写を行います。

よかったらシェアしてね！

URLをコピーしました！

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

完成イメージ

HTMLコード

<div class="flex">〜</div>内の構造

<figure>要素の役割