HTMLのfigureタグとは？imgタグとの違いやCSSの注意点を解説

HTMLで画像や図表を扱うときに、「figureタグ」や「figcaptionタグ」を見かけることがあります。しかし、「figureタグは何のために使うの？」「imgタグだけではだめなの？」「figureで囲むとSEOやアクセシビリティに違いはあるの？」「なぜ余白が勝手に付くの？」と疑問に感じる方も多いのではないでしょうか。figureタグは、画像・図表・コード例など、本文から参照されるまとまりを表すためのHTMLタグです。

この記事では、HTMLのfigureタグの意味や基本的な使い方、imgタグ単体との違い、figcaptionタグとの組み合わせ、CSSで余白をリセットする実務ポイント、SEOやアクセシビリティで意識したい点を初心者向けにわかりやすく解説します。サンプルコード付きで紹介するので、HTMLを学び始めたばかりの方もぜひ参考にしてください。

HTMLのfigureタグとは？

figureタグは、画像や図表などの独立したまとまりを表すためのHTMLタグです。本文から参照される画像、図解、表、コード例などをひとまとまりとして扱うときに使います。

figureタグの役割

figureタグは、画像や図表を本文とは少し独立したコンテンツとしてまとめる役割があります。

<figure>
  <img src="html-structure.png" alt="HTMLの基本構造">
  <figcaption>HTML文書の基本構造</figcaption>
</figure>

上記のように、figureタグの中にimgタグとfigcaptionタグを入れることがあります。figureタグを使うことで、画像と説明文がセットであることをHTML上でも示しやすくなります。

imgタグ単体との違い

画像を表示するだけであれば、imgタグ単体でも問題ありません。

<img src="sample.jpg" alt="サンプル画像">

一方で、画像が本文から参照される図表や資料であり、キャプションとセットで意味を持つ場合はfigureタグで囲むと構造が分かりやすくなります。

<figure>
  <img src="sample.jpg" alt="HTMLの基本構造を示す図">
  <figcaption>HTML文書の基本構造</figcaption>
</figure>

imgタグ単体は「画像を表示するタグ」、figureタグは「画像や図表を本文から参照される独立したまとまりとして示すタグ」です。figcaptionを組み合わせることで、画像とキャプションの関係も明確になります。

figureタグは画像専用ではない

figureタグは画像だけでなく、図表、イラスト、コード例、引用に近いまとまりなどにも使えます。

<figure>
  <pre><code><p>こんにちは</p></code></pre>
  <figcaption>pタグを使ったサンプルコード</figcaption>
</figure>

本文から参照される独立した補足コンテンツであれば、画像以外でもfigureタグを使える場合があります。

HTMLでfigureタグを使う方法

figureタグは、画像や図表などをひとまとまりにしたいときに使います。キャプションが必要な場合は、figcaptionタグを組み合わせると分かりやすくなります。

基本的な書き方

figureタグの基本的な書き方は、「<figure>画像や図表</figure>」です。

<figure>
  <img src="sample.jpg" alt="サンプル画像">
</figure>

この例では、画像をfigureタグで囲んでいます。画像単体でも表示できますが、本文から独立した図や資料として扱いたい場合にfigureタグを使うと意味が伝わりやすくなります。

figcaptionで画像説明を付ける

画像にキャプションを付けたい場合は、figureタグ内にfigcaptionタグを書きます。

<figure>
  <img src="html-code.png" alt="HTMLコードの例">
  <figcaption>HTMLコードのサンプル</figcaption>
</figure>

figcaptionタグを使うと、画像や図表の説明文をHTML上でも関連付けやすくなります。

figcaptionは最初か最後に書く

figcaptionタグは、figureタグの中で最初または最後に配置します。

<figure>
  <figcaption>HTMLの基本構造</figcaption>
  <img src="structure.png" alt="HTMLの基本構造図">
</figure>

<figure>
  <img src="structure.png" alt="HTMLの基本構造図">
  <figcaption>HTMLの基本構造</figcaption>
</figure>

どちらの書き方も使われますが、一般的には画像の下にキャプションを置くデザインが多くあります。

figureタグとSEO・アクセシビリティの関係

figureタグは、使うだけで検索順位が上がるタグではありません。ただし、画像や図表の意味をHTML構造として分かりやすく示せるため、読者にも検索エンジンにも理解しやすいページ作りにつながります。

画像が本文から独立した図表であることを伝えやすい

figureタグを使うと、その画像や図表が本文から参照される独立したまとまりであることを示しやすくなります。

<p>次の図は、HTML文書の基本構造を示したものです。</p>

<figure>
  <img src="html-structure.png" alt="HTML文書がheadタグとbodyタグで構成される図">
  <figcaption>HTML文書の基本構造</figcaption>
</figure>

figureタグは、画像を単に表示するだけでなく、その画像が本文中で意味を持つ図表・注釈・資料であることを構造的に伝えるために役立ちます。

figcaptionがfigureの説明として関連付く

figcaptionタグを使うと、figureタグ内の画像や図表にキャプションを付けられます。

<figure>
  <img src="graph.png" alt="学習時間が増えるほど理解度が上がることを示す折れ線グラフ">
  <figcaption>学習時間と理解度の関係</figcaption>
</figure>

MDN Web Docsでも、figcaptionは親となるfigure要素のキャプションとして扱われると説明されています。画像とキャプションをセットで扱いたい場合は、figureとfigcaptionの組み合わせが自然です。

alt属性とfigcaptionは両方必要な場合がある

figureタグで画像を囲んでも、imgタグのalt属性が不要になるわけではありません。

<figure>
  <img src="layout.png" alt="ヘッダー、メイン、フッターで構成されたWebページの図">
  <figcaption>Webページの基本レイアウト</figcaption>
</figure>

alt属性は画像を見られない人に画像内容を伝えるためのもの、figcaptionは画面上にも表示されるキャプションです。役割が異なるため、画像の目的に合わせて両方を適切に設定しましょう。

figcaptionを書いたからalt属性は不要、という考え方は避けましょう。画像を見られない場合でも必要な情報が伝わるかを基準に判断することが大切です。

figureタグの活用例

figureタグは、画像だけでなく、図表やコード例などにも使えます。ここでは、実際のWeb制作や記事作成で使いやすいパターンを見ていきましょう。

画像とキャプションをまとめる

記事内の画像に説明文を付けたい場合、figureタグとfigcaptionタグを組み合わせます。

<figure>
  <img src="coding.jpg" alt="ノートパソコンでHTMLを書く様子">
  <figcaption>HTMLを学習している様子</figcaption>
</figure>

画像とキャプションをセットにすると、読者が画像の意味を理解しやすくなります。

図表を説明する

図解やグラフを掲載する場合も、figureタグが役立ちます。

<figure>
  <img src="flow.png" alt="HTMLからCSS、JavaScriptへ学習を進める流れ">
  <figcaption>Web制作学習の基本的な流れ</figcaption>
</figure>

図表の内容が本文理解に重要な場合は、画像だけでなく本文でも要点を説明しましょう。

コード例にキャプションを付ける

figureタグはコード例にも使えます。

<figure>
  <pre><code>&lt;h1&gt;見出し&lt;/h1&gt;</code></pre>
  <figcaption>h1タグを使った見出しの例</figcaption>
</figure>

コード例にキャプションを付けると、何を示しているサンプルなのか分かりやすくなります。

figureタグをCSSで整える方法

figureタグはHTMLの意味を表すタグですが、ブラウザによっては標準スタイルとして余白が付いていることがあります。実務では、このデフォルトスタイルを理解したうえでCSSを調整することが大切です。

figureタグには標準のmargin（余白）が付くことがある

figureタグを使ったときに、画像の左右に思ったより余白ができることがあります。これは、ブラウザの標準スタイルでfigureにmargin（余白）が設定されていることが多いためです。

<figure>
  <img src="sample.jpg" alt="サンプル画像">
  <figcaption>サンプル画像</figcaption>
</figure>

初心者の方は「imgタグのサイズは合っているのに、なぜか画像の左右に余白がある」と感じることがあります。その原因がfigureタグのデフォルトmarginであるケースは珍しくありません。

実務ではmarginをリセットして使うことが多い

Web制作の現場では、レイアウトを意図通りに整えるために、figureのmarginをリセットしてから使うことがあります。

figure {
  margin: 0;
}

figureタグにはブラウザ側でデフォルトのmarginが設定されていることが多いため、実務では figure { margin: 0; } のようにCSSでリセットして使うのが一般的です。

そのうえで、必要な余白はclassを付けて調整すると管理しやすくなります。

.article-figure {
  margin: 32px 0;
}

.article-figure img {
  max-width: 100%;
  height: auto;
}

.article-figure figcaption {
  margin-top: 8px;
  font-size: 14px;
  color: #666;
}

デフォルトの余白をリセットし、必要な余白をCSSで明示的に指定すると、デザインの崩れを防ぎやすくなります。

画像の幅もCSSで調整する

figureタグ内の画像が親要素からはみ出さないように、imgタグにmax-widthを指定することもよくあります。

figure img {
  max-width: 100%;
  height: auto;
}

この指定を入れると、画像が親要素の幅に合わせて縮小されやすくなります。スマートフォン表示でも画像がはみ出しにくくなるため、レスポンシブ対応でよく使われます。

figureタグを書く際の注意点

figureタグは便利ですが、使いどころを間違えるとHTMLの意味が分かりにくくなります。画像を表示するたびに必ず使うタグではないため、目的に合わせて判断しましょう。

すべての画像にfigureタグが必要なわけではない

画像を表示するだけなら、imgタグだけでも問題ありません。

<img src="logo.png" alt="サンプルサイト">

ロゴや装飾画像など、キャプションや独立した説明が不要な画像までfigureタグで囲む必要はありません。

imgタグ単体で十分なケースもある

ロゴ、アイコン、装飾画像、本文の一部として自然に差し込む小さな画像などは、imgタグ単体で十分な場合があります。

<img src="logo.png" alt="サンプルサイト">

一方で、本文中で「次の図を見てください」と説明されるような図表、キャプション付きの画像、本文から独立して参照できる資料はfigureタグの候補です。

figureタグを使うかどうかは、「その画像が本文から参照される独立したまとまりか」で判断すると迷いにくくなります。

figcaptionを長くしすぎない

figcaptionは、画像や図表のキャプションとして使うタグです。長すぎる文章を書くと、本文との役割が分かりにくくなります。

figcaptionには、画像や図表の内容を短く補足する説明を書くのがおすすめです。詳しい説明が必要な場合は、本文で補足しましょう。

alt属性も忘れずに設定する

figureタグで画像を囲んでも、imgタグのalt属性が不要になるわけではありません。

<figure>
  <img src="html.png" alt="HTMLのコードが表示された画面">
  <figcaption>HTMLコードの例</figcaption>
</figure>

alt属性とfigcaptionは役割が異なるため、画像の目的に合わせて両方を適切に設定しましょう。

公式ドキュメントも確認する

figureタグやfigcaptionタグ、画像の代替テキストについて詳しく確認したい場合は、公式ドキュメントも参考になります。

• MDN Web Docs figure要素：figureタグの意味や使用例を確認できます。
• MDN Web Docs figcaption要素：figcaptionタグの役割を確認できます。
• W3C WAI alt Decision Tree：画像のaltをどう設定するか判断するときに役立ちます。

より詳細なWeb標準の仕様やアクセシビリティの判断は、MDNやW3Cなどの公式ドキュメントもあわせて確認すると理解が深まります。

まとめ

本記事では、HTMLのfigureタグについて解説しました。

figureタグは、画像や図表、コード例などの独立したまとまりを表すためのHTMLタグです。figcaptionタグと組み合わせることで、画像や図表にキャプションを付けられます。

figureタグは画像専用ではありませんが、すべての画像に必要なわけでもありません。本文から参照される図や資料として扱いたい場合、キャプションを付けて意味を補足したい場合に使うとよいでしょう。

figureタグを使う際は、画像や図表のまとまりを明確にすること、figcaptionを短く分かりやすく書くこと、imgタグのalt属性も忘れずに設定することが大切です。また、ブラウザの標準スタイルでfigureにmarginが付くことがあるため、実務では必要に応じてCSSで余白をリセットしてからデザインを整えましょう。