【HTML Living Standard】figcaption要素の使い方
figcaption要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
figcaptionオブジェクトは、HTMLの<figure>要素に内包される図、写真、コードブロック、表などのコンテンツに対して、キャプションやタイトルを提供するオブジェクトです。この要素は、<figure>要素の内部に配置され、そのコンテンツの内容を簡潔に説明したり、文脈を補足したりする目的で使用されます。例えば、科学論文の図のタイトル、写真の撮影場所や日付、コードスニペットの機能説明、データテーブルの要約などを記述する際に非常に役立ちます。
figcaption要素の最大の利点は、コンテンツとキャプションがセマンティックに（意味的に）関連付けられる点にあります。これにより、Webページの構造がより明確になり、人間だけでなく、スクリーンリーダーなどの補助技術や検索エンジンもコンテンツの意味を正確に理解できるようになります。結果として、Webサイトのアクセシビリティが向上し、SEO（検索エンジン最適化）にも良い影響を与えます。単なるdivやpタグでキャプションを記述するよりも、意味的な情報が付与されるため推奨されます。
この要素は、親となる<figure>要素の最初の子要素、または最後の子要素としてのみ配置することができます。これにより、キャプションが必ず対象のコンテンツの直前または直後に位置することが保証され、視覚的・構造的な一貫性が保たれます。figcaption要素は、HTMLドキュメントの構造に意味的な層を追加し、コンテンツの理解を深めるために不可欠な役割を担います。
構文(syntax)
1<figcaption>図や画像のキャプション、あるいは凡例やタイトル</figcaption>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML figcaption 要素で図に説明をつける
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML figcaption 要素のサンプル</title> 7 <style> 8 /* サンプルを見やすくするための最小限のスタイル */ 9 body { 10 font-family: sans-serif; 11 margin: 20px; 12 background-color: #f4f4f4; 13 } 14 figure { 15 border: 1px solid #ddd; 16 padding: 10px; 17 margin: 20px auto; /* 中央寄せ */ 18 max-width: 400px; 19 background-color: #fff; 20 box-shadow: 2px 2px 5px rgba(0,0,0,0.1); 21 } 22 img { 23 max-width: 100%; 24 height: auto; 25 display: block; /* 画像の下の余白をなくす */ 26 margin-bottom: 10px; 27 } 28 figcaption { 29 font-style: italic; /* 説明文を斜体にする */ 30 color: #555; 31 text-align: center; 32 font-size: 0.9em; 33 } 34 </style> 35</head> 36<body> 37 38 <!-- 39 figcaption要素は、親要素であるfigure要素のコンテンツ（画像、図、コードブロックなど）に 40 対するキャプション（説明文やタイトル）を提供します。 41 --> 42 <figure> 43 <!-- figure要素は、関連するコンテンツとキャプションをグループ化します。 --> 44 <img src="https://via.placeholder.com/300x200?text=サンプル画像" alt="サンプルの風景写真"> 45 46 <!-- figcaption要素は、上記img要素（figureの内容）に対する説明です。 --> 47 <figcaption>美しい夕焼けの風景。これはfigcaptionで提供されたキャプションです。</figcaption> 48 </figure> 49 50</body> 51</html>
figcaption要素は、HTMLにおいて、画像、図、コードブロックなど、独立したコンテンツを示すfigure要素にキャプション（説明文やタイトル）を付与するために使用されます。この要素は必ずfigure要素の内部に配置され、figure要素が囲む主要なコンテンツに対する意味的な説明を提供します。
このHTML要素自体には、特定の処理を行うための引数や戻り値という概念はありません。これはプログラミング言語の関数とは異なり、コンテンツの構造と意味を定義する役割を持ちます。
提供されたサンプルコードでは、まずfigure要素が画像を囲んでいます。そのfigure要素の内部で、<img>タグで表示されたサンプル画像に対して、figcaption要素が「美しい夕焼けの風景。これはfigcaptionで提供されたキャプションです。」という説明文を提供しています。これにより、画像とその説明がセットで意味のあるコンテンツとして扱われ、ウェブページの情報をより分かりやすく整理することができます。このようにfigcaptionを用いることで、コンテンツの理解を深め、ウェブページのアクセシビリティを向上させることにも繋がります。
figcaption要素は、必ず親要素であるfigure要素の子要素としてのみ使用してください。単独で使ったり、figure要素以外の子要素として使ったりしても、HTMLの意味を正しく伝えることはできません。
figure要素は、画像、図、コードブロックなど、独立したコンテンツをグループ化するために使われ、figcaptionはそのfigure内のコンテンツに対するキャプション（説明文やタイトル）を提供します。キャプションはfigure要素の最初の子要素、または最後の子要素として配置するのが一般的です。
この要素を使うことで、単なるテキストではなく、コンテンツに対する意味のあるキャプションであることを明確にできます。HTMLで意味を正しく伝える「セマンティックなマークアップ」を心がけることで、検索エンジンやスクリーンリーダーなどの支援技術にとっても、ウェブページの構造が理解しやすくなります。見た目はCSSで自由に調整可能です。
HTML figcaptionタグで画像に説明を付ける
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>figcaptionタグのサンプル</title> 7</head> 8<body> 9 10 <!-- 11 figure要素は、図、写真、コードブロックなど、独立したコンテンツをマークアップするために使用します。 12 この要素は、ドキュメントの主要なフローから参照されるものの、 13 削除されてもドキュメントのフローに影響を与えない自己完結型のコンテンツを表します。 14 --> 15 <figure> 16 <!-- img要素は、表示する画像を指定します。src属性で画像ファイルのパス、alt属性で代替テキストを提供します。 --> 17 <img src="https://via.placeholder.com/300x200" alt="サンプル画像"> 18 19 <!-- 20 figcaption要素は、figure要素のキャプション（説明文）を提供します。 21 このキャプションは、figure要素内のコンテンツ（例: 画像、グラフ、コード）を説明します。 22 --> 23 <figcaption>この画像は、風景のサンプルを表しています。</figcaption> 24 </figure> 25 26</body> 27</html>
HTMLのfigcaptionタグは、figure要素（図、写真、コードブロックなど、独立したコンテンツ）に対するキャプション（説明文）を提供する際に使用される要素です。このタグは、figure要素内の主要なコンテンツ（例えば、画像やグラフ）の意味を補足し、ユーザーや検索エンジンにその内容をより正確に伝える役割を持っています。
figcaptionタグは、figure要素の最初の子要素、または最後の子要素として配置することができます。これにより、figure要素で囲まれたコンテンツに直接関連する説明を付与し、ドキュメントの構造と意味を明確にします。例えば、写真の下にその写真が何を写しているのかを説明するテキストを表示したい場合に最適です。
このタグには引数や戻り値は存在しません。そのため、特別な値を渡して挙動を変えたり、特定の値を結果として受け取ったりするような機能はありません。純粋に、figure要素内のコンテンツに対する説明テキストをマークアップするために使用されます。サンプルコードでは、img要素で表示された画像に対して、「この画像は、風景のサンプルを表しています。」というキャプションをfigcaptionタグで提供し、画像の内容を具体的に説明しています。
figcaptionタグは、figure要素のキャプション（説明文）を提供するために使用します。最も重要な注意点は、このタグが必ずfigure要素の直下の子要素として配置される必要があることです。figcaptionは単独で使用したり、figure要素以外の場所で使ったりすることはできません。
また、figcaptionはfigure要素内のコンテンツ（例：画像、グラフ、コードブロックなど）の一番最初か一番最後に記述することが推奨されます。これにより、コンテンツと説明文の関連性が明確になり、ウェブページの構造が論理的になり、スクリーンリーダーなどの補助技術を利用するユーザーにも内容が正確に伝わりやすくなります。キャプションは、figure要素が表す独立したコンテンツを簡潔かつ具体的に記述するように心がけましょう。