はじめに
こんにちは、赤神です！
この記事は、「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>