figureタグ -画像や図表などをグループ化する｜HTML辞典

<figure>タグとは？

<figure>タグは、HTML文書内で画像や図表、コードスニペットなどをグループ化するためのタグです。

通常、<figcaption>（キャプション）と一緒に使用し、図の説明を加えることが推奨されます。

基本情報

コンテンツモデル

フローコンテンツ（Flow Content）、パルパブルコンテンツ（Palpable Content）。

閉じタグの有無

<figure> は開始タグ（<figure>）と閉じタグ（</figure>）の両方が必要です。

基本的な記述方法

<figure>
    <img src="example.jpg" alt="サンプル画像">
    <figcaption>この画像はサンプルです。</figcaption>
</figure>

使用できる主な属性

<figure>タグには特別な属性はありませんが、一般的なHTML要素の属性を使用できます。

属性名	説明	例
class	CSSのクラスを適用	<figure class="image-box">...</figure>
id	一意の識別子を設定	<figure id="sample-figure">...</figure>
style	インラインスタイルを適用	<figure style="border: 1px solid #ccc;">...</figure>

CSSを使ったデザイン変更

画像やキャプションを美しく表示したい場合は、CSSを活用できます。

figure {
    text-align: center;
    margin: 20px 0;
}

figcaption {
    font-size: 14px;
    color: #666;
}

適切な使用例

✅ <figure> を使って画像とキャプションを組み合わせる

<figure>
    <img src="sunset.jpg" alt="夕日の写真">
    <figcaption>美しい夕焼けの風景</figcaption>
</figure>

✅ <figure> を使って図やイラストを適切にマークアップ

<figure>
    <img src="diagram.png" alt="データの流れを示す図">
    <figcaption>データフローの概要図</figcaption>
</figure>

✅ <figure> を使ってコードスニペットをグループ化

<figure>
    <pre><code>
function hello() {
    console.log("Hello, world!");
}
    </code></pre>
    <figcaption>シンプルなJavaScriptの関数</figcaption>
</figure>

適切でない使用例（誤った使い方）

❌ <figcaption> を <figure> の外に置くのはNG

<!-- NG: <figcaption> を <figure> の外に配置 -->
<figure>
    <img src="image.jpg" alt="サンプル">
</figure>
<figcaption>サンプル画像の説明</figcaption>

✅ 正しい書き方（<figcaption> を <figure> 内に配置）

<figure>
    <img src="image.jpg" alt="サンプル">
    <figcaption>サンプル画像の説明</figcaption>
</figure>

❌ レイアウト目的で <figure> を使用するのはNG

<!-- NG: 画像を並べる目的で <figure> を使用 -->
<figure>
    <img src="icon1.png" alt="アイコン1">
</figure>
<figure>
    <img src="icon2.png" alt="アイコン2">
</figure>

✅ 正しい書き方（<div> でグループ化）

<div class="icon-group">
    <img src="icon1.png" alt="アイコン1">
    <img src="icon2.png" alt="アイコン2">
</div>

<figure>タグと他のタグの違い

タグ	役割	特徴	適切な用途
<figure>	画像や図表のグループ化	<figcaption> で説明を追加可能	写真、図、コードブロック
<img>	画像の表示	単体で使用可能	単独の画像表示
<div>	汎用的なグループ化	意味を持たない	レイアウト管理
<picture>	複数の画像ソースを指定	<source> を指定可能	レスポンシブ画像対応

使用上の注意点

✅ <figure> は画像や図表のグループ化専用に使用する

• 単なる画像の表示には <img> を使い、図表としてグループ化する場合に <figure> を使用するのが適切。

✅ <figcaption> をセットで使用する

• 説明が不要な場合は <figcaption> なしでも問題ないが、図表の意味を明確にするために 可能な限り記述するのが推奨される。

関連タグ

• <img> – 画像の表示
• <figcaption> – 図表の説明文
• <picture> – 複数の画像ソースを指定
• <div> – 汎用的なグループ化

まとめ

<figure>タグは、HTML文書内で画像や図表、コードスニペットなどをグループ化するためのタグです。 通常は<figcaption>と一緒に使用し、単なる画像の表示には使わず、意味を持つ図表として活用するのが推奨されます。