figcaptionタグの基本的な紹介
figcaptionタグとは何か
figcaptionタグは、HTML5で導入された新しいタグで、主に画像や図表などのコンテンツの説明文を書くときに使います。
<figcaption> は HTML の要素で、親の <figure> 要素内にあるその他のコンテンツを説明するキャプションや凡例を表します。
参考：mdn web docs
なぜfigcaptionタグを使うのか？
figcaptionタグは具体的にどんなときに使うのか？
画像のキャプション付き表示：画像に説明文（キャプション）を付けて表示させる。
グラフや図表の表示：データの視覚的な表現を行う際に、キャプションを含めて表示させるとき。
コードスニペットの表示：プログラミングのコードを表示し、それについて説明を付ける。
ビデオやメディアの表示：ビデオクリップやオーディオクリップを表示し、説明を付ける。
figcaptionタグの使い方
figcaptionタグは、必ずfigureタグの中に記述します。figureタグは、図や表などのコンテンツを囲むためのタグです。
<figure>
<img src="image.jpg" alt="説明文">
<figcaption>これはサンプル画像です。</figcaption>
</figure>figcaptionタグのコード解説
- <figure>: 図や表などのコンテンツを囲むタグ
- <img>: 画像を表示するタグ
- <figcaption>: 画像の説明文を記述するタグ
figcaptionタグの配置
figcaptionタグは、figureタグの最初または最後に配置することができます。
<figure>
<figcaption>これはサンプル画像です。</figcaption>
<img src="image.jpg" alt="説明文">
</figure>
<figure>
<img src="image.jpg" alt="説明文">
<figcaption>これはサンプル画像です。</figcaption>
</figure>どちらの配置方法でも問題ありませんが、一般的には、説明文が図や表の上にある方が自然な場合が多いです。
figcaptionタグの応用編
figcaptionタグは、さまざまな要素と組み合わせて使うことができます。
<figure>
<img src="graph.png" alt="売上推移グラフ">
<figcaption>
<h2>2023年売上推移</h2>
<p>2023年の売上は前年比120%と大幅に増加しました。</p>
</figcaption>
</figure>このように、figcaptionタグの中に見出しや段落などを含めることで、より詳細な説明を記述することができます。
figcaptionタグのまとめ
figcaptionタグは、画像や図表の説明文を書く際に非常に便利なタグです。アクセシビリティやSEOの観点からも、積極的に活用することをおすすめします。
これらの知識を活用して、figcaptionタグを効果的に使いこなし、ウェブサイトのコンテンツをより魅力的で理解しやすいものにしていきましょう。