【HTML Living Standard】figure要素の使い方
figure要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
figureオブジェクトは、HTML文書内で自己完結したコンテンツを表すオブジェクトです。このコンテンツは、メインの文書フローから独立しており、文書の主要な内容とは別に参照されるべき図表、イラスト、写真、コードの断片、ビデオなど、さまざまなメディアや情報をまとめるために使用されます。figure要素で囲まれた内容は、その表示位置が変更されても、文書全体の意味や流れに影響を与えないという特徴を持っています。
特に、figure要素はfigcaption要素と組み合わせて使用することが推奨されます。figcaption要素は、figure要素内のコンテンツに対するキャプションやタイトルを提供し、その内容をより具体的に説明する役割を果たします。これにより、ユーザーはfigureの内容とその説明を明確に結びつけて理解できます。
この要素を使用することのメリットは、単にコンテンツを配置するだけでなく、意味的なまとまりとしてコンテンツを構造化できる点にあります。セマンティックなマークアップを行うことで、検索エンジンやスクリーンリーダーのような補助技術がウェブページのコンテンツ構造をより正確に理解できるようになります。結果として、ウェブコンテンツのアクセシビリティとユーザビリティが向上し、構造化された情報提供に貢献します。
構文(syntax)
1<figure> 2 <img src="image.jpg" alt="説明文"> 3 <figcaption>図のキャプション</figcaption> 4</figure>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTMLのfigure要素で画像と説明を表示する
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>figure要素のサンプル</title> 7</head> 8<body> 9 10 <!-- 11 figure要素は、文書の主要なフローから独立した自己完結型のコンテンツ（画像、図、コードブロック、ビデオなど）をマークアップします。 12 通常、figcaption要素と組み合わせて、そのコンテンツのキャプション（説明文）を提供します。 13 これにより、コンテンツが文書のどこに配置されても意味が通じるようになります。 14 --> 15 <figure> 16 <!-- img要素は、表示する画像を指定します。src属性で画像のパスを、alt属性で代替テキストを提供します。 --> 17 <img src="https://via.placeholder.com/300x200?text=Sample+Image" alt="Webページに表示されるサンプル画像"> 18 <!-- figcaption要素は、figure要素の内容に対するキャプション（説明文やタイトル）を提供します。 --> 19 <figcaption>図1. これは、Webページに挿入されたサンプル画像とその説明です。</figcaption> 20 </figure> 21 22</body> 23</html>
figure要素は、Webページ上で画像、図、コードブロック、動画など、文書の主要な流れから独立して理解できる自己完結型のコンテンツをマークアップするために使用されるHTML要素です。この要素で囲まれたコンテンツは、文書の他の部分から切り離されても、その内容が完結していることを示します。
通常、figcaption要素と組み合わせて使用され、figure要素内のコンテンツに対するキャプション（説明文やタイトル）を提供します。これにより、例えばページ内の画像が別の場所に移動しても、その画像と説明が常にセットで読者に伝わるようになり、コンテンツの理解度やアクセシビリティを高めることができます。
提示されたサンプルコードでは、figure要素がimg要素（表示する画像）とfigcaption要素（画像のキャプション）を囲んでいます。img要素はsrc属性で画像ファイルの場所を指定し、alt属性で画像が表示できない場合の代替テキストを提供します。figcaption要素は、この画像が何であるかを説明する「図1. これは、Webページに挿入されたサンプル画像とその説明です。」というテキストを提供しています。
HTMLの要素であるため、figure要素自体にプログラミング言語のような特定の「引数」や「戻り値」といった概念はありません。その振る舞いや表示は、他のHTML属性やCSSによって設定されます。figure要素は、あくまでコンテンツの論理的な意味付けと構造化を担うものです。
figure要素は、画像だけでなく、コードブロックやビデオなど、文書の主要な流れから独立した自己完結型のコンテンツをマークアップする際に使用します。単にコンテンツを囲むのではなく、その内容がどこに配置されても意味が通じるような独立性を持つ点が重要です。
figcaption要素は、figure内のコンテンツに対する説明文を提供し、必須ではありませんが、コンテンツの理解を深めるために積極的に活用することをお勧めします。figcaptionはfigure要素の最初または最後の子要素として配置してください。内部にimg要素を置く場合、alt属性に適切な代替テキストを必ず設定し、視覚障がい者を含む全てのユーザーが内容を理解できるよう、アクセシビリティを確保してください。figure要素自体は見た目を変更するものではなく、デザインはCSSで行います。
HTML figureタグで画像と説明をグループ化する
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>figureタグの基本サンプル</title> 7 <style> 8 /* 見た目を分かりやすくするための基本的なスタイル */ 9 body { 10 font-family: sans-serif; 11 margin: 20px; 12 } 13 figure { 14 border: 1px solid #ccc; /* figure要素の範囲を視覚化 */ 15 padding: 10px; 16 margin: 0 auto 20px auto; /* 中央寄せ */ 17 display: table; /* figcaptionをコンテンツ幅に合わせる */ 18 } 19 img { 20 max-width: 100%; /* 画像が親要素を超えないようにする */ 21 height: auto; 22 display: block; /* 画像の下の余白をなくす */ 23 margin-bottom: 5px; 24 } 25 figcaption { 26 font-style: italic; 27 color: #555; 28 text-align: center; 29 } 30 </style> 31</head> 32<body> 33 <!-- 34 figureタグは、ドキュメントの主要なフローから独立したコンテンツ（画像、コード、グラフ、引用など）を 35 マークアップするために使用されます。通常、figcaptionタグと組み合わせて、そのコンテンツの説明を提供します。 36 この例では、画像とそのキャプションをまとめています。 37 --> 38 <figure> 39 <!-- imgタグは、figure要素内のメインコンテンツとして画像を埋め込みます。 --> 40 <!-- src: 画像のURL、alt: 画像が表示されない場合の代替テキスト --> 41 <img src="https://via.placeholder.com/600x300/FF5733/FFFFFF?text=Sample+Image" 42 alt="鮮やかな赤色の背景に白文字で「Sample Image」と書かれたプレースホルダー画像" 43 width="600" 44 height="300"> 45 <!-- figcaptionタグは、figure要素に対するキャプション（説明文）を提供します。 --> 46 <figcaption>図1: これはfigureタグを使ってマークアップされたサンプル画像とその説明です。</figcaption> 47 </figure> 48 49 <p> 50 上記の画像と説明は、<code><figure></code>要素によってグループ化されています。 51 これにより、画像と説明が密接に関連するコンテンツとして扱われます。 52 </p> 53</body> 54</html>
HTMLのfigureタグは、ドキュメントの主要なフローから独立したコンテンツをマークアップするために使用される要素です。例えば、画像、図、グラフ、コードブロック、引用文など、メインの文章から切り離して扱われることの多い内容とその説明文をひとまとまりとしてグループ化します。
提供されたサンプルコードでは、figureタグの中に画像を表す<img>タグと、その画像に対する説明文である<figcaption>タグが配置されています。これにより、「図1: これはfigureタグを使ってマークアップされたサンプル画像とその説明です。」というキャプションが、上部の画像と密接に関連する情報として扱われることが明確になります。
figureタグ自体は、直接的に特定の引数や戻り値を持つわけではありません。その役割は、囲まれたコンテンツに意味的なまとまりを与えることにあります。このタグを用いることで、ウェブページの構造がより論理的になり、検索エンジンやスクリーンリーダーなどのツールがコンテンツの内容をより正確に理解しやすくなります。画像とそのキャプションが不可分な関係にあることを示すことで、コンテンツの可読性とアクセシビリティが向上します。
figureタグは、文書の主要な流れから独立した、画像やコード、引用などのコンテンツと、その説明をひとまとまりとして表現する際に用います。単に見た目をグループ化するだけでなく、コンテンツに意味的なまとまりを与えるセマンティックな要素であることが重要です。通常はfigcaptionタグと組み合わせて、コンテンツに対するキャプションや説明を提供します。これにより、検索エンジンやスクリーンリーダーなどの補助技術がコンテンツの内容を正しく理解しやすくなります。画像を配置する際は、imgタグのalt属性に必ず適切な代替テキストを設定し、アクセシビリティを確保してください。figureタグ自体はデフォルトで特定のスタイルを持たないため、サンプルコードのようにCSSを用いて、見た目のレイアウトやレスポンシブ対応を行うことが一般的です。