HTML辞書ホームへ
HTML要素 辞書 by Sentaro
%3C/text%3E%3C/svg%3E)
図 1. 愛らしい猫の写真。
リスト 1. シンプルなJavaScriptコード。
<figure>
フィギュア（Figure）要素。ドキュメントの主要なフローから独立したコンテンツ（図表、写真、コードリストなど）を定義します。
info
概要
<figure> 要素は、ドキュメントの主要なコンテンツに付随するコンテンツ（図、イラスト、写真、コードブロック、引用など）をマークアップするために使用されます。
このコンテンツは**主要なフローから削除されてもドキュメントの意味が変わらない独立性**を持っているべきです。
要素内には、コンテンツに対するキャプション（説明）を提供する <figcaption> 要素を配置できます。
play_circle
デモ (静的表示)
HTML (Source)
<figure>
<img src="image-path.jpg" alt="猫の図" style="max-width:100%; height:auto;">
<figcaption>図 1. 愛らしい猫の写真。</figcaption>
</figure>
<figure>
<pre><code>console.log("Hello, World!");</code></pre>
<figcaption>リスト 1. シンプルなJavaScriptコード。</figcaption>
</figure>
Preview (Result)
console.log("Hello, World!");
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| （グローバル属性のみ） | <figure> 要素固有の属性はありません。全てのHTML要素で利用可能なグローバル属性（id, class, style, data-*など）のみを使用できます。 |
code
実用例
1. 画像とキャプションの組み合わせ
<figure>
<img src="chart.png" alt="年間売上推移を示す棒グラフ">
<figcaption>
図 2. 2024年の四半期別売上推移。
</figcaption>
</figure>
2. 引用（<blockquote>）と出典をグループ化
<figure>
<blockquote cite="https://example.com/source">
<p>Webのアクセシビリティは、全ての人に情報へのアクセスを提供する鍵である。</p>
</blockquote>
<figcaption>
出典: <cite>ウェブの父</cite> Tim Berners-Lee
</figcaption>
</figure>
3. 複数の要素を一つの図として扱う
<figure>
<img src="cat1.jpg" alt="子猫の顔">
<img src="cat2.jpg" alt="眠る猫">
<figcaption>
図 3. 同じ猫の異なる表情。
</figcaption>
</figure>
lightbulb
知っておくべき重要事項
build
<figure> のセマンティクス
<figure>は単なるコンテナ要素（例: <div>）ではありません。この要素は、コンテンツが**自己完結的**であり、本文中の参照箇所から動かせることを示します。これにより、レイアウトが変更されてもコンテンツの意味が保たれます。
<figure>は単なるコンテナ要素（例: <div>）ではありません。この要素は、コンテンツが**自己完結的**であり、本文中の参照箇所から動かせることを示します。これにより、レイアウトが変更されてもコンテンツの意味が保たれます。
accessibility_new
アクセシビリティ
<figure>内の画像 (<img>) には、引き続き**適切な
<figure>内の画像 (<img>) には、引き続き**適切な
alt 属性**を提供することが重要です。<figcaption>は視覚的なキャプションを提供しますが、スクリーンリーダー利用者のために、画像の内容を正確に記述する alt テキストが必要です。