1.

HTML figure要素（figcaption と一緒に図表・画像・コードを意味付け）

▶
編集
この記事の要点
  • は本文から独立した図表・画像・コード・引用などをまとめる意味タグ
  • キャプションを付けるときは
    を
    の先頭か末尾に 1 つだけ置く
  • 本文の段落番号を変えずに切り取って別ページに移動できる "self-contained" であることが本来の使い分け基準
  • をただ包むだけでも検索エンジン / スクリーンリーダーへの意味付けとして有効
  • 装飾だけの画像（背景・アイコン）には不要。
    や CSS 背景でよい

figure 要素とは

は HTML5 で追加された意味タグ (semantic element) です。本文から独立した図表・画像・コードリスト・引用・動画などをひとまとまりにマークアップし、必要に応じて
でキャプションを付けるために使います。

W3C の定義では「本文から切り出して別ページに移動しても、本文の意味が壊れない自己完結したコンテンツ」を表すとされています。「本文に番号付きで参照される図」がイメージとして近いです。

基本構文


  2025年の売上推移グラフ
  
図1: 2025年の四半期別売上推移

は
の先頭または末尾に 1 つだけ置きます。省略しても文法的には OK で、その場合はキャプションなしの図扱いになります。

使える中身のバリエーション

画像


  システム構成図
  
図2: マイクロサービス構成図

コードリスト


  
function hello() {
  console.log("Hello, World!");
}

  
リスト1: 最小の JavaScript 関数

引用


  

    
Talk is cheap. Show me the code.

  

  
— Linus Torvalds

複数画像のグループ


  リファクタ前のコード
  リファクタ後のコード
  
図3: リファクタリング前後の比較

img をそのまま置くのとどう違うか

機械的なレンダリング結果は変わりませんが、意味付けが変わります。

書き方意味検索エンジン / 支援技術への伝わり方
単独段落内のインライン画像本文の挿絵程度
独立した図キャプション付きの「図表」と認識される

figure を使うべきでないケース

  • 装飾画像 — ヘッダー背景、ボタンアイコンなど。
    や CSS 背景に。
  • 本文と密結合した画像 — 「次の画像のように〜」と本文がその画像に依存している場合は、独立性がないので figure は不適切。
  • レイアウト目的のラッパー — 中央寄せしたいだけなら
    で十分。

よくある質問

Q: figcaption を画像の上に置きたい
A:

内の先頭に置けば構造的に上、末尾に置けば下になります。仕様上はどちらも 1 つだけ許可。

Q: img の alt と figcaption の使い分けは？
A: alt は画像の代替テキスト（画像が表示できない時に何が描かれているか）、figcaption はキャプション（「図1: 〜」のような本文中の説明）。役割が違うので両方書きます。

Q: figure をネストできる？
A: 仕様上は禁止されていませんが、独立した図の中に別の独立した図、という構造はほぼ意味を成さないので非推奨です。

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. figure要素
  2. template要素
  3. figcaption要素で図に説明を付ける
  4. canvas要素
  5. iframe要素
  6. script要素
  7. noscript要素
2026-06-11 05:44:46 guest 193

人気ページ

最近更新/作成されたページ