figcaptionタグの使い方と図表・画像のキャプションを追加する方法をわかりやすく解説

figcaptionの概要

figcaptionタグの基本的な使い方

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

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

実行例：

figcaptionタグの配置位置

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

<figure>
    <figcaption>上に配置されたキャプション</figcaption>
    <img src="example.jpg" alt="風景写真">
</figure>

実行例：

注意事項

• figcaptionタグは必ずfigureタグ内に記述する必要がある。
• 画像だけでなく、動画、図表、イラストなどにも適用可能。
• デフォルトの表示スタイルはブラウザによって異なるため、必要に応じてCSSで調整する。
• スクリーンリーダーはfigcaptionの内容を適切に読み上げるため、アクセシビリティ向上に役立つ。

よくある質問

Q: figcaptionタグの位置はどこに書くべきですか？

A: figureタグの最初または最後に配置できますが、どちらの位置でも意味的に問題はありません。

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

A: 通常、中央揃えで表示されますが、CSSで変更できます。

Q: figcaptionタグを使うメリットは？

A: 画像や動画に説明を付けることで、視覚的にも意味的にも内容を明確にできます。

Q: CSSでfigcaptionのデザインを変更できますか？

A: はい、例えば以下のCSSを適用すると、文字色を変更できます。

figcaption {
    font-style: italic;
    color: gray;
    text-align: center;
}

まとめ

• figcaptionタグは、figureタグ内の画像や動画にキャプションを追加するために使用する。
• figureタグの最初または最後に配置できる。
• スクリーンリーダーに対応しており、アクセシビリティの向上に役立つ。
• デフォルトでは中央揃えで表示されるが、CSSでカスタマイズ可能。
• 画像や動画以外にも、図表やイラストの説明としても使用できる。