<figure>: FIGURE 要素
最終更新：2026-10-13
<figure>FIGURE 要素
自己完結したフローコンテンツを表し、多くの場合 figcaption を伴います。画像・図・コード・例などに使われます。
| カテゴリ | セマンティック |
|---|---|
| コンテンツモデル | フローコンテンツ |
| 許可される親要素 | フローコンテンツを受け入れる要素 |
| 閉じタグ | 必要 </figure> タグ |
| ステータス | 標準 |
📝 構文
<figure>figure のコンテンツ</figure>▶ サンプル
下のコードを編集して、playground でリアルタイム結果を確認：
🌐 ブラウザサポート
| ブラウザ |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <figure> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザでサポート | |||||
ヒント： figure 内のコンテンツは移動しても意味が保たれます。キャプションには普通の p ではなく figcaption を使いましょう。
❓ よくある質問
Qfigure には画像しか入れられないのですか？
Aいいえ。
<figure> は「本文から取り出しても主旨に影響しない、自己完結した内容ユニット」です。画像・コードブロック・表・動画・グラフ・詩など何でも入ります。<figcaption> と組み合わせて説明を付けるのが定番で、意味を持ったコンテンツカードと考えるとよいでしょう。Qfigure に入れるのと img を直接置くのは何が違いますか？
A
<img> を直接置くだけなら、それは単なる挿し絵です。<figure> に包むと「これは独立して参照できる内容ユニットだ」と宣言したことになり、スクリーンリーダーは説明付きのひとまとまりとして読み上げます。<figcaption> と組み合わせれば、図と説明の関連も明示できます。説明文が必要な場合や、内容がグループになる場合は figure を使いましょう。Qfigure の中に複数の画像を入れられますか？
A入れます。
<figure> では複数の画像がひとつの <figcaption> を共有できます（「図1a と図1b」など）。これは単体の <img> に対する利点のひとつです。ただし各画像には、それぞれ固有の alt 属性が必要です。🏷️ 関連タグ
💡 関連ケース
今後さらにケーススタディを追加予定です。
📚 関連チュートリアル
