<figure>: キャプションが付けられる図要素

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

試してみましょう

コンテンツカテゴリ フローコンテンツ, 区分化ルート, 知覚可能コンテンツ
許可されている内容 <figcaption> 要素とそれに続くフローコンテンツ、またはフローコンテンツとそれに続く <figcaption> 要素、またはフローコンテンツ
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 フローコンテンツを受け入れるすべての要素
暗黙の ARIA ロール figure
許可されている ARIA ロール 子孫に figcaption がない場合: any、それ以外の場合は許可されているロールなし
DOM インターフェイス HTMLElement

属性

この要素にはグローバル属性のみがあります。

使用上のメモ

  • ふつう <figure> は画像、イラスト、グラフ、コードの断片など、文書の本文の流れから参照されるものの、本文の流れに影響を与えることなく、文書のほかの部分や付録に移動することが可能なものに用います。
  • 区分化ルートとなり、 <figure> 要素のコンテンツのアウトラインは、文書の本文のアウトラインから除外されます。
  • キャプションは <figure> 要素の中に (最初または最後の子要素として) <figcaption> 要素を挿入することで表すことができます。図の中で最初に見つかった最初の <figcaption> 要素が図のキャプションとして表示されます。

例

画像

<!-- 単なる画像 -->
<figure>
  <img
  src="https://developer.mozilla.org/static/img/favicon144.png"
  alt="美しい MDN のロゴ">
</figure>

<!-- キャプションが付いた画像 -->
<figure>
  <img
  src="https://developer.mozilla.org/static/img/favicon144.png"
  alt="美しい MDN のロゴ">
  <figcaption>MDN ロゴ</figcaption>
</figure>

コードスニペット

<figure>
  <figcaption>Get browser details using <code>navigator</code>.</figcaption>
  <pre>
function NavigatorExample() {
  var txt;
  txt = "Browser CodeName: " + navigator.appCodeName + "; ";
  txt+= "Browser Name: " + navigator.appName + "; ";
  txt+= "Browser Version: " + navigator.appVersion  + "; ";
  txt+= "Cookies Enabled: " + navigator.cookieEnabled  + "; ";
  txt+= "Platform: " + navigator.platform  + "; ";
  txt+= "User-agent header: " + navigator.userAgent  + "; ";
  console.log("NavigatorExample", txt);
}
  </pre>
</figure>

引用

<figure>
  <figcaption><cite>Edsger Dijkstra:</cite></figcaption>
  <blockquote>デバッグがソフトウェアのバグを取るプロセスであるならば、
  プログラミングはそれを入れるプロセスだ。</blockquote>
</figure>

詩

<figure>
  <p style="white-space:pre">
Bid me discourse, I will enchant thine ear,
  Or like a fairy trip upon the green,
Or, like a nymph, with long dishevell'd hair,
  Dance on the sands, and yet no footing seen:
Love is a spirit all compact of fire,
  Not gross to sink, but light, and will aspire.</p>
  <figcaption><cite>Venus and Adonis</cite>,
    by William Shakespeare</figcaption>
</figure>

仕様書

Specification
HTML Standard
# the-figure-element

ブラウザーの互換性

BCD tables only load in the browser

関連情報