Widely available すべての主要ブラウザで対応済み。安心して使用可能。

<figure> and <figcaption>

<figure> は HTML の要素で、図表などの自己完結型のコンテンツを表し、任意で <figcaption> 要素を使用して表されるキャプションを付けることができます。図、すなわちキャプションとその中身は一単位として参照されます。

テキスト・構造

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
<figure>
8
12
4
5.1
18
5
<figcaption>

は HTML の要素で、親の figure 要素内にあるその他のコンテンツを説明するキャプションや凡例を表します。
8
12
4
5.1
18
5
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

HTML 
<figure>
  <img src="chart.png" alt="2024年の売上推移グラフ">
  <figcaption>Figure 1: Monthly Sales Trends for 2024</figcaption>
</figure>

ライブデモ

画像キャプション

figure と figcaption で画像にキャプションを付与。

プレビュー全画面表示

コードスニペット

figure でコードブロックにキャプションを付与するパターン。

プレビュー全画面表示

テーブルキャプション

figure でデータテーブルにキャプションを付けるパターン。

プレビュー全画面表示

実務での使いどころ

  • <figure> and <figcaption> の活用

    <figure> は HTML の要素で、図表などの自己完結型のコンテンツを表し、任意で <figcaption> 要素を使用して表されるキャプションを付けることができます。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク