基礎

HTML要素

フィギュア・キャプション

figcaption要素

最終更新日：2023-09-18
公開日：2016-01-21

figure要素の最初、または最後の子要素として使用することができ、figure要素内のコンテンツに関する説明テキストを表す場合に使用します。

HTML サンプルコード

<figure>
  <img src="img/sample.jpg" alt="サンプル写真">
  <figcaption>例えば、このようにimg要素で画像を配置し、画像の解説をここへ記述するような使い方をします。</figcaption>
</figure>

カテゴリー

なし
コンテンツモデル

フローコンテンツ
使用ケース

figure要素の最初、または最後の子要素として使用します。

属性

グローバル属性: グローバル属性のみ使用することができます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。

使用例

記事ページを想定したHTMLサンプルコード

見出しや記事本文テキストに対してはh1要素、p要素を使い、写真画像を配置したいところでfigure要素を使用しています。
解説部分ではfigcaption要素によって説明を加えています。

HTML コード例

<article>
  <h1>アラスカから良い豆が入荷しました</h1>
  <p>1月のアラスカは極寒です。<br>この時期は夜空にオーロラを望むこともできます。</p>
  <p>そんなアラスカから、カカオの香りが美味しいコーヒーが届きました。</p>
  <figure>
    <img src="images/alaska_coffee.jpg" alt="アラスカ限定の豆">
    <figcaption>カカオの香りが香ばしい、日本では中々手に入れることのできない希少な豆</figcaption>
  </figure>
</article>

ブラウザでの表示例