<figure> / <figcaption>

対応:		HTML5（2014）

『figure』は画像・図版・コードなどの独立したコンテンツをまとめる要素で、『figcaption』はそのキャプション（説明文）を記述するために使います。

構文

<figure>
  <img src="photo.jpg" alt="富士山の写真">
  <figcaption>富士山（標高3,776m）</figcaption>
</figure>

タグ一覧

タグ	概要
figure	画像・図・コード・引用などを本文から独立したコンテンツとしてグループ化します。
figcaption	『figure』内のコンテンツに対するキャプションを記述します。『figure』の最初か最後の子要素として配置します。

サンプルコード

sample_figure_figcaption.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>figureサンプル</title>
</head>
<body style="margin: 20px;">

  <!-- 画像にキャプションを付ける -->
  <figure>
    <img src="mountain.jpg" alt="山の写真" width="300">
    <figcaption>図1: 山の風景（撮影: 2024年）</figcaption>
  </figure>

  <!-- コードブロックにキャプションを付ける（figcaptionを先頭に） -->
  <figure>
    <figcaption>リスト1: JavaScriptのHello World</figcaption>
    <pre><code>console.log("Hello, World!");</code></pre>
  </figure>

  <!-- 引用文にキャプションを付ける -->
  <figure>
    <blockquote>
      <p>全ての始まりは好奇心だ。</p>
    </blockquote>
    <figcaption>— 岡部倫太郎（Steins;Gate）</figcaption>
  </figure>

  <!-- SVGにキャプションを付ける -->
  <figure>
    <svg width="120" height="60" viewBox="0 0 120 60">
      <rect width="120" height="60" rx="8" fill="#4488ff"/>
      <text x="60" y="36" text-anchor="middle" fill="white" font-size="16">SVG</text>
    </svg>
    <figcaption>図2: SVGで描いた青いボックス</figcaption>
  </figure>

</body>
</html>

実行結果

画像とキャプションが並んで表示されます。コードブロックにも同様にキャプションが付きます。

サンプルページはこちら

概要

『figure』要素は、本文の流れに関連しつつも、本文から切り離して別の場所に移動しても意味が成立する独立したコンテンツに使用します。画像だけでなく、図表・コードブロック・引用文なども対象になります。

『figcaption』は『figure』の中に1つだけ配置でき、最初または最後の子要素として記述します。『figcaption』を省略しても文法的には問題ありませんが、視覚的に意味のある画像にはキャプションを付けるとアクセシビリティが向上します。

単純に画像を表示するだけなら『img』要素だけで問題ありません。図版として意味を持たせたいときや、キャプションが必要なときに『figure』と組み合わせて使いましょう。

対応ブラウザ

デスクトップ

Chrome

8 以降 ○

7 以前 ×

Firefox

4 以降 ○

3 以前 ×

Safari

5.1 以降 ○

4.1 以前 ×

Edge

12 以降 ○

11 ○

10 ○

9 ○

8 ×

7 ×

6 ×

Opera

11 以降 ○

10 以前 ×

モバイル

iOS Safari

5 以降 ○

4 以前 ×

Android Browser

4.4 以降 ○

4 以前 ×

Chrome Android

様々なコンテンツへの適用

『<figure>』は画像だけでなく、様々な種類の独立したコンテンツに使えます。

<!-- コードブロックにキャプションを付ける -->
<figure>
  <figcaption>JavaScriptでHello Worldを出力する例</figcaption>
  <pre><code>console.log("Hello, World!");</code></pre>
</figure>

<!-- 引用にキャプション（出典）を付ける -->
<figure>
  <blockquote>
    <p>プログラミングとは、未来の自分への手紙を書くことだ。</p>
  </blockquote>
  <figcaption>— ある著名なエンジニアの言葉</figcaption>
</figure>

<!-- グラフ・チャートにキャプションを付ける -->
<figure>
  <img src="monthly-sales-chart.png" alt="2024年1月〜12月の月別売上グラフ。8月が最高売上">
  <figcaption>図1: 2024年度 月別売上推移（単位：万円）</figcaption>
</figure>

CSSでのスタイリング

『<figure>』と『<figcaption>』のデフォルトスタイルをCSSでカスタマイズする例です。

/* figureのデフォルトマージンをリセットして整形 */
figure {
  margin: 1.5em 0;
  padding: 0;
  text-align: center; /* 画像を中央揃え */
}

figure img {
  max-width: 100%; /* レスポンシブ対応 */
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 4px;
}

/* figcaptionのスタイリング */
figcaption {
  font-size: 0.875em;
  color: #666;
  margin-top: 0.5em;
  font-style: italic; /* 斜体でキャプションであることを示す */
}

/* コードブロックのfigureスタイリング */
figure.code-block {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  text-align: left;
}

figure.code-block figcaption {
  background-color: #e8e8e8;
  padding: 0.4em 0.8em;
  font-style: normal;
  font-weight: bold;
  font-size: 0.8em;
  border-bottom: 1px solid #ddd;
  color: #444;
}

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

HTML辞典