HTML5 & CSS3 リファレンス - <figure> （図，表，ソースコードの記述部（新））

<figure> * - 図，表，ソースコードの記述部（新）

■ 概要

項　　目	説　　明
記述形式	<figure>～</figure>
対応ブラウザー	H5+ / e9+ / Fx4+ / Op11.1+ / Ch1+ / Sa1+
種　　類（カテゴリー）	フロー・コンテンツ，セクショニング・ルート，パルパブル・コンテンツ
置ける場所	フロー・コンテンツが記入できる場所
内包要素（コンテンツ・モデル）	１個のfigcaption要素とこれに続くフロー・コンテンツ，または，フロー・コンテンツとこれに続く１個のfigcaption要素，または，フロー・コンテンツ（コンテンツ・モデル: カテゴリー）

■ 解説

<figure> は，図表やソースコードなどの記述に使用します。

figure要素のキャプション（表題）は figcaption要素で指定して表示することができます。　figcaption要素は省略可能ですが，記述する場合は，figure要素の子要素の一番最初か，一番最後に記述する必要があります。　そのとき，それぞれ，この要素の上部，および，下部に表題が表示されます。

figure要素は，本文の流れには直接影響を与えないものと定められており，ブラウザーによってはページの右端や別のページへ切り出されるかもしれません。　これらの配置方法を指定したい場合には，CSS の positionプロパティ，floatプロパティ，clearプロパティ等を用います。

■ 属性

種　　類	名　　称
【固有属性】	なし
【グローバル属性】	accesskey，class，contenteditable ， dir， hidden ，id， lang，spellcheck ，style， tabindex，title，translate
【ARIA role属性】で指定可能な値（役割）	任意の値（役割）
【ARIA aria-* 属性】で指定可能なもの	ARIA グローバル状態とプロパティ，指定可能な役割の任意の状態とプロパティ

■ CSSプロパティ

種　　類	名　　称
【よく使うもの】

■ 使用例

HTMLソース
HTML <body> ～ </body>	<figure> <figcaption>当時の写真</figcaption> <img src="http://www.tohoho-web.com/html/image/xxx.gif" width=100 height=100> </figure> <br> <figure> <img src="http://www.tohoho-web.com/html/image/xxx.gif" width=100 height=100> <figcaption>当時の写真</figcaption> </figure>

HTMLソース

HTML
<body> ～ </body>

<figure>
  <figcaption>当時の写真</figcaption>
  <img src="http://www.tohoho-web.com/html/image/xxx.gif" width=100 height=100>
</figure>
<br>
<figure>
  <img src="http://www.tohoho-web.com/html/image/xxx.gif" width=100 height=100>
  <figcaption>当時の写真</figcaption>
</figure>

ブラウザー表示例
当時の写真当時の写真

■ 備考

上の例からもわかるように，figure要素と figcaption要素の組み合わせでは，table要素と caption要素の組み合わせの場合より，より簡単かつ直感的に表題の表示位置を指定することが可能です。　とくに，後者の場合は，CSS による指定を行わない限りは下部に表題を表示することはできないので，もともと，table要素の表題は上部に表示することになっているようです。