サイト制作

figureとfigcaptionで写真に説明を付ける｜画像とキャプションを一組にする

慈愛妃きづな

2026-11-10

この記事には広告・アフィリエイトリンクが含まれます。

figureは写真だけでなく、図表やコード例などを一まとまりにできます。figcaptionはその説明です。画像のすぐ下に文字を置くだけの方法との違いを整理します。

写真と説明を、同じまとまりとして伝える

記事の写真に説明を添えるなら、figureの中へ画像とfigcaptionを入れる方法があります。figureは独立して扱える内容を一まとまりにし、figcaptionがそのキャプションを表します。

画面上で近くに文字を置くことと、構造として関係を示すことは別です。「この写真の説明です」という組み合わせをHTMLにも持たせたいときに役立ちます。

たとえば、figureの中にimgを置き、その後へfigcaptionで「庭で咲いた花」と書けば、画像のあとに説明が続く構造になります。figcaptionはfigureの最初または最後の子要素として配置します。

ただし、figcaptionを付ければ画像のalt属性が不要になるわけではありません。キャプションは見える説明、altは画像の代わりとなるテキストとして、記事の文脈に合う内容を考えます。同じ長文を機械的に繰り返すより、読者へ必要な情報を整理しましょう。

figureの中身は写真に限られません。本文から参照する図表や、独立して示せるコードの断片などにも使えます。一方、ページにある画像すべてを必ずfigureで囲む必要はありません。

私は、タグを増やすことより「何と何が一組なのか」が明確になる使い方を選びたいです。写真の番号や説明を別の場所へ移すときも、どの画像の話かが崩れていないか見直すと、長い記事を読みやすく整えられます。