第6回目 HTML5の「カテゴリー」についてまとめよう
| これまで数回にわたって基本マークアップで使用するHTML5の新要素についてまとめてみましたが、HTML5では要素のほとんどはカテゴリーというくくりに分けられています。 HTML4では、要素ごとにブロック要素、インライン要素というわけ方があり、インライン要素の中にブロック要素が使えなかったりなどタグの使い方にルールがありましたが、HTML5ではブロック要素、インライン要素というわけ方はしなくなり、要素ごとに目的に応じたカテゴリーという形で分けられています。今回はそのカテゴリーについてまとめてみたいと思います。 解説：（有）ムーニーワークス 林 豊／田崎一成 |
●HTML5の各要素は目的に応じたカテゴリーに属す
| HTML5の要素のほとんどが上記のカテゴリーのどれかに属しますが、必ずしも1つではなく、1つの要素が複数のカテゴリーに属することもあります。また中にはどのカテゴリーに属さない要素もあります。通常のWEBサイト制作をする上では上の7つのコンテンツと「セクショニング・ルート」についての役割をまず理解しましょう。 ●メタデータ・コンテンツ ●フロー・コンテンツ ●セクショニング・コンテンツ ●ヘッディング・コンテンツ ●フレージング・コンテンツ ●エンベッディッド・コンテンツ ●インタラクティブ・コンテンツ ●セクショニング・ルート |
●メタデータ・コンテンツ
| メタデータ・コンテンツは主にドキュメントのメタデータやスタイルやJavascriptの定義など基本的にブラウザ上には直接表示されないような要素になります。HTML4やxhtmlの際にも内に記述される要素とするとイメージがつきやすいかと思います。 このカテゴリーには以下の要素が属しています。 |
 |
 |
メタタグ、ページのタイトル、CSSやjavascriptの読み込みなど
●フロー・コンテンツ
| フロー・コンテンツは基本的にはドキュメント内に現れるコンテンツ全般を表します。要素を見てみると、body内に記述するほとんどの要素が属しているのがわかります。 このカテゴリーには以下の要素が属しています。 |
 |
|
一覧を見るとstyle要素が条件付でフロー・コンテンツになっているため、気になる方もいるかと思いますので少し触れてみたいと思います。style要素は、HTML5ではscoped 属性を指定することで、フロー・コンテンツに属します。これはstyle要素の親要素の中にだけスタイルを適用させることができます。 例えば、section要素内に使用した場合です。 |
 |
| scoped属性は親要素の中にスタイルを適応できるので、sectionの外にあるp要素には適応されません。ただし、現在の主要ブラウザはscoped属性のサポートを行っていないようなので、上記サンプルソースを試すと両方とも赤色になってしますので特定の部分だけ色を変えたい場合などはいままでどおりclassを使った方がよいです。サイト制作ではあまりstyle要素を使わないかもしれませんが、条件付でフロー・コンテンツカテゴリーに入る例として書いてみました。 |
●セクショニング・コンテンツ
| セクショニング・コンテンツは章・節・項のように、見出しとその内容というように、階層構造になる範囲を定義する要素になります。 |
 |
| こちらは前回までにでてきた新要素の「article aside nav section」ですね。これらHTML5で文書構造を作成するのに必要な要素がセクショニング・コンテンツとなります。 見出しから内容までの範囲を定義するコンテンツということですが、section要素を例にサンプルソースを書きましたので確認してみたいと思います。 |
 |
| サンプルソースを見ると、section要素ごとに見出しと内容があるのを確認できます。 HTML5でサイト構築する場合、このセクショニング・コンテンツを理解することが非常に重要になってきますので、この4つの要素については以前の記事「HTML5で新しく定義された新要素をまとめよう」「HTML5で新しく定義された新要素「section要素」の使い方の基本をまとめよう」と「HTML5で新しく定義された新要素「article要素」の使い方の基本をまとめよう」にまとめています。 |
●ヘッディング・コンテンツ
| ヘッディング・コンテンツはセクションのヘッダー関連する要素が属します。 |
 |
| これは名前の通り分かりやすいですね。今までのh要素とhgroupはHTML5から追加された新要素ですが、見出しと副題などをグループ化することができる要素です。こちらはドキュメントの先頭のヘッダー部分というだけでなく、原稿のセクションのあたる部分のヘッダーにも使われます。 |
 |
| 新要素hgroupについては以前の記事「HTML5で新しく定義された新要素をまとめよう」にまとめてあります。 |
●フレージング・コンテンツ
| フレージング・コンテンツはドキュメントのテキストのことですが、p要素のように段落そのものを表す要素やdiv要素やsection要素のように複数の段落をまとめるような要素は該当しません。段落の中にあるテキスト範囲を示す場合に使う要素が属します。 |
 |
| span要素、strong要素、em要素などからも分かるように、HTML4でいうインライン要素に近い概念のようです。上記要素の中に赤字でa要素の中にフレージング・コンテンツしかない場合はフレージング・コンテンツになるという条件がありますが、さらにフレージング・コンテンツの理解を深めるためにa要素を例にサンプルソースを書いてみます。 |
 |
| ソースを見てみると、h1(ヘッディング・コンテンツ)がa要素の中に入った場合はフレージング・コンテンツになっていません。これはh1要素がフレージング・コンテンツに属していないので、それを囲んだa要素がフレージング・コンテンツにならない形になります。 |
●エンベッディッド・コンテンツ
| エンベッディッド・コンテンツはドキュメントに外部のリソースを組み込むコンテンツや、HTMLではない別の言語で表現するコンテンツを表します。外部のリソースの例としては、画像、プラグイン、フレーム、ビデオ、canvasなどが挙げられます。またSVG・MathMLなどのHTMLではない別の言語で表されるコンテンツが属します。 |
 |
| これらについてはHTML5で通常のページが作れるようになった後に別の記事をまとめる予定です。 |
●インタラクティブ・コンテンツ
| インタラクティブ・コンテンツはユーザーが何か操作をすることができるコンテンツを表します。たとえばハイパーリンクやクックすることで状態を変化させるものが該当します。 |
 |
| ユーザーが何かしらの操作ということで、クリックできるものやform関連が多いですね。その中でも分かりやすいクリック関連のbutton要素を例にサンプルソースを書いてみました。 |
 |
| このボタンをクリックするとアラートが表示されますが、ボタンをクリックするのはユーザーですからbutton要素がインタラクティブ・コンテンツに属しているのが分かります。 |
●セクショニング・ルート
| 一部の要素は、セクショニング・ルートと呼ばれるカテゴリーに属します。通常ドキュメントは章・節・項などの階層を持ちます。しかし、セクショニング・ルートに属する要素の中のコンテンツは、その前後のコンテンツとは独立したコンテンツのようにみなされます。これらの要素の中にあるセクションと見出しは、祖先のアウトラインには現れません。 |
 |
| こちらについてはアウトラインの関係がでてきますので「コンテンツ・モデル」「アウトライン」のまとめが終わった後にまた取り上げたいと思います。 |
以上の7つが主に代表されるカテゴリーとプラスして覚えたいセクショニング・ルートですが、これらのカテゴリーは【コンテンツ・モデル】を考える場合に、とても重要になってくるのでしっかり理解しておきましょう。また、コンテンツ・モデルについては次回の記事で取り上げる予定です。
次回につづく
 |
【林 豊】●1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークス（http://www.moonyworks.com/）を立ち上げWEBの企画・制作、セミナー講師やWEB運用の企業研修なども行っている。 またWEB制作に役立つ情報を集めて制作のヒントになるブログを更新している HTML5でサイトをつくろう：http://www.html5-memo.com/ Webデザインクリップ：http://webdesignmatome.com/ デジハリ・オンラインスクールにて自宅や会社のPCからいつでも「HTML5」を学べる講座を担当。ただいま全体の1/3の内容を無料で視聴できます。 HTML5入門講座：http://online.dhw.co.jp/course/html5/ |
