💡 この記事でわかること
- figure要素・figcaption要素とは何か
- 基本的な書き方
- 画像以外(表・コードなど)にも使える点
- 複数の画像をまとめる例
- 初心者がつまずきやすいポイント
1. figure要素・figcaption要素とは？
figure要素とは、
👉 画像や図表と、それに対する説明(キャプション)をひとつのまとまりとして扱うためのタグです。
figcaption要素は、そのfigureに対するキャプション文を付けるためのタグで、figureとセットで使います。
「本文の途中に挿入する図」のように、記事の流れから独立していても意味が通る内容(本文中の位置を移動しても問題ない図・画像)を扱う場面でよく使われます。
2. 基本的な書き方
figure要素の中に画像を置き、figcaption要素でキャプションを添えます。
<figure>
<img src="cat.jpg" alt="眠っている猫">
<figcaption>お気に入りの毛布で眠る猫</figcaption>
</figure>💡 img要素のalt属性は「画像が表示できないときの代替テキスト」であるのに対し、figcaptionは「画像が表示されている前提でのキャプション」という役割の違いがあります。両方付けても問題ありません。
3. 画像以外にも使える
figure要素の中身は画像に限りません。表(table)やコード(pre)、動画(video)など、キャプションを添えたいコンテンツであれば同じように使えます。
<figure>
<pre><code>console.log("Hello");</code></pre>
<figcaption>例1: コンソールに文字列を出力する</figcaption>
</figure>4. 複数の画像をまとめる
1つのfigure要素の中に複数のimg要素を並べて、まとめて1つのfigcaptionを付けることもできます。
<figure>
<img src="before.jpg" alt="施工前の様子">
<img src="after.jpg" alt="施工後の様子">
<figcaption>施工前(左)と施工後(右)の比較</figcaption>
</figure>💡 複数の画像を横に並べる見た目は、CSSのflexboxなどを使って別途整えます。figure・figcaption自体は見た目ではなく「意味のまとまり」を表すためのタグです。
5. 初心者がつまずきやすいポイント
figcaptionはfigureの最初か最後に置く
figcaption要素は、figure要素の中で最初の子要素か、最後の子要素として置く必要があります。画像の間に挟むような配置は仕様上想定されていません。
divとの違い
見た目だけを整えたいなら、figure・figcaptionの代わりにdivとpタグを使っても表示上はほとんど変わりません。ただし、figure・figcaptionを使うと「これは画像とキャプションのまとまりだ」という意味がHTML上ではっきりし、スクリーンリーダーや検索エンジンにも伝わりやすくなります。単なる見た目の装飾目的で使うタグではない、という点を意識しておきましょう。
まとめ
figure要素・figcaption要素を使うと、画像や図表とそのキャプションを意味のあるまとまりとして扱えます。
- figureの中にfigcaptionでキャプションを添える
- 画像だけでなく表・コード・動画などにも使える
- 複数の画像を1つのfigureにまとめることもできる
- figcaptionは最初か最後の子要素として置く
まずは1枚の画像にfigure・figcaptionを付けて、キャプション付きの図として表示してみましょう。