HTML Living Standard/figure
figure 要素
[編集]<figure> 要素は、キャプション付きの図表やイラスト、コードスニペット、写真、表などを文書内でセマンティックに表現するために使用される要素です。この要素は、文書中の主要なフローから独立して移動可能なコンテンツを含むのに適しています。
概要
[編集]- 役割: キャプション付きの図表や付随するコンテンツを表現する。
- 特徴: 通常、
<figcaption>要素と組み合わせて使用されます。 - 主な用途:
- 写真や画像の挿入
- グラフやチャートの表示
- コードスニペットの補足情報
- 文書に関連するメディアコンテンツ
使用例
[編集]基本的な使用例
[編集]以下は、画像とそのキャプションを含む <figure> 要素の例です。
<figure> <img src="landscape.jpg" alt="山の風景"> <figcaption>図1: 美しい山の風景</figcaption> </figure>
コードスニペットの例
[編集]以下は、コードスニペットを説明するために <figure> を使用した例です。
<figure> <pre><code> function greet() { console.log("Hello, world!"); } </code></pre> <figcaption>図2: JavaScript の簡単な関数</figcaption> </figure>
属性
[編集]<figure> 要素はグローバル属性をサポートします。
グローバル属性の例
[編集]以下は、`id` 属性を使用して特定のスタイルを適用した例です。
<figure id="example-figure" class="highlighted-figure"> <img src="diagram.png" alt="フローチャート"> <figcaption>図3: フローチャートの例</figcaption> </figure>
- 許可される親要素: フローコンテンツを含む任意の要素（例:
<article>、<section>、<div>など）。 - 含めることができる子要素:
- 任意のフローコンテンツ
- 通常は
<figcaption>要素と組み合わせて使用されます。
<figcaption> 要素との関係
[編集]<figcaption> 要素は <figure> 要素内で唯一使用可能なキャプションを提供する要素です。<figcaption> は <figure> の最初または最後に配置することができます。
- 例
<figure> <figcaption>図4: サンプル図表</figcaption> <img src="sample.png" alt="サンプル図表"> </figure>
アクセシビリティの考慮
[編集]- 説明の明確化:
<figcaption>を使用して、図表やメディアコンテンツの説明を視覚的および非視覚的なユーザーに提供します。 - 代替テキストの使用:
<img>要素などを含む場合、`alt` 属性を適切に設定してコンテンツの意味を伝えます。
ベストプラクティス
[編集]- キャプションの提供:
<figure>内のコンテンツの目的や内容を明確にするために、必ず<figcaption>を使用します。 - フローからの独立性:
<figure>の内容が文書全体で独立しても意味を成すように設計します。 - 適切なスタイリング: CSS を使用して、図表やキャプションが文書のデザインに調和するようにスタイリングします。
使用上の注意
[編集]- キャプションの一貫性:
<figure>の各インスタンスに対して適切なキャプションを提供し、ユーザーがコンテンツを理解しやすくします。 - 非推奨の使用法:
<figure>要素を通常の段落や見出しの代替として使用するのは適切ではありません。
まとめ
[編集]<figure> 要素は、キャプション付きの図表やメディアコンテンツを文書構造の中でセマンティックに表現するための強力なツールです。適切に使用することで、文書の可読性とアクセシビリティを向上させることができます。