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

figure要素:自己完結した内容HTML5で追加

記事May 19th,2015
July 7th,2020
自己完結した内容を表す要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

figure”要素は自己完結した内容を表す要素です。挿絵や図表、写真、詩歌、コードのまとまりなど、文書から切り出しても元の文書の内容に影響がなく、切り出した内容単体で意味が通る内容に使用することができます。

任意でfigcaption”要素を子要素として配置してキャプションを入れることができます。

figure”要素はセクショニング・ルートなので文書全体の階層構造とは別に独自の階層構造を要素内に持ちます。

サンプルコード

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

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

海の近くに立つ風車

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

<p>
HTML5文書の基本構造はDOCTYPE宣言に続くhtml要素、html要素の中にhead要素とbody要素で従来のHTML4とほぼ同じ方法で記述することができます。
</p>
<figure>
<pre>
<code>
&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;文書のタイトル&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
文書の内容
&lt;/body&gt;
&lt;/html&gt;
</code>
</pre>
</figure>
<p>
HTML4から変わった点は、より簡潔にコードを書くことができるようになったのと、新たな要素や属性が追加されて、実現可能な表現が増えたことです。
</p>

HTML5文書の基本構造はDOCTYPE宣言に続くhtml要素、html要素の中にhead要素とbody要素で従来のHTML4とほぼ同じ方法で記述することができます。

	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>文書のタイトル</title>
	</head>
	<body>
	文書の内容
	</body>
	</html>
	

HTML4から変わった点は、より簡潔にコードを書くことができるようになったのと、新たな要素や属性が追加されて、実現可能な表現が増えたことです。

属性と値

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

キャプションを入れる

任意でfigcaption”要素を子要素として配置してキャプションを入れることができます。figcaption”要素は“figure”要素の最初もしくは最後の子要素として配置します。

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

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

海の近くに建つ風車

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

<p>
HTML5文書の基本構造はDOCTYPE宣言に続くhtml要素、html要素の中にhead要素とbody要素で従来のHTML4とほぼ同じ方法で記述することができます。
</p>
<figure>
<figcaption>
HTML5文書のサンプル
</figcaption>
<pre>
<code>
&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;文書のタイトル&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
文書の内容
&lt;/body&gt;
&lt;/html&gt;
</code>
</pre>
</figure>
<p>
HTML4から変わった点は、より簡潔にコードを書くことができるようになったのと、新たな要素や属性が追加されて、実現可能な表現が増えたことです。
</p>

HTML5文書の基本構造はDOCTYPE宣言に続くhtml要素、html要素の中にhead要素とbody要素で従来のHTML4とほぼ同じ方法で記述することができます。

HTML5文書のサンプル
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>文書のタイトル</title>
	</head>
	<body>
	文書の内容
	</body>
	</html>
	

HTML4から変わった点は、より簡潔にコードを書くことができるようになったのと、新たな要素や属性が追加されて、実現可能な表現が増えたことです。

仕様書

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

HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<figure>
定義なし

定義あり

定義あり

定義あり

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク