figure要素

figure要素は、写真、イラスト、図解、表、ソースコードなど、自己完結型のコンテンツを扱う要素。

カテゴリー フロー・コンテンツ。セクショニング・ルート。パルパブル・コンテンツ。
コンテキスト フロー・コンテンツを内包できる要素内で使用できる。
コンテンツ・モデル フロー・コンテンツを内包できる。更に、figcaption要素を、最初か最後の子要素として内包できる。
属性 グローバル属性。
ブラウザ対応

構文

<figure>
	写真、イラスト、図解、表、ソースコードなど。
</figure>

要点

  • figure要素は、写真、イラスト、図解、表、ソースコードなど、自己完結型のコンテンツを扱う要素。
  • セクショニング・ルートとなる要素である。ドキュメント全体の階層構造（アウトライン）とは別の、独自の階層構造（アウトライン）を持つ。
  • figure要素内には、figcaption要素で括ったキャプションを、figure要素の最初か最後の子要素として配置することもできる。
  • figure要素は、入れ子にし、多階層にすることもできる。
  • 特にスタイルを指定しない場合、figure要素の左右に約40px、上下に約1emのマージンを入れて表示するブラウザが多い。
  • figure要素は、HTML5にて新たに導入された要素である。

figure要素を使う例

サンプルコード

<figure>
	<figcaption>○○山脈</figcaption>
	<img src="sampleImg.png">
	<p>○○年〇月○日に撮影した写真。</p>
</figure>

サンプル

キャプション付きの写真

HTMLソースコード
<p>○○山脈とは、標高○○○○メートル級の山々が連なる…</p>
<figure>
	<figcaption>○○山脈</figcaption>
	<img src="sampleImg.png">
	<p>○○年〇月○日に撮影した写真。</p>
</figure>
<p>１日目のキャンプは、…</p>

実際の表示

○○山脈とは、標高○○○○メートル級の山々が連なる…

○○山脈

○○年〇月○日に撮影した写真。

１日目のキャンプは、…

入れ子（ネスト）

HTMLソースコード
<style scoped="scoped">
	#sampleFigure > figure {
		float: left;
	}
</style>
<p>○○山脈とは、標高○○○○メートル級の山々が連なる…</p>
<figure id="sampleFigure">
	<figcaption>○○山脈の山々</figcaption>
	<figure>
		<figcaption>○○山</figcaption>
		<img src="sampleImg.png">
	</figure>
	<figure>
		<figcaption>○○山</figcaption>
		<img src="sampleImg.png">
	</figure>
	<figure>
		<figcaption>○○山</figcaption>
		<img src="sampleImg.png">
	</figure>
	<div style="clear: left;"></div>
</figure>
<p>１日目のキャンプは、…</p>

実際の表示

○○山脈とは、標高○○○○メートル級の山々が連なる…

○○山脈の山々
○○山
○○山
○○山

１日目のキャンプは、…