<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 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 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 |
ブラウザーの互換性
Loading…
関連情報
<figcaption>要素