figcaptionタグ -画像や図表に対するキャプション説明文を追加する｜HTML辞典

<figcaption>タグとは？

<figcaption>タグは、<figure> 内の画像や図表、コードブロックに対するキャプション（説明文）を追加するためのタグ です。
単体で使用せず、必ず <figure> 内に配置する必要があります。

基本情報

コンテンツモデル

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

閉じタグの有無

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

基本的な記述方法

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

使用できる主な属性

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

属性名	説明	例
class	CSSのクラスを適用	<figcaption class="caption">...</figcaption>
id	一意の識別子を設定	<figcaption id="image-caption">...</figcaption>
style	インラインスタイルを適用	<figcaption style="font-style: italic;">...</figcaption>

CSSを使ったデザイン変更

キャプションを強調したい場合は、CSSを活用できます。

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

適切な使用例

✅ <figcaption> を使って画像の説明を追加

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

✅ <figcaption> を使ってコードブロックの説明を追加

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

✅ <figcaption> を使ってイラストのキャプションを表示

<figure>
    <img src="map.png" alt="地域のマップ">
    <figcaption>このマップは東京エリアの詳細を示しています。</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>

❌ <figcaption> を <figure> なしで使用するのはNG

<!-- NG: <figure> なしで <figcaption> を使用 -->
<figcaption>この図はデータ分析の結果を示しています。</figcaption>

✅ 正しい書き方（<figure> とセットで使用）

<figure>
    <img src="data-chart.png" alt="データ分析のグラフ">
    <figcaption>この図はデータ分析の結果を示しています。</figcaption>
</figure>

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

タグ	役割	特徴	適切な用途
<figcaption>	画像や図表の説明を追加	<figure> 内に配置	画像、グラフ、コードブロックの説明
<caption>	テーブルのキャプションを追加	<table> 内に配置	テーブルのタイトルや説明
<p>	一般的な段落	単独で使用可能	文章や説明文の記述
<div>	汎用的なグループ化	意味を持たない	レイアウト管理

使用上の注意点

✅ <figcaption> は <figure> の中に配置する

• <figure> なしで <figcaption> を使用しない。

✅ <caption> と混同しない

• <caption> は 表（<table>）の説明 に使用し、画像や図表には <figcaption> を使う。

関連タグ

• <figure> – 画像や図表のグループ化
• <img> – 画像の表示
• <table> – 表の作成
• <caption> – テーブルの説明文

まとめ

<figcaption>タグは、HTML文書内で<figure>内の画像や図表、コードブロックに対するキャプションを追加するためのタグです。 <figure>とセットで使用する必要があり、単独では使用しないことが推奨されます。