引用文を書きたい気分の時もある
そんなときに、今まではこう書いていました。
今まで書いていたコード
<body>
<div class="article">
<h1>フエキ糊について</h1>
<p>不易糊工業株式会社より公式の説明文。</p>
<div id="quote">
<h2>フエキでんぷんのり</h2>
<h3>主原料がとうもろこしでんぷん100％でできています。</h3>
<p>
園児や学童に安心して使ってもらえる、主原料とうもろこしでんぷん１００％。<br>
ホルマリンは一切使用しておりません。<br>
強力な初期粘着性、すぐれた塗布性、長期にわたり安定した品質。高品質なでんぷんのりです。
</p>
</div>
<h2>フエキ糊のヘラについて</h2>
<p>160g入りのみに付属。60g入りには付属していない。</p>
</div>
</body>
お恥ずかしながら、とりあえずdivで囲っておけ精神でコードを書いていたのでこんなことに…。
そこで、引用文を示す<blockquote>という要素があります。
blockquote要素
HTML <blockquote> 要素 (HTML ブロック引用要素) は、内包する要素のテキストが引用文である事を示します。通常、字下げを伴ってレンダリングされます (成形方法については「注意」の項を参照して下さい)。cite 属性により引用元の文書の URL を、<cite> 要素により引用元の文書のタイトルなどを明示可能です。
早速、blockquoteを適用してみましょう。
blockquoteを適用したコード
<body>
<div class="article">
<h1>フエキ糊について</h1>
<p>不易糊工業株式会社より公式の説明文。</p>
<blockquote>
<h2>フエキでんぷんのり</h2>
<h3>主原料がとうもろこしでんぷん100％でできています。</h3>
<p>
園児や学童に安心して使ってもらえる、主原料とうもろこしでんぷん１００％。<br>
ホルマリンは一切使用しておりません。<br>
強力な初期粘着性、すぐれた塗布性、長期にわたり安定した品質。高品質なでんぷんのりです。
</p>
</blockquote>
<h2>フエキ糊のヘラについて</h2>
<p>160g入りのみに付属。60g入りには付属していない。</p>
</div>
</body>
わざわざdivにidを付けて区別する必要もなく、さらには表示の際に字下げをしてくれます。
もちろんCSSによる装飾の変更も可能です。
HTML5に基準するのであれば、<div class="article">もセクション要素<article>と変えられるのでこうなります。
blockquoteを適用しHTML5基準にしたコード
<body>
<article>
<h1>フエキ糊について</h1>
<p>不易糊工業株式会社より公式の説明文。</p>
<blockquote>
<h2>フエキでんぷんのり</h2>
<h3>主原料がとうもろこしでんぷん100％でできています。</h3>
<p>
園児や学童に安心して使ってもらえる、主原料とうもろこしでんぷん１００％。<br>
ホルマリンは一切使用しておりません。<br>
強力な初期粘着性、すぐれた塗布性、長期にわたり安定した品質。高品質なでんぷんのりです。
</p>
</blockquote>
<h2>フエキ糊のヘラについて</h2>
<p>160g入りのみに付属。60g入りには付属していない。</p>
</article>
</body>
blockquoteはセクショニング・ルート
内容のセクションや見出しがアウトラインに一切影響を与えない要素をセクショニング・ルートと呼ばれます。
blockquoteを含めた、次の5つの要素がセクショニング・ルートとして定義されています。
- body要素
- blockquote要素
- fieldset要素
- figure要素
- td要素
引用を示すblockquote要素は、内容のセクション・見出しは引用された文であり、元のアウトラインとは関係が無いため、セクショニング・ルートとして扱われるのですね。
となるとアウトラインはどうなる？
このコードのアウトラインはどうなるのでしょうか？
<body>
<article>
<h1>フエキ糊について</h1>
<p>不易糊工業株式会社より公式の説明文。</p>
<blockquote>
<h2>フエキでんぷんのり</h2>
<h3>主原料がとうもろこしでんぷん100％でできています。</h3>
<p>
園児や学童に安心して使ってもらえる、主原料とうもろこしでんぷん１００％。<br>
ホルマリンは一切使用しておりません。<br>
強力な初期粘着性、すぐれた塗布性、長期にわたり安定した品質。高品質なでんぷんのりです。
</p>
</blockquote>
<h2>フエキ糊のヘラについて</h2>
<p>160g入りのみに付属。60g入りには付属していない。</p>
</article>
<body>
この部分は、blockquote要素で囲まれているため、アウトラインには影響しない見出しです。
<h2>フエキでんぷんのり</h2>
<h3>主原料がとうもろこしでんぷん100％でできています。</h3>
また、body要素もセクショニング・ルートのため、アウトラインに影響されません。
なので、アウトラインはこうなります。
1.フエキ糊について
1.フエキ糊のヘラについて