figureタグの使い方と画像・図表を論理的にグループ化する方法をわかりやすく解説

figureの概要

figureタグの基本的な使い方

以下の例では、figureタグを使って画像とキャプションをグループ化しています。

<figure>
    <img src="example.jpg" alt="風景写真">
    <figcaption>美しい山の風景</figcaption>
</figure>

実行例：

figureタグの応用：複数の画像をグループ化

以下の例では、複数の画像と共通のキャプションをfigureタグでグループ化しています。

<figure>
    <img src="image1.jpg" alt="風景写真1">
    <img src="image2.jpg" alt="風景写真2">
    <figcaption>画像コレクション</figcaption>
</figure>

実行例：

注意事項

• figureタグの中には画像や動画だけでなく、グラフやイラストなども含めることができる。
• キャプションを付ける場合は、figcaptionタグを使用するのが推奨される。
• デフォルトではブロック要素として扱われるため、レイアウトを整える場合はCSSで調整する。
• figureタグの配置によっては、キャプションが意図しない位置に表示されることがあるため、スタイルの指定が必要になる場合がある。

よくある質問

Q: figureタグとdivタグの違いは？

A: figureタグは画像や動画、図表などを論理的にグループ化するためのタグであり、意味を持つ。一方、divタグは汎用のコンテナであり、特定の意味を持たない。

Q: figureタグは必ずfigcaptionタグとセットで使うべきですか？

A: いいえ、figcaptionは任意ですが、説明を付ける場合は使用するのが推奨されます。

Q: figureタグのデフォルトのスタイルは？

A: デフォルトではブロック要素であり、figcaptionタグは中央揃えになることが多い。

Q: CSSでfigureタグのスタイルを変更できますか？

A: はい、例えば以下のCSSで背景色を変更できます。

figure {
    background-color: #f0f0f0;
    padding: 10px;
    text-align: center;
    border: 1px solid #ccc;
}

まとめ

• figureタグは、画像や動画、図表などを論理的にグループ化するために使用する。
• キャプションを追加する場合は、figcaptionタグと併用する。
• 画像だけでなく、動画、イラスト、グラフなども含めることができる。
• デフォルトではブロック要素として扱われ、レイアウトはCSSで調整可能。
• アクセシビリティの向上に役立ち、スクリーンリーダーでも適切に認識される。