HTML figure・figcaptionタグ：資料とキャプションのまとめ方

HTMLリファレンス

作成日 2026-10-30 最終更新日 2026-10-30

HTML <figure>は、イラスト、チャート、コードなどの自己完結型コンテンツを1つのユニットにまとめ、<figcaption>がそのキャプションを提供します。単一のfigcaptionをfigureの最初または最後の子要素として配置します。キャプションが不要な場合は省略します。

figureは画像専用の要素ですか？

写真、イラスト、チャート、コード例、またはテキストが一つの項目として参照する引用には、figure を使用できます。スタイリング用コンテナだけが必要な場合は div を使用し、関連するセクション全体を figure で囲むのは避けてください。この要素を使用しても、資料の著作権や出典が自動的に確認されるわけではありません。

figcaptionは、直接の親であるfigureの残りの内容を説明します。figureの外には配置せず、1つのfigureにはfigcaptionを最大1つだけ入れます。上と下の両方に説明が必要な場合は、必要な説明を1つのfigcaptionにまとめます。

完全な例: キャプションを最初または最後に置きます

次のコードを figures.html として保存し、ブラウザで開いてください。この例では、SVG（スケーラブルベクターグラフィックス）を使って簡単な図形を描画しているため、個別の画像ファイルなしで動作します。最初の項目は図の前にキャプションがあり、二番目の項目は図の後にキャプションがあります。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>figureのキャプション位置の比較</title>
  <style>
    figure { margin: 1rem 0; max-width: 20rem; }
    svg { display: block; width: 100%; height: auto; }
    figcaption { padding: 0.5rem 0; }
  </style>
</head>
<body>
  <h1>2つの図形を比較</h1>
  <figure>
    <figcaption>図A. 青い円</figcaption>
    <svg viewBox="0 0 240 120" role="img" aria-label="明るい背景の中央にある青い円">
      <rect width="240" height="120" fill="#f0f3f5" />
      <circle cx="120" cy="60" r="36" fill="#176e96" />
    </svg>
  </figure>
  <figure>
    <svg viewBox="0 0 240 120" role="img" aria-label="明るい背景の中央にあるオレンジ色の正方形">
      <rect width="240" height="120" fill="#f0f3f5" />
      <rect x="84" y="24" width="72" height="72" fill="#b35a12" />
    </svg>
    <figcaption>図B. オレンジ色の正方形</figcaption>
  </figure>
</body>
</html>

円の上に「図A. 青い円」が、正方形の下に「図B. オレンジ色の正方形」が表示されます。ウィンドウを狭めると、SVGはfigureの幅に合わせて縮小されます。キャプションの位置はfigcaptionをfigureの中で先頭または末尾に移して比較し、figureの外には移動させません。

キャプションと画像の代替テキストは異なる役割を持っています

figcaption は、すべての読者に見えるタイトル、説明、または情報源を含めることができます。画像の alt は、画像を見ることができない読者に代替コンテンツを提供します。キャプションがあるからといって重要な画像の alt を自動的に空にしたり、すべての説明を両方の場所で逐語的に重複させたりしないでください。

この例では img ではなく SVG を使用しているため、role と aria-label で形状の説明を提供しています。img で挿入された写真の場合は、必要な寸法とともに src と alt を指定してください。チャートが数値の比較を伝える場合、短いキャプションで十分かどうかを検討し、テキストや表で重要なデータも提供してください。

figure 要素は、自動的にキャプションや図番号を生成せず、そのデフォルトの余白はブラウザや CSS に依存します。番号付けが必要な場合は、文書内の参照と一貫性を保ってください。MDNのfigure要素リファレンスと MDNのfigcaption要素リファレンスは、詳細な要素のルールを説明しています。

HTMLリファレンス