JP

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> は「見える人みんな」への説明。両方あってよい、役割ちがいの説明文です。

<figure> で囲むメリットはもうひとつあります。画像と説明文をただ並べて置くのと、<figure> でひとまとまりだと宣言するのとでは、読み上げソフトの伝わり方が変わります。ただ並んでいるだけだと「画像」「別の文章」と別々に読まれますが、<figure> の中にあれば「この説明は、この画像に対応するもの」と伝わります。見た目は同じでも、意味のつながりが強くなるのです。

画像を複数まとめることもできる

<figure> の中に入れられる画像は1枚とは限りません。見比べてほしい写真が2枚あるなら、両方を1つの <figure> にまとめ、<figcaption> はひとつだけ添えれば十分です。

<figure>
  <img src="/shima-summer.jpg" alt="夏毛のシマエナガ">
  <img src="/shima-winter.jpg" alt="冬毛のシマエナガ">
  <figcaption>夏毛（左）と冬毛（右）のシマエナガ</figcaption>
</figure>
2枚の画像が並んでも、キャプションは全体に1つだけです。

「1枚ずつfigureを作る」のではなく、「関連する画像をまとめて、説明はまとめて1つ」。これもfigureとfigcaptionがセットだからこそできる書き方です。

このレッスンのまとめ

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

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

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

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

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

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

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

よくある質問

figcaptionは省略してfigureだけ使ってもいい？
書き方としては可能ですが、それなら`<figure>`を使う意味がありません。説明文をセットにしないなら、これまでどおり`<img>`だけで十分です。
1つのfigureに画像を2枚入れてもいい？
入れられます。並べて見せたい写真をまとめて`<figure>`に入れ、`<figcaption>`をひとつだけ添えれば、2枚まとめての説明になります。
figcaptionはimgの上に書いてもいい？
書けます。上下どちらに置くかは意味の違いではなく見た目の好みです。多くのサイトでは画像の下に置きますが、上でも表示は崩れません。