記事のタイトル
記事の本文
<style>の設定は、HTML4.01やXHTML1.0では<html>～</head>内での記述のみが許可されていました。しかし、ブログなどでは記事のデザインを部分的にカスタマイズするため、<style>の設定を本文中に記述するケースが多く見られ、文法違反となっていました。
そこで、HTML5では<style>にscoped属性を指定することによって<body>～</body>内に記述できるようになっています。
<body>
<h1>サイト名</h1>
<div id="content">
<style scoped>
h1{
color:red;
}
</style>
<h1>記事のタイトル</h1>
<p>記事の本文</p>
</div>
</body>
ただし、scoped属性を指定した<style>の設定は、親要素内のコンテンツに対してのみ有効と定義されています。そんため、右のh1{～}の設定は<style scoped>の親要素である<div id="content">内の<h1>のみに適用され、「記事のタイトル」のみが赤色で表示されます。
記事の本文
しかし、現在のところscoped属性に対応したブラウザはありません。未対応のブラウザの場合、<style scoped>の設定はページ全体に適用され、<h1>でマークアップした「サイト名」と「記事のタイトル」の両方が赤色で表示されてしまいます。そのため、将来的にscopec属性がサポートされても、古いブラウザとの表示の違いが問題になることが考えられます。
Chrome 19では暫定的にscoped属性をがサポートされています。表示を確認するには「chrome://flags」で試験運用機能の設定画面を開き、「Enable <style scoped>」を有効にします。ただし試験運用機能を有効化したことによって生ずるトラブルに関しては一切の保証がありませんので、警告をよく読んで利用する必要があります。
そこで、<style>style scoped>を利用する場合には、スタイルシートの設定を親要素内のコンテンツのみに適用するように記述しておきます。たとえば、右のように親要素内のコンテンツを<div id="post">でマークアップし、スタイルシートの設定を#post h1{～}と指定すると、scoped属性に未対応のブラウザでも「記事のタイトル」のみを赤色で表示することができます。また、scoped属性に対応したブラウザでも同じ表示になることが期待されます。
<body>
<h1>サイト名</h1>
<div id="content">
<style scoped>
#post h1{
color:red;
}
</style>
<div id="post">
<h1>記事のタイトル</h1>
<p>記事の本文</p>
</div>
</div>
</body>
記事の本文
ブラウザのscoped属性への対応によって表示に違いが出るのを防ぐため、スタイルシートの設定を<body>内に記述する場合には、<style>以外の新しいタグを使用した方がよいのではといった意見もあります。
HTML5の文法チェックを行うW3Cのバリデータでは、<style scoped>の記述があると「サポートしているブラウザがありません」といったエラーが出力されます。バリデータについてはp.47を参照してください
<style scoped>は、「フロー・コンテンツ」に属する要素として扱われます。そのため、<div>や<section>などの中に記述することはできますが、<p>の中に記述することはできません。これは<p>の中に記述できるのが「フレージング・コンテンツ」に属する要素のみと定義されているためです。
「フロー・コンテンツ」や「フレージング・コンテンツ」といったHTML5における要素の分類についてはP.54を参照してください。