JavaScript | HTML / CSS 連携：テキスト・リンク・画像－ figcaptionタグ

JavaScript

2026.06.01

figcaption 要素は「図のタイトル・説明を書くためのラベル」
alt と figcaption の違いをしっかり分けて考える
1. alt は「画像そのものの説明」、figcaption は「図としての意味」
figcaption の位置と書き方のパターン
1. 上に置くか、下に置くか
画像以外にも使える：コード例・表・イラストなど
1. コード例＋説明を figcaption でラベル付けする
2. グラフやスクリーンショットにも相性がいい
JavaScript と figcaption：コンポーネントとして扱う
1. ギャラリーの 1 アイテムとしての figure＋figcaption
figcaption を使うか迷ったときの判断基準
1. 「この図に“タイトルや説明”を付けたいか？」
初心者として「figcaption タグ」で絶対に掴んでほしいこと

figcaption 要素は「図のタイトル・説明を書くためのラベル」

<figcaption> は、
「この図は何なのか？」を説明するための“キャプション専用タグ” です。

単体では使わず、必ず <figure> の中で使います。

<figure>
  <img src="coffee.jpg" alt="カップに注がれたホットコーヒー">
  <figcaption>朝に飲むホットコーヒー</figcaption>
</figure>

ここで <figure> が「図の箱」、
<figcaption> が「その図のタイトル・説明」という関係になっています。

「画像の下に小さく書いてある説明文」
「図1. 〜」みたいなやつを、HTML でちゃんと意味付きで表現するのが <figcaption> です。

alt と figcaption の違いをしっかり分けて考える

alt は「画像そのものの説明」、figcaption は「図としての意味」

ここが一番大事なポイントです。

alt（img の属性）
画像が見えない人・環境のために、
「この画像には何が写っているか」を言葉で説明するもの。

figcaption
図全体（画像＋文脈）について、
「この図は何を示しているのか」「何を伝えたいのか」を説明するもの。

例で比べてみます。

<figure>
  <img
    src="sales-graph.png"
    alt="2023 年の売上推移を示す折れ線グラフ"
  >
  <figcaption>図1. 夏のキャンペーン期間中に売上が大きく伸びていることが分かる。</figcaption>
</figure>

alt は「グラフの中身そのもの」を説明しています。
figcaption は「このグラフから読み取れるポイント」を説明しています。

つまり、

画像の“中身” → alt
図の“意味・要約” → figcaption

という分担です。

figcaption の位置と書き方のパターン

上に置くか、下に置くか

<figcaption> は <figure> の最初か最後に置きます。

上に置くパターン（タイトルっぽい）：

<figure>
  <figcaption>朝のコーヒーとノート PC</figcaption>
  <img src="coffee-laptop.jpg" alt="コーヒーの横にノート PC が置かれている写真">
</figure>

下に置くパターン（キャプションっぽい）：

<figure>
  <img src="coffee-laptop.jpg" alt="コーヒーの横にノート PC が置かれている写真">
  <figcaption>朝のコーヒーとノート PC</figcaption>
</figure>

どちらも正解です。
「図の上にタイトルを出したいか」「下に説明を出したいか」で決めればOKです。

CSS でスタイルを整えると、より“図とキャプション”らしくなります。

figure {
  margin: 1.5rem 0;
  text-align: center;
}

figcaption {
  font-size: 0.9rem;
  color: #666;
  margin-top: 0.5rem;
}

画像以外にも使える：コード例・表・イラストなど

コード例＋説明を figcaption でラベル付けする

<figure>
  <figcaption>JavaScript でボタンにクリックイベントを付ける例</figcaption>
  <pre><code>
const button = document.querySelector("#myButton");
button.addEventListener("click", () => {
  alert("クリックされました");
});
  </code></pre>
</figure>

ここでは、
「コードブロックそのもの」が図の本体で、
<figcaption> が「このコードは何の例か」を説明しています。

グラフやスクリーンショットにも相性がいい

<figure>
  <img src="dashboard.png" alt="管理画面のダッシュボードのスクリーンショット">
  <figcaption>図2. 管理画面のダッシュボード。売上とアクセス数を一目で確認できる。</figcaption>
</figure>

スクリーンショットは、
「何が写っているか」だけでなく
「何を見せたいのか」が重要なので、
figcaption でそこを補ってあげると親切です。

JavaScript と figcaption：コンポーネントとして扱う

ギャラリーの 1 アイテムとしての figure＋figcaption

HTML 側にコンテナだけ用意しておいて、
JS で <figure> と <figcaption> を生成するパターンもよくあります。

<div id="gallery"></div>

const data = [
  { src: "photo1.jpg", alt: "ギャラリーの写真 1", caption: "写真 1：海辺の夕焼け" },
  { src: "photo2.jpg", alt: "ギャラリーの写真 2", caption: "写真 2：森の小道" },
];

const container = document.querySelector("#gallery");

data.forEach((item) => {
  const figure = document.createElement("figure");
  const img = document.createElement("img");
  const cap = document.createElement("figcaption");

  img.src = item.src;
  img.alt = item.alt;
  cap.textContent = item.caption;

  figure.appendChild(img);
  figure.appendChild(cap);
  container.appendChild(figure);
});

const data = [
  { src: "photo1.jpg", alt: "ギャラリーの写真 1", caption: "写真 1：海辺の夕焼け" },
  { src: "photo2.jpg", alt: "ギャラリーの写真 2", caption: "写真 2：森の小道" },
];

const container = document.querySelector("#gallery");

data.forEach((item) => {
  const figure = document.createElement("figure");
  const img = document.createElement("img");
  const cap = document.createElement("figcaption");

  img.src = item.src;
  img.alt = item.alt;
  cap.textContent = item.caption;

  figure.appendChild(img);
  figure.appendChild(cap);
  container.appendChild(figure);
});