画像とキャプションをセットで扱ってみよう（figure / figcaption）

HTML5 では、画像とその説明文を「セットの意味のあるかたまり」として扱うために
<figure> と <figcaption> というタグが用意されています。

<figure>：画像や図、コード例など「本文の内容と関係のあるひとまとまりのコンテンツ」を囲む箱
<figcaption>：その中身（画像や図など）に対する【キャプション（説明文・タイトル）】を入れるタグ

新聞や本でいう「写真＋その下に書いてある説明文」を、HTML で表現するための組み合わせだと思ってください。

単なる飾りの画像ではなく、

本文の内容を補足する図解・グラフ・写真
自分で撮影・作成した作例画像
コードサンプルのスクリーンショット

といった、「コンテンツとして意味を持つ画像」や図のまとまりに使うのが <figure> の基本的な使い方です。

<figure>
  <img src="images/sample.jpg" alt="完成したWebページのスクリーンショット">
  <figcaption>図1：完成したトップページのデザイン例</figcaption>
</figure>

このように書くと、ブラウザや検索エンジンにも
「この画像とキャプションはセットで、本文と関係のある図だよ」と伝えることができます。

作成ファイル・保存場所

作成した html-basic フォルダの中に html12.html というファイル名で保存してください。

指示

以下の構成に従って、画像＋キャプションの組み合わせを使ったページを作成してください。

タイトルは「HTML課題12」とすること
<main> の中に <figure> 要素を2つ含めてください
<figure> 内には以下の要素を含めてください：
1. <img>：画像（ダミー画像使用）
2. <figcaption>：画像の説明文（例：「作品A – Webサイトデザイン」など）
画像は Kobeya Lab ダミー画像ジェネレーターを使い、URLで表示すること

ダミー画像の例

https://dummy.kobeya.com/?width=400&height=250&text=Work+A
https://dummy.kobeya.com/?width=400&height=250&text=Work+B

チェックポイント

<figure> 要素が <img> と <figcaption> を正しく囲んでいるか
<figcaption> が「画像の説明文」として意味を持っているか
視覚的に画像と説明がペアになっていることが明確になっているか
<main> の中に意味のある順番・構造で配置されているか
インデントや閉じタグのミスがないか

要素名がわからない場合は、HTML要素一覧を参照してみましょう

完成イメージ

HTMLの解答例

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>HTML課題12</title>
</head>

<body>

    <!-- サイト全体のヘッダー -->
    <header>
        <h1>My Works</h1>
    </header>

    <!-- メインコンテンツ -->
    <main>

        <figure>
            <img src="https://dummy.kobeya.com/?width=400&height=250&text=Work+A" alt="作品Aのサムネイル画像">
            <figcaption>作品A - Webサイトデザイン（2025年）</figcaption>
        </figure>

        <figure>
            <img src="https://dummy.kobeya.com/?width=400&height=250&text=Work+B" alt="作品Bのサムネイル画像">
            <figcaption>作品B - スマホアプリUI設計</figcaption>
        </figure>

    </main>

    <!-- サイト全体のフッター -->
    <footer>
        <p><small>&copy; 2025 MySite</small></p>
    </footer>

</body>

</html>