このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

figcaption”要素:図表などのキャプションHTML5で追加

記事May 19th,2015
July 7th,2020
自己完結した内容に対してキャプションを付ける要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

カテゴリー なし
利用場所 figure”要素の最初または最後の子要素として
内容 フロー・コンテンツ
タグの省略 不可

figcaption”要素は親要素となるfigure”要素で表した挿絵や図表、写真、詩歌、コードのまとまりなどの説明やタイトル、凡例を示す要素です。

サンプルコード

<p>
今年のゴールデンウィークは私はとある海沿いの街に出かけた。私は海を見ながら紅茶を飲んだり、読書をしたり、風の音を聞きながらゆっくり過ごした。
</p>
<figure>
<img src="sample_photo.jpg" style="width: 60%;">
<figcaption>
海の近くに建つ風車
</figcaption>
</figure>
<p>
夜は旅館で海鮮料理を食べて、温泉に入った。
</p>

今年のゴールデンウィークは私はとある海沿いの街に出かけた。私は海を見ながら紅茶を飲んだり、読書をしたり、風の音を聞きながらゆっくり過ごした。

海の近くに建つ風車

夜は旅館で海鮮料理を食べて、温泉に入った。

<p>
清少納言は平安時代の女流作家、歌人である。有名な随筆「枕草子」は中宮定子の女房として仕える間、日常のことや噂話など、宮廷で過ごした間に興味を持った物事がまとめられている。
</p>
<figure>
<figcaption>
「枕草子」から<cite>「春はあけぼの」</cite>の一節
</figcaption>
<blockquote>
<p>
春は あけぼの<br>
やうやう しろくなりゆく<br>
山ぎは すこしあかりて<br>
紫だちたる雲の ほそく たなびきたる<br>
</p>
</blockquote>
</figure>
<p>
「清少納言」は女房名であり、「清」は清原姓に由来しているとされる。ただ、近い親族で少納言職を務めたものがいないため、「少納言」の由来は諸説あるがはっきりしない。
</p>

清少納言は平安時代の女流作家、歌人である。有名な随筆「枕草子」は中宮定子の女房として仕える間、日常のことや噂話など、宮廷で過ごした間に興味を持った物事がまとめられている。

「枕草子」から「春はあけぼの」の一節

春は あけぼの
やうやう しろくなりゆく
山ぎは すこしあかりて
紫だちたる雲の ほそく たなびきたる

「清少納言」は女房名であり、「清」は清原姓に由来しているとされる。ただ、近い親族で少納言職を務めたものがいないため、「少納言」の由来は諸説あるがはっきりしない。

属性と値

属性
属性 説明 説明
必須属性
なし
任意属性
グローバル属性

仕様書

figcaption”要素はHTML5から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

定義されている仕様書
HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<figcaption>
定義なし

定義あり

定義あり

定義あり

定義あり
DOMインターフェース

figcaption”要素は“HTMLElement”インターフェイスを使用します。

UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);

figcaption {
display: block;
unicode-bidi: isolate;
}

/* 文書の文字エンコーディングが ISO-8859-8 である場合 */
figcaption {
unicode-bidi: bidi-override;
}
HTMLタグ辞書
HTMLタグ辞書
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク