Lesson 07 HTML5のアウトラインレベル - HTML5＋CSS3 次世代Webコーディングの超・最新動向・HTML5編

HTML5＋CSS3 次世代Webコーディングの 超・最新動向

HTML5編

	Lesson 7			HTML5の アウトラインレベル
	制作・文			羽田野 太巳（有限会社futomi）

HTML5では、マークアップから文書構造を決定するためのメカニズムが規定された。これは旧来のHTMLとの大きな違いのひとつだ。Webページを適切にマークアップするために不可欠なアウトラインの概念を正しく理解しよう。

アウトラインとは

書籍や論文など、文書は必ずといってもよいほど文書構造を持つ。たとえば書籍でいえば、目次をご覧いただくとわかるとおり、全体を内容に応じて章や節で区切る。Webページも分量の差こそあれ同じように文書構造を持つ。

旧来のHTMLでは、この文書構造をh1～h6要素を使って表してきた【1】。

この例から見出しだけを目次として並べるとしたら【2】のようになる。このような階層は、h1 ～h6要素の数字の大小で表す。つまりh1要素の見出しレベルが最も大きく、数字が大きくなるにつれて見出しレベルが下がっていく。

このようにh1 ～h6 要素の出現によって文書構造が解釈されてきた。そしてh1～h6要素の数字は文書構造を表現する上では非常に重要な情報だ。こういった文書構造をアウトラインと呼ぶ。

h1 ～h6要素を適切に使わないと、そのWebページは期待通りのアウトラインを構成せず、構造上おかしなドキュメントになってしまう。従って、Webページに携わる方であればh1～h6要素の選択には細心の注意を払ってきたことだろう。

アウトラインを考慮するに当たり、見出しだけでなく、そのコンテンツも重要だ。基本的にh1 ～h6要素で表された見出しと、それに続くコンテンツがひとつの章なり節を表すことになる。そのコンテンツの終わりは、次のh1 ～h6要素が出現する手前となる。

この見出しと、それに続くコンテンツをセクションと呼ぶ。適切なアウトラインを構成するページを作成する際には、セクションの範囲を意識する必要があるのだ。


【1】



【2】

暗黙的なアウトラインの限界

前述のようにh1 ～h6要素の出現だけに頼って暗黙的にアウトラインを構成する方法には限界がある。

それは見出しに関連付けられるコンテンツの終わりをマークアップできないからだ。つまりセクションの終わりを明示的に宣言できないのだ。

たとえば【3】の段落AAAは大見出しのコンテンツであり、段落BBBは中見出し1のコンテンツ、そして、段落CCCは中見出し2のコンテンツであることは明らかだ。もちろん、段落BBBと段落CCCは、それらの中見出しも含めて、大見出しのコンテンツの一部でもある。

では、段落DDDはどうだろう。この例のマークアップでは、div要素で中見出しのコンテンツを囲むことで、段落DDDを中見出しのコンテンツから切り離し、大見出しの直下のコンテンツにしたつもりだ。CSSによってうまくスタイリングすれば、意図通りの見た目にすることができるだろう。

ところが、アウトラインのアルゴリズム上、段落DDDは中見出し2のコンテンツに属してしまう。なぜなら、div要素はセ クションを区切る役割を持っていないからだ【4】。

残念ながら旧来のHTMLにセクションの終わりを明示的に指定する方法はない。




【3】



【4】

HTML5のアウトライン

前述のような問題を回避するために、HTML5 ではアウトライン生成の仕組みが新たに導入された。

アウトライン生成に大きな役割を果たすのは、すでに紹介したsection要素だ。前述のマークアップ例のdiv 要素をsection要素に置き換えてみよう【5】。

このsection要素のおかげで、セクションの範囲が明示的に区切られ、段落DDDは期待通りに大見出しのコンテンツとして解釈されることになる【6】。

section 要素のようにセクションの範囲を区切る要素として、ほかにarticle要素、nav要素、aside要素が規定されている。ここでは、これら4つの要素のことをセクショニング要素と呼ぼう。

セクショニング要素は、それぞれ異なったセマンティクスを持つ（→P026 参照）。しかし、いずれも1つのセクションを構成するという点では共通だ。セクショニング要素は、アウトラインを構成するためのアルゴリズムに大きな影響を及ぼす。前述のマークアップ例の見出しをすべてh1要素に置き換えてみよう【7】。

旧来のHTMLと比較すると違和感があるだろうが、実はアウトラインに違いはない。極端ではあるが、【8】のマークアップですら同じアウトラインを構成する。

もちろん、このようなマークアップは推奨されない。ここで理解していただきたいのは、セクショニング要素を使って明示的にセクションの範囲をマークアップすると、もはやh1 ～h6 要素の数字に意味はないということだ。アウトラインは、あくまでもセクショニング要素の入れ子の深さで決まる。これはセクショニング要素が、その中にあるh1 ～h6要素にかかわらず、そのセクションのアウトラインレベルを自動的に1つ下げる働きを持つことを意味する。仮に h1 ～h6要素がなかったとしても、そのセクションのアウトラインレベルは1つ下がることになる。つまり、アウトラインに名無しのセクションが1つできあがるのだ。

HTML5でのマークアップにおいては、あらゆるセクションにセクショニング要素を使ってマークアップするのがよいだろう。そして、その見出しはすべてh1要素にするか、もしくは旧来のHTMLと同様にアウトラインレベルに応じたh1～h6要素を使い分けるのがよいだろう。


【5】



【6】



【7】



【8】

アウトラインの確認方法

HTML5では、アウトラインをプログラム的に判定するアルゴリズムが規定されている。そのため、HTML5でマークアップされたページのアウトラインをチェックすることができる。ここでは2つのチェックツールを紹介しよう。いずれも見出しのみを表示するツールだ。コンテンツがどのセクションに属するのかまではわからないが、該当のページが期待通りのアウトラインを構成しているかどうかを確 認するには十分だろう。

HTML5 Outliner

これはWeb上で提供されるチェック・ツールだ【9】。

URLを入力して "Outline this!" ボタンを押すと、該当のページのアウトラインを表示してくれる【10】。


Chrome Extension HTML5
Outliner

これはGoogle Chrome ブラウザの拡張機能で、インストールするとアドレスバーにアイコンが表示される【11】。

ChromeでWebページを開いてからこのアイコンをクリックすると、そのページのアウトラインを一覧で表示してくれる。各見出しはリンクになっているので、それをクリックすれば該当の位置にスクロールしてくれる。Web制作におけるアウトライン確認という目的だけでなく、Webページ閲覧のツールとしても役に立つだろう。

旧来のHTMLと比べて、かなりシンプルになったことがわかるだろう。


【9】HTML5 Outliner：http://gsnedders.html5.org/outliner/



【10】


【11】https://chrome.google.com/webstore/detail/afoibpobokebhgfnknfndkgemglggomo