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

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

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

試してみましょう

<figure>
  <img
    src="/shared-assets/images/examples/elephant.jpg"
    alt="夜明けの象" />
  <figcaption>夜明けの象</figcaption>
</figure>

figure {
  border: thin silver solid;
  display: flex;
  flex-flow: column;
  padding: 5px;
  max-width: 220px;
  margin: auto;
}

img {
  max-width: 220px;
  max-height: 150px;
}

figcaption {
  background-color: #222222;
  color: white;
  font: italic smaller sans-serif;
  padding: 3px;
  text-align: center;
}

属性

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

使用上のメモ

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

例

画像

html

<!-- 単なる画像 -->
<figure>
  <img src="favicon-192x192.png" alt="美しい MDN のロゴ" />
</figure>

<!-- キャプションが付いた画像 -->
<figure>
  <img src="favicon-192x192.png" alt="美しい MDN のロゴ" />
  <figcaption>MDN ロゴ</figcaption>
</figure>

結果

コードスニペット

html

<figure>
  <figcaption><code>navigator</code> を用いてブラウザーの詳細を取得</figcaption>
  <pre>
function NavigatorExample() {
  let txt = `Browser CodeName: ${navigator.appCodeName};\n`;
  txt += `Browser Name: ${navigator.appName};\n`;
  txt += `Browser Version: ${navigator.appVersion};\n`;
  txt += `Cookies Enabled: ${navigator.cookieEnabled};\n`;
  txt += `Platform: ${navigator.platform};\n`;
  txt += `User-agent header: ${navigator.userAgent};`;
  console.log("NavigatorExample", txt);
}
  </pre>
</figure>

結果

引用

html

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

結果

詩

html

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

結果

技術的概要

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