HTML・画像とメディア

画像に説明を添えよう

画像と、その下の「キャプション（説明文）」をひとまとまりにするタグ。figureとfigcaptionで、写真に一言そえよう。

前に <img> で画像を表示しました。今回はもう一歩。写真や図に、「これは何の画像か」という説明（キャプション）を、きちんとセットで添える方法を学びます。図鑑やニュースの写真の下に、小さな文字で説明がついていますよね。あれです。

figureの書き方

<img> を <figure> で囲み、その中に <figcaption> で説明を足します。

<figure>
  <img src="/shima.jpg" alt="雪の上のシマエナガ">
  <figcaption>雪の妖精とよばれるシマエナガ</figcaption>
</figure>

読み解くとこうです。

タグ意味
<figure>図（画像）と説明をまとめる“いれもの”
<img>いつもの画像タグ
<figcaption>figure caption、画像の説明文

多くのブラウザでは、<figcaption> の文字が画像のすぐ下に、キャプションとして表示されます。「画像」と「その説明」が、ひとかたまりだと伝わるのがポイントです。

altとfigcaptionはどう違う？

「あれ、alt も説明じゃなかった？」と思うかもしれません。役割がちがいます。

説明のしかたどんな説明
alt画像が表示できないときの代わりの文字。読み上げソフト向け
<figcaption>みんなに見える、画像に添えるキャプション

alt は「見えない人・出せないとき」のための説明、<figcaption> は「見える人みんな」への説明。両方あってよい、役割ちがいの説明文です。

このレッスンのまとめ

  1. 画像と説明のセットは <figure> でまとめる
  2. 説明文（キャプション）は <figcaption> で書く
  3. alt（見えないとき用）と <figcaption>（みんなに見える）は役割ちがい

alt は見えないとき用、<figcaption> はみんなに見える説明——両方書いておくと親切です。画像に一言そえるだけで、ぐっと親切なページに。 :::

やってみよう：写真に説明をそえる

さっき置いたしまちゃんの写真を、<figure> で囲んで <figcaption> をそえましょう。

<figure>
  <img src="shima.png" alt="しまちゃんの写真">
  <figcaption>はじめまして、しまちゃんです</figcaption>
</figure>
<h1>しまちゃん</h1>

前のレッスンで置いた <img> を、<figure> … </figure> で囲んで <figcaption> を1行足しただけ。下の <h1> はそのまま。

ブラウザ表示。しまちゃんの丸い写真の下に「はじめまして、しまちゃんです」という説明、さらにその下に見出し「しまちゃん」が表示されている
写真のすぐ下に、小さく説明がつきました。