はじめに

こんにちは、赤神です！
この記事は、「1000本ノック」という取り組みの中のフロントエンドのための課題の1つです。

「1000本ノックとは」
https://qiita.com/sora_akagami/items/c8da4296dea3823376ca

`<figcaption>` を使う理由

<img> と <p> を別々に置いただけだと、機械（Googleやスクリーンリーダー）には「ここに画像があって、その近くに何かのテキストがある」ということが分かりません。

それに対して、<figure> と <figcaption> を使うと、「この <figure> で囲まれたコンテンツと、この <figcaption> のテキストは、親子関係にある正式な『セット』ですよ」と、機械に明確に伝えることができます。

作成したコード

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>フロントエンド1000本ノック 0004</title>
</head>
<body>
    <header>
      <!-- h1タグを記事のタイトルに使いたいため、divタグに変更 -->
      <div>
        <a href="/">
          <img src="img/logo.png" alt="フロントエンド1000本ノック">
        </a>
      </div>
      <nav>
        <ul>
          <li><a href="#">ホーム</a></li>
          <li><a href="#">会社概要</a></li>
          <li><a href="#">お問い合わせ</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <article>
        <h1>朝活を始めるメリット</h1>
        <section>
          <h2>体へのメリット</h2>
          <h3>代謝が上がる</h3>
          <p>ここに本文が入ります。</p>
          <figure>
            <img src="img/sunrise.jpg" alt="朝日を浴びて気持ちよさそうに伸びをする人物">
            <figcaption>図1：朝日を伸びることで体内時計がリセットされる</figcaption>
          </figure>
          <h3>体重管理がしやすい</h3>
          <p>ここに本文が入ります。</p>
        </section>
        <section>
          <h2>心へのメリット</h2>
          <h3>ストレスが減る</h3>
          <p>ここに本文が入ります。</p>
          <h3>集中力が高まる</h3>
          <p>ここに本文が入ります。</p>
        </section>
        <aside>
          <h2>関連記事</h2>
          <ul>
            <li><a href="#">関連記事1</a></li>
            <li><a href="#">関連記事2</a></li>
            <li><a href="#">関連記事3</a></li>
          </ul>
        </aside>
      </article>
    </main>
    <footer>
      <p>Copyright 2025</p>
      <p>フロントエンド1000本ノック</p>
    </footer>
</body>
</html>