【HTML】figure・figcaptionの使い方｜画像やコードにキャプションを付けてマークアップする

記事の中の画像に「図1：〇〇」のようなキャプション（説明文）を付けたいとき、どうマークアップするのが正しいのでしょうか。<p> で画像の下に文章を置くこともできますが、画像とその説明が「ひとまとまり」であることを正しく伝えるための要素が <figure> と <figcaption> です。この記事では、この2つの要素の役割と基本的な使い方、画像以外への応用、alt 属性との違い、使うときの判断基準までを解説します。HTML を学び始めた方を対象にしています。

figureとfigcaptionの役割

<figure> は、本文から参照される「独立したひとまとまりのコンテンツ」を表す要素です。図版・写真・コード・引用などがこれにあたります。「独立した」というのは、その内容を本文の別の場所に移動しても、文章の流れが壊れないという意味です。

<figcaption> は、その <figure> に対するキャプション（説明・見出し）を表します。<figure> の中に置くことで、「このキャプションはこの図のものだ」という関係がブラウザや支援技術に正しく伝わります。両者をセットで使うことで、見た目だけでなく文書構造としても画像と説明が結びつきます。

基本の書き方

もっとも多い使い方は、画像にキャプションを付けるケースです。<figure> で画像とキャプションを囲み、その中に <img> と <figcaption> を置きます。

<figure>
  <img src="mountain.jpg" alt="雪をかぶった山と青空">
  <figcaption>図1：朝焼けに染まる山頂</figcaption>
</figure>

<figcaption> は <figure> の最初か最後の子要素として置きます。最初に置けば画像の上に、最後に置けば画像の下にキャプションが表示されます。また、1つの <figure> に対して <figcaption> は1つだけです。キャプションが不要なら <figcaption> は省略してもかまいません。

CSSでスタイルを整える

見た目は CSS で自由に整えられます。ひとつ注意したいのは、<figure> にはブラウザの既定スタイルで左右に余白（margin）が付くことです。レイアウトがずれて見えるときは margin: 0 で打ち消すと扱いやすくなります。次の例では、キャプションに左ボーダーを付けて図と区別しています。

<figure class="photo">
  <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='480'%20height='270'%3E%3Crect%20width='480'%20height='270'%20fill='%234a90d9'/%3E%3Crect%20y='200'%20width='480'%20height='70'%20fill='%233a7bc0'/%3E%3Ccircle%20cx='380'%20cy='70'%20r='34'%20fill='%23ffe27a'/%3E%3Cpolygon%20points='120,200%20210,90%20300,200'%20fill='white'/%3E%3C/svg%3E" alt="青空と雪をかぶった山のイラスト" width="480" height="270">
  <figcaption>図1：山の風景（画像はサンプルです）</figcaption>
</figure>

.photo {
  /* figure はブラウザ既定で左右に余白が付くので 0 に揃える */
  margin: 0;
  max-width: 480px;
  font-family: sans-serif;
}
.photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.photo figcaption {
  margin-top: 8px;
  padding-left: 10px;
  border-left: 3px solid #007bff;
  font-size: 13px;
  color: #666;
}

この例では画像の代わりにSVGで描いたサンプルを使っていますが、考え方は <img> でも同じです。figure をひとつの箱として扱い、その中の img と figcaption をまとめてデザインできます。

画像以外にも使える

<figure> は画像専用の要素ではありません。本文から参照される独立したコンテンツであれば、コード・引用・表・動画などにも使えます。たとえばコードリストに「リスト1」のような見出しを付けたいときに便利です。

<!-- コードにキャプションを付ける -->
<figure>
  <pre><code>console.log('Hello');</code></pre>
  <figcaption>リスト1：コンソールへの出力</figcaption>
</figure>

<!-- 引用にキャプション（出典）を付ける -->
<figure>
  <blockquote>
    <p>シンプルさは究極の洗練である。</p>
  </blockquote>
  <figcaption>レオナルド・ダ・ヴィンチ</figcaption>
</figure>

このように、<figure> は「中身＋その説明」という構造を作るための汎用的な箱だと考えるとわかりやすくなります。

alt属性とfigcaptionの違い

画像を扱うと、<img> の alt 属性と <figcaption> のどちらに説明を書けばよいか迷うことがあります。両者は役割が異なります。

たとえば建物の写真なら、alt は「赤レンガ造りの2階建ての駅舎」のように画像の内容そのものを説明し、figcaption は「図2：東京駅（1914年開業）」のように補足情報を添えます。役割が違うので、alt と figcaption にまったく同じ文章を書くのは避けます。同じ内容だと、支援技術を使う人には説明が二重に読み上げられてしまいます。なお <figcaption> があっても alt は省略せず、画像の代替テキストとして適切な内容を入れておきましょう。

figureを使うべきか迷ったとき

本文から参照される独立した内容に使う

<figure> が向くのは、「上の図のように」「リスト1を見てください」のように本文から参照され、かつ別の場所に動かしても文章が成り立つコンテンツです。逆に、文章の流れの中に溶け込んでいて切り離せない画像には、無理に <figure> を使う必要はありません。

レイアウト目的だけでは使わない

キャプションを付ける予定がなく、単に画像を配置したいだけなら <img> だけで十分です。余白を作る、中央寄せにするといったレイアウトのためだけに <figure> で囲むのは、要素本来の意味（独立したコンテンツのまとまり）からは外れます。見た目の調整は <div> や CSS で行いましょう。

figcaptionは必須ではない

<figure> はキャプションがなくても使えます。「独立したまとまり」として示したいが説明文は要らない、という場合は <figcaption> を省略できます。逆に、キャプションを付けたいだけで独立したまとまりではないなら、そもそも <figure> が適切かを一度考えてみるとよいでしょう。

まとめ

<figure> は本文から参照される独立したコンテンツを表し、<figcaption> はその説明やタイトルを表します。画像だけでなくコードや引用にも使え、<figcaption> は最初か最後に1つだけ置きます。alt が「画像の代替テキスト」であるのに対し、figcaption は「全員に見える補足説明」であり役割が違うので、両者を同じ文章にしないことがポイントです。キャプション付きの図版を正しくマークアップしたいときに、ぜひ活用してください。

参考ページ

• <figure>: 図表要素 – HTML | MDN
• <figcaption>: 図表キャプション要素 – HTML | MDN
• <img>: 画像埋め込み要素 – HTML | MDN