[38-1] 「コンテンツ・モデル」で要素のルールを見てみよう

HTML5の各要素の「要素内にどんな要素を置くか」には決まったルールがあります。
このルールをコンテンツ・モデル(Content models)といいます

コンテンツ・モデルはすべての要素に定義されています。
(コンテンツ・モデルの一覧表は次回アップ→アップしました。コチラ。)
で、そのとおりに使わないとNG。
ちゃんとしたHTML5のマークアップと言えなくなるんです。

例えば、<p>要素のコンテンツ・モデルは「フレージング・コンテンツ」と定義されています。
「 <p>要素の中にはフレージング・コンテンツしか入れちゃだめ」というルールです。
ですから、<p><h1>〜</h1></p>と書いたらNG。<h1>要素は「ヘディング・コンテンツ」だから。

コンテンツ・モデルには、前回の「カテゴリー」が使われることが多いです。また、カテゴリーに関係ない定義もあり、ざっと下の5パターンに分類されます。

決まったカテゴリーの要素が入る 中に入れていい要素が、前回やった7つのカテゴリーのうちのどれかであると決まってるもの。
空(何も入れない) 中に何も入れてはいけない要素ということ。
終了タグが無い<br><hr>…などの要素です。
特定の要素が入る カテゴリーに関係なく、中に入る要素が決まっているということ。
子孫まで制限される すぐ中に入る要素だけじゃなく、中の中(孫や曾孫)の要素にも「これは入れちゃダメ」と制限があること。
トランスペアレント 自分の親要素(自分が囲まれてる要素)のコンテンツ・モデルを継承していること。

今日は、この5パターンについて説明して行きます。

「決まったカテゴリーの要素が入る」コンテンツ・モデル

ほとんどの要素は、コンテンツ・モデルに、前回やった「7つのカテゴリー」のうちのどれが入るか決められています。1つだけのもあるし、複数のカテゴリーがOKなのもあります。

例えば、<section>要素のコンテンツ・モデルは「フロー・コンテンツ」と「セクショニング・コンテンツ」と決められています。
<section>の中に入れられる要素について、OK例とNG例を見てみましょう。

<section>
	<article>見出しや段落</article> <!-- ←フロー・コンテンツ & セクショニング・コンテンツなのでOK -->
	<h1>見出し</h1> <!-- ←フロー・コンテンツなのでOK -->
	<p>文章</p> <!-- ←フロー・コンテンツなのでOK -->
</section>
<section>
	<style> <!-- ←scoped属性無しで「メタデータ・コンテンツ」なのでNG -->
	p { border: solid 1px #CCC; }
	</style>
</section>

「空(何もいれない)」のコンテンツ・モデル

コンテンツ・モデルが「空(から)」とされているものは、その要素の中に何もコンテンツを入れてはいけないというルール
終了タグの無い br, wbr, hr, img, meta, base, link, script(src属性があるとき) , source, param, embed, area, col, colgroup(span属性があるとき), imput, keygen, command が該当します。

「特定の要素が入る」コンテンツ・モデル

カテゴリーでなく特定の要素が入るルールになっている要素もあります。
具体的な例を見てみましょう。

<table>
	<td>テキスト</td> <!-- ←<table>には1個以上の<tr>が入らなくてはならないのでNG -->
</table>
<table>
	<tr><td>テキスト</td></tr>
</table>

「子孫まで制限される」コンテンツ・モデル

ここまでの3つは「自分の中に入るすぐ下の要素を○○にする」というルールでした。子要素の中に入るものは、子要素のコンテンツ・モデルによる、というかんじで。
でも、子要素だけでなく、子の中に入る子孫の要素も制限するコンテンツ・モデルもあるんです。

例えば<address>要素のコンテンツ・モデルは「フロー・コンテンツ(<header><footer>
<address>をのぞく)」ですが、「子孫にヘディング・コンテンツとセクショニング・コンテンツを含まない」というルールもあります。
<address>要素について、OK例とNG例を見てみましょう

<address>
	<p>HTMLの編集ができるようになるはず!<a>ほんっとにはじめてのHTML</a></p>
 <!-- <p>も孫の<a>はフロー・コンテンツなのでOK -->
</address>
<address>
<p>HTMLの編集ができるようになるはず!<a><h1>ほんっとにはじめてのHTML</h1></a></p>
 <!-- 曾孫の<h1>はヘディング・コンテンツなのでNG -->
</address>

<address>
	<nav>HTMLの編集ができるようになるはず!<a>ほんっとにはじめてのHTML</a></nav>
 <!-- 子の<nav>はセクショニング・コンテンツなのでNG -->
</address>

「トランスペアレント」というコンテンツ・モデル

トランスペアレント・コンテンツ・モデル(Transparent content models)とは、
親要素のコンテンツ・モデルを受け継ぐコンテンツ・モデルです。
親要素に入れられる要素が入るってこと。
トランスペアレント(Transparent)とは「透明」という意味だそうです。
昔は「シースルー(see-through)」なんて言ってた透け感がある服(の素材)も、今はトランスペアレントって言うんだって。

例えば<a>要素のコンテンツ・モデルは「トランスペアレント」です。
OK例とNG例を見てみましょう

<section>
	<a><mark>ほんっとにはじめてのHTML</mark>を更新しました。</a>
</section>
<!-- <section>のコンテンツ・モデルはフロー・コンテンツなので、
<a>もフロー・コンテンツを継承しています。
<mark>はフロー・コンテンツなのでOK -->
<em>
	<a><h1>ほんっとにはじめてのHTML</h1>を更新しました。</a>
</em>
<!-- <em>のコンテンツ・モデルはフレーズ・コンテンツなので、
<a>もフレーズ・コンテンツを継承。
<h1>はヘディング・コンテンツなのでNG -->

次回予告

いかがでしたか? こうやってみると、各要素をその役目のとおりに使っていれば、むずかしいルールではないようですよね。

ただ、今日の書き方で「○○のコンテンツ・モデルは xxx なので…」と言ってるけど「コンテンツ・モデルは xxx」の部分が「知らないよ。何それ?」と、納得いかなかったのではないでしょうか?
そうなんです。まだ全然触れていないことを言ってます。すみません。

で、これを次回の「コンテンツ・モデル」の一覧で紹介します。
これで今日の「○○のコンテンツ・モデルは xxx なので…」がわかるはず! 各要素ごとに決まっているコンテンツ・モデルを一覧表にまとめます。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.