＜figure要素＞ - 自己完結型のコンテンツ

公開日: 2017/02/09

figure要素は、自己完結型のコンテンツを表す要素です。それ単独で成り立つ完全な文章、キャプション付きの図面などを指します。メインコンテンツと関係ありながらも、メインコンテンツから切り離して代わりにリンクを貼ることでも対応できるようなコンテンツが適しています。

概要

名前

figure

カテゴリー

Flow content

Sectioning content

Palpable content

配置できる場所

Flow contentが期待される場所。

コンテンツモデル

figcaption要素、Flow content。figcaption要素を入れる場合は最初の子要素、または最後の子要素でなければいけない。

タグの省略

開始タグも終了タグも省略できません。

DOM Interface

HTMLElement

デフォルトのスタイル

figure {
	display: block;
	-webkit-margin-before: 1em;
	-webkit-margin-after: 1em;
	-webkit-margin-start: 40px;
	-webkit-margin-end: 40px;
}

仕様書

https://html.spec.whatwg.org/multipage/semantics.html#the-figure-element

属性

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

figure要素は完全な文章、プログラムのコード、図面など、自己完結型のコンテンツをマークアップする要素です。それ単体で成り立ち、代わりにリンクを貼ることでも対応できるようなコンテンツが適しています。figcaption要素は省略しても問題ありません。

画像

多く使われるのは、画像をキャプション付きで紹介したい時です。figure要素は、画像とキャプションを紐づけるのに便利です。

figure要素の使用例

<h1>SYNCERの紹介</h1>
<p>SYNCERは2014年6月にスタートした個人ブログです。</p>

<figure>
	<img src="/image/mascot/200.png">
	<figcaption>
		SYNCERのマスコット
	</figcaption>
</figure>

<p>2016年にはマスコットキャラクターが誕生しました。</p>

<p>SYNCERでは主にウェブとラーメンに関係するコンテンツを取り扱っています。</p>

デモを開く

コード

figure要素でコードをマークアップする例です。

HTML

<p>コードを説明します。</p>

<figure>
	<figcaption>
		PHPの一般的なループ処理
	</figcaption>
	<pre><code>
foreach ( $arr as $key => $val ) {
	echo "[" . $key . "] " . $val . "<BR>" ;
}
	</code></pre>
</figure>

引用

figure要素で引用をマークアップする例です。

HTML

<p>クラークの名言に次の言葉があります。</p>

<figure>
	<blockquote>
		<p>少年よ、大志を抱け</p>
	</blockquote>
	<figcaption>
		<p><cite>クラーク名言大全集(架空の本)</cite>より引用</p>
	</figcaption>
</figure>

詩

figure要素で詩をマークアップする例です。

HTML

<p>ウェブサイトが好きな人の詩です。</p>

<figure>
	<p>君のコンテンツを 輝かせるのは<BR>書籍で稼ぐ ブログアドバイザーじゃない</p>
	<p>君の検索順位を 上げられるのは<BR>みんなの好きな 下らないSEOじゃない</p>
	<p>世界中 探しても 君しかいない<BR>分かってよ ダーリン<BR>更新してよ ダーリン</p>
	<figcaption>詩の名前: <b>Website deal</b> / 作詩: <b>誰かさん</b></figcaption>
</figure>

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜figure要素＞ - 自己完結型のコンテンツ</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/figure/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>figure要素は、メインコンテンツと関係あるけど、メインコンテンツから切り離して代わりにリンクを貼ることでも対応できるようなコンテンツをマークアップします。</p>

<h1>SYNCERの紹介</h1>
<p>SYNCERは2014年6月にスタートした個人ブログです。</p>

<figure>
	<img src="/image/mascot/200.png">
	<figcaption>
		SYNCERのマスコット
	</figcaption>
</figure>

<p>2016年にはマスコットキャラクターが誕生しました。</p>

<p>主にウェブとラーメンに関係するコンテンツを取り扱っています。</p>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/595/"> <meta charset="utf-8"> <title>【デモ】＜figure要素＞ - 自己完結型のコンテンツ</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/figure/"> </head> <body>

<p>figure要素は、メインコンテンツと関係あるけど、メインコンテンツから切り離して代わりにリンクを貼ることでも対応できるようなコンテンツをマークアップします。</p> <h1>SYNCERの紹介</h1> <p>SYNCERは2014年6月にスタートした個人ブログです。</p> <figure> <img src="/image/mascot/200.png"> <figcaption> SYNCERのマスコット </figcaption> </figure> <p>2016年にはマスコットキャラクターが誕生しました。</p> <p>主にウェブとラーメンに関係するコンテンツを取り扱っています。</p>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>