May 19th,2015
要素について
| カテゴリー | フロー・コンテンツ、パルパブル・コンテンツ |
| 利用場所 | フロー・コンテンツが置ける場所 |
| 内容 | フロー・コンテンツ、任意でフロー・コンテンツの前もしくは後に“figcaption”要素 |
| タグの省略 | 不可 |
“figure”要素は自己完結した内容を表す要素です。挿絵や図表、写真、詩歌、コードのまとまりなど、文書から切り出しても元の文書の内容に影響がなく、切り出した内容単体で意味が通る内容に使用することができます。
任意で“figcaption”要素を子要素として配置してキャプションを入れることができます。
サンプルコード
<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>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>文書のタイトル</title>
</head>
<body>
文書の内容
</body>
</html>
</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>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>文書のタイトル</title>
</head>
<body>
文書の内容
</body>
</html>
</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から変わった点は、より簡潔にコードを書くことができるようになったのと、新たな要素や属性が追加されて、実現可能な表現が増えたことです。
仕様書
“figure”要素はHTML5から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。
定義されている仕様書
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
| <figure> |   |
  |
|
|
|
DOMインターフェース
“figure”要素は“HTMLElement”インターフェイスを使用します。
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);
figure {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 40px;
margin-inline-end: 40px;
unicode-bidi: isolate;
}
/* 文書の文字エンコーディングが ISO-8859-8 である場合 */
figure {
unicode-bidi: bidi-override;
}
