このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
<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="Elephant at sunset" /> <figcaption>An elephant at sunset</figcaption></figure>figure { border: thin #c0c0c0 solid; display: flex; flex-flow: column; padding: 5px; max-width: 220px; margin: auto;}img { max-width: 220px; max-height: 150px;}figcaption { background-color: #222; color: #fff; font: italic smaller sans-serif; padding: 3px; text-align: center;}属性
この要素にはグローバル属性のみがあります。
使用上のメモ
- ふつう
<figure>は画像、イラスト、グラフ、コードの断片など、文書の本文の流れから参照されるものの、本文の流れに影響を与えることなく、文書のほかの部分や付録に移動することが可能なものに用います。 - キャプションは
<figure>要素の中に（最初または最後の子要素として）<figcaption>要素を挿入することで表すことができます。図の中で最初に見つかった最初の<figcaption>要素が図のキャプションとして表示されます。
例
画像
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() { 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>結果
引用
html
<figure> <figcaption><b>Edsger Dijkstra:</b></figcaption> <blockquote> デバッグがソフトウェアのバグを取るプロセスであるならば、プログラミングはそれを入れるプロセスだ。 </blockquote></figure>結果
詩
html
<figure> <p> Bid me discourse, I will enchant thine ear, Or like a fairy trip upon the green, Or, like a nymph, with long dishevelled 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>結果
技術的概要
| コンテンツカテゴリー | フローコンテンツ,知覚可能コンテンツ. |
|---|---|
| 許可されている内容 | <figcaption> 要素とそれに続くフローコンテンツ、またはフローコンテンツとそれに続く<figcaption> 要素、またはフローコンテンツ |
| タグの省略 | なし。開始タグと終了タグの両方が必須です。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | figure |
| 許可されている ARIA ロール | 子孫にfigcaption がない場合:any、それ以外の場合は許可されているロールなし |
| DOM インターフェイス | HTMLElement |
仕様書
| Specification |
|---|
| HTML # the-figure-element |
ブラウザーの互換性
関連情報
<figcaption>要素