第6回 HTML5の「カテゴリー」についてまとめよう
これまで数回にわたって基本マークアップで使用するHTML5の新要素についてまとめてみましたが、HTML5では要素のほとんどはカテゴリーというくくりに分けられています。
HTML4では、要素ごとにブロック要素、インライン要素というわけ方があり、インライン要素の中にブロック要素が使えなかったりなどタグの使い方にルールがありましたが、HTML5ではブロック要素、インライン要素というわけ方はしなくなり、要素ごとに目的に応じたカテゴリーという形で分けられています。今回はそのカテゴリーについてまとめてみたいと思います。
解説：（有）ムーニーワークス 林 豊／田崎一成
●HTML5の各要素は目的に応じたカテゴリーに属す
HTML5の要素のほとんどが上記のカテゴリーのどれかに属しますが、必ずしも1つではなく、1つの要素が複数のカテゴリーに属することもあります。また中にはどのカテゴリーに属さない要素もあります。通常のWEBサイト制作をする上では上の7つのコンテンツと「セクショニング・ルート」についての役割をまず理解しましょう。
●メタデータ・コンテンツ
●フロー・コンテンツ
●セクショニング・コンテンツ
●ヘッディング・コンテンツ
●フレージング・コンテンツ
●エンベッディッド・コンテンツ
●インタラクティブ・コンテンツ
●セクショニング・ルート
●メタデータ・コンテンツ
メタデータ・コンテンツは主にドキュメントのメタデータやスタイルやJavascriptの定義など基本的にブラウザ上には直接表示されないような要素になります。HTML4やxhtmlの際にも内に記述される要素とするとイメージがつきやすいかと思います。
このカテゴリーには以下の要素が属しています。
base command link meta noscript script style title
【メタデータ・コンテンツについて】
＜!DOCTYPE HTML＞
＜html lang=”ja”＞
＜head＞
＜meta charset=”UTF-8”＞
＜title＞HTML5でサイトをつくろう＜/title＞
＜script src=”sample.js”＞＜/script＞
＜link rel=”stylesheet” href=”sample.css” /＞
＜/head＞
※メタタグ、ページのタイトル、CSSやjavascriptの読み込みなど
＜!DOCTYPE HTML＞
＜html lang=”ja”＞
＜head＞
＜meta charset=”UTF-8”＞
＜title＞HTML5でサイトをつくろう＜/title＞
＜script src=”sample.js”＞＜/script＞
＜link rel=”stylesheet” href=”sample.css” /＞
＜/head＞
※メタタグ、ページのタイトル、CSSやjavascriptの読み込みなど
●フロー・コンテンツ
フロー・コンテンツは基本的にはドキュメント内に現れるコンテンツ全般を表します。要素を見てみると、body内に記述するほとんどの要素が属しているのがわかります。
このカテゴリーには以下の要素が属しています。
a abbr address area（map要素の子孫だった場合） article aside audio b bdi bdo blockquote br button canvas cite code command datalist del details dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hgroup hr i iframe img input ins kbd keygen label map mark math menu meter nav noscript object ol output p pre progress q ruby s samp script section select small span strong style（scoped 属性が存在している場合）sub sup svg table textarea time ul var video wbr Text
一覧を見るとstyle要素が条件付でフロー・コンテンツになっているため、気になる方もいるかと思いますので少し触れてみたいと思います。style要素は、HTML5ではscoped 属性を指定することで、フロー・コンテンツに属します。これはstyle要素の親要素の中にだけスタイルを適用させることができます。
例えば、section要素内に使用した場合です。
例えば、section要素内に使用した場合です。
【style要素のscoped 属性について】
＜p＞ここのカラーはデフォルトです。＜/p＞
＜section＞
＜style scoped=”scoped”＞
p{color:red;}
＜/style＞
＜h1＞style要素のscoped属性について＜/h1＞
＜p＞ここのカラーは赤色になります。＜/p＞
＜/section＞
＜p＞ここのカラーはデフォルトです。＜/p＞
＜section＞
＜style scoped=”scoped”＞
p{color:red;}
＜/style＞
＜h1＞style要素のscoped属性について＜/h1＞
＜p＞ここのカラーは赤色になります。＜/p＞
＜/section＞
scoped属性は親要素の中にスタイルを適応できるので、sectionの外にあるp要素には適応されません。ただし、現在の主要ブラウザはscoped属性のサポートを行っていないようなので、上記サンプルソースを試すと両方とも赤色になってしますので特定の部分だけ色を変えたい場合などはいままでどおりclassを使った方がよいです。
サイト制作ではあまりstyle要素を使わないかもしれませんが、条件付でフロー・コンテンツカテゴリーに入る例として書いてみました。
●セクショニング・コンテンツ
セクショニング・コンテンツは章・節・項のように、見出しとその内容というように、階層構造になる範囲を定義する要素になります。
サイト制作ではあまりstyle要素を使わないかもしれませんが、条件付でフロー・コンテンツカテゴリーに入る例として書いてみました。
●セクショニング・コンテンツ
セクショニング・コンテンツは章・節・項のように、見出しとその内容というように、階層構造になる範囲を定義する要素になります。
article aside nav section
こちらは前回までにでてきた新要素の「article aside nav section」ですね。これらHTML5で文書構造を作成するのに必要な要素がセクショニング・コンテンツとなります。
見出しから内容までの範囲を定義するコンテンツということですが、section要素を例にサンプルソースを書きましたので確認してみたいと思います。
見出しから内容までの範囲を定義するコンテンツということですが、section要素を例にサンプルソースを書きましたので確認してみたいと思います。
【セクショニング・コンテンツ】
＜section＞
＜h1＞HTML5でサイトをつくろう＜/h1＞ ← 見出し
＜p＞h1タイトルの説明文・・・・・・＜/p＞ ← 内容
＜section＞
＜h2＞HTML5でサイトをつくろう＜/h2＞ ← 見出し
＜p＞h2タイトルの説明文・・・・・・＜/p＞ ← 内容
＜/section＞
＜/section＞
※サンプルソースを見ると、section要素ごとに見出しと内容があるのを確認できます。
＜section＞
＜h1＞HTML5でサイトをつくろう＜/h1＞ ← 見出し
＜p＞h1タイトルの説明文・・・・・・＜/p＞ ← 内容
＜section＞
＜h2＞HTML5でサイトをつくろう＜/h2＞ ← 見出し
＜p＞h2タイトルの説明文・・・・・・＜/p＞ ← 内容
＜/section＞
＜/section＞
※サンプルソースを見ると、section要素ごとに見出しと内容があるのを確認できます。
HTML5でサイト構築する場合、このセクショニング・コンテンツを理解することが非常に重要になってきますので、この4つの要素については以前の記事「HTML5で新しく定義された新要素をまとめよう」「HTML5で新しく定義された新要素「section要素」の使い方の基本をまとめよう」と「HTML5で新しく定義された新要素「article要素」の使い方の基本をまとめよう」にまとめています。
●ヘッディング・コンテンツ
●ヘッディング・コンテンツ
ヘッディング・コンテンツはセクションのヘッダー関連する要素が属します。
h1 h2 h3 h4 h5 h6 hgroup
これは名前の通り分かりやすいですね。今までのh要素とhgroupはHTML5から追加された新要素ですが、見出しと副題などをグループ化することができる要素です。こちらはドキュメントの先頭のヘッダー部分というだけでなく、原稿のセクションのあたる部分のヘッダーにも使われます。
【ヘッディング・コンテンツ】
＜section＞
＜hgroup＞
＜h1＞HTML5でサイトをつくろう＜/h1＞
＜h2＞HTML5とCSS3の情報とサンプルをまとめました＜/h2＞
＜/hgroup＞
＜p＞HTML5とは・・・・・＜/p＞
＜/section＞
※新要素hgroupについては以前の記事「HTML5で新しく定義された新要素をまとめよう」にまとめてあります
＜section＞
＜hgroup＞
＜h1＞HTML5でサイトをつくろう＜/h1＞
＜h2＞HTML5とCSS3の情報とサンプルをまとめました＜/h2＞
＜/hgroup＞
＜p＞HTML5とは・・・・・＜/p＞
＜/section＞
※新要素hgroupについては以前の記事「HTML5で新しく定義された新要素をまとめよう」にまとめてあります
●フレージング・コンテンツ
フレージング・コンテンツはドキュメントのテキストのことですが、p要素のように段落そのものを表す要素やdiv要素やsection要素のように複数の段落をまとめるような要素は該当しません。段落の中にあるテキスト範囲を示す場合に使う要素が属します。
a（フレージング・コンテンツのみを含んでいる場合） abbr area（map要素の子孫の場合） audio b bdi bdo blockquote br button canvas cite code command datalist del（フレージング・コンテンツのみを含んでいる場合） dfn em embed i iframe img input ins（フレージング・コンテンツのみを含んでいる場合） kbd keygen label map（フレージング・コンテンツのみを含んでいる場合） mark math menu meter noscript object output progress q ruby s samp script select small span strong sub sup svg textarea time var video wbr Text
span要素、strong要素、em要素などからも分かるように、HTML4でいうインライン要素に近い概念のようです。上記要素の中に赤字でa要素の中にフレージング・コンテンツしかない場合はフレージング・コンテンツになるという条件がありますが、さらにフレージング・コンテンツの理解を深めるためにa要素を例にサンプルソースを書いてみます。
【フレージング・コンテンツにならない場合】
＜a href=”#”＞＜h1＞HTML5でサイトをつくろう＜/h1＞＜/a＞
【フレージング・コンテンツになる場合】
＜h1＞＜a href=”#”＞HTML5でサイトをつくろう＜/a＞＜/h1＞
＜a href=”#”＞＜h1＞HTML5でサイトをつくろう＜/h1＞＜/a＞
【フレージング・コンテンツになる場合】
＜h1＞＜a href=”#”＞HTML5でサイトをつくろう＜/a＞＜/h1＞
ソースを見てみると、h1(ヘッディング・コンテンツ)がa要素の中に入った場合はフレージング・コンテンツになっていません。これはh1要素がフレージング・コンテンツに属していないので、それを囲んだa要素がフレージング・コンテンツにならない形になります。
●エンベッディッド・コンテンツ
エンベッディッド・コンテンツはドキュメントに外部のリソースを組み込むコンテンツや、HTMLではない別の言語で表現するコンテンツを表します。
外部のリソースの例としては、画像、プラグイン、フレーム、ビデオ、canvasなどが挙げられます。またSVG・MathMLなどのHTMLではない別の言語で表されるコンテンツが属します。
●エンベッディッド・コンテンツ
エンベッディッド・コンテンツはドキュメントに外部のリソースを組み込むコンテンツや、HTMLではない別の言語で表現するコンテンツを表します。
外部のリソースの例としては、画像、プラグイン、フレーム、ビデオ、canvasなどが挙げられます。またSVG・MathMLなどのHTMLではない別の言語で表されるコンテンツが属します。
audio canvas embed iframe img math object svg video
●インタラクティブ・コンテンツ
インタラクティブ・コンテンツはユーザーが何か操作をすることができるコンテンツを表します。たとえばハイパーリンクやクックすることで状態を変化させるものが該当します。
a audio button details embed iframe img（usemap属性が存在している場合）input（type属性がHidden状態でない場合）keygen label （type属性がtoolbar状態の場合）object（usemap属性が存在している場合）select textarea video（controls属性が存在している場合）
ユーザーが何かしらの操作ということで、クリックできるものやform関連が多いですね。その中でも分かりやすいクリック関連のbutton要素を例にサンプルソースを書いてみました。
【インタラクティブ・コンテンツ】
＜button name=”sample” type=”button” onclick=”alert”(‘インタラクティブ・コンテンツです！’)”＞
クリック！
＜/button＞
＜button name=”sample” type=”button” onclick=”alert”(‘インタラクティブ・コンテンツです！’)”＞
クリック！
＜/button＞
このボタンをクリックするとアラートが表示されますが、ボタンをクリックするのはユーザーですからbutton要素がインタラクティブ・コンテンツに属しているのが分かります。
●セクショニング・ルート
一部の要素は、セクショニング・ルートと呼ばれるカテゴリーに属します。通常ドキュメントは章・節・項などの階層を持ちます。
しかし、セクショニング・ルートに属する要素の中のコンテンツは、その前後のコンテンツとは独立したコンテンツのようにみなされます。これらの要素の中にあるセクションと見出しは、祖先のアウトラインには現れません。
●セクショニング・ルート
一部の要素は、セクショニング・ルートと呼ばれるカテゴリーに属します。通常ドキュメントは章・節・項などの階層を持ちます。
しかし、セクショニング・ルートに属する要素の中のコンテンツは、その前後のコンテンツとは独立したコンテンツのようにみなされます。これらの要素の中にあるセクションと見出しは、祖先のアウトラインには現れません。
blockquote body details fieldset figure td
こちらについてはアウトラインの関係がでてきますので「コンテンツ・モデル」「アウトライン」のまとめが終わった後にまた取り上げたいと思います。
以上の7つが主に代表されるカテゴリーとプラスして覚えたいセクショニング・ルートですが、これらのカテゴリーは【コンテンツ・モデル】を考える場合に、とても重要になってくるのでしっかり理解しておきましょう。また、コンテンツ・モデルについては次回の記事で取り上げる予定です。
以上の7つが主に代表されるカテゴリーとプラスして覚えたいセクショニング・ルートですが、これらのカテゴリーは【コンテンツ・モデル】を考える場合に、とても重要になってくるのでしっかり理解しておきましょう。また、コンテンツ・モデルについては次回の記事で取り上げる予定です。
profile
●ハヤシユタカ 1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークスを立ち上げ、WEBの企画・制作、セミナー講師やWEB運用の企業研修などを行う。また、WEB制作に役立つ情報を集めて制作のヒントになるブログを更新している。
●HTML5でサイトをつくろう：http://www.html5-memo.com/
●Webデザインクリップ：http://webdesignmatome.com/
●ハヤシユタカ 1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークスを立ち上げ、WEBの企画・制作、セミナー講師やWEB運用の企業研修などを行う。また、WEB制作に役立つ情報を集めて制作のヒントになるブログを更新している。
●HTML5でサイトをつくろう：http://www.html5-memo.com/
●Webデザインクリップ：http://webdesignmatome.com/
