|
|---|
この連載が本になりました！
「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー＆デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き!
HTML5マークアップ 現場で使える最短攻略ガイド
定価：2,808円 （本体2,600円）／形態：B5変 (240ページ)
ISBN：978-4-04-866070-9
HTML5では、新たに加わった要素だけでなく、従来とは意味や使い方が変わった要素もあります。HTML4.01やXHTML1.0から仕様が大きく変更された要素もありますので、しっかり確認しておきましょう。
各要素の解説では、冒頭に「カテゴリー」と「コンテンツモデル」という項目が登場します。カテゴリーとコンテンツモデルについては、第5回を参照して復習してください。
HTML5のグローバル属性
以降の解説で登場する「グローバル属性」とは、すべての要素で使用できる属性のことを表します。HTML5のグローバル属性には、以下のものがあります。
accesskey class contenteditable contextmenu dir draggable dropzone hidden id inert itemid itemprop itemref itemscope itemtype lang spellcheck style tabindex title translate 独自データ属性（data-*）
また、本稿の域を出てしまうので詳細は割愛しますが、JavaScriptで使用するイベントハンドラー（onclickやonsubmitなど）や、WAI-ARIA（W3Cが定めたアクセシビリティ向上のための技術仕様）のroleとaria-*などもグローバル属性です。
style要素
- カテゴリー：メタデータコンテンツ、フローコンテンツ（scoped属性がある場合）
- この要素が使える文脈：scope属性がない場合は、メタデータコンテンツが予想される場所か、head要素の中のnoscript要素の中。scoped属性がある場合は、フローコンテンツが予想される場所（ただし、タブ文字や半角スペース以外のフローコンテンツより前で、かつ、親要素のコンテンツモデルがトランスペアレントでない場合）
- コンテンツモデル：type属性の値によるが、仕様書本文の要件に一致する必要がある
- コンテンツ属性：グローバル属性、media、type、scoped、title（style要素のtitle属性は特別な意味を持っている）
style要素は、従来のHTMLと同じく、埋め込みスタイルを定義する要素です。従来のHTMLではtype属性によるスタイルシート言語の指定が必須でしたが、HTML5ではlink要素でスタイルシートを読み込む場合と同様、type属性のデフォルト値がtext/cssとなり、type属性は省略できるようになりました。
<style>
p {
color: red;
}
</style>
また、style要素は従来、head要素の中でしか利用できませんでしたが、HTML5ではscoped属性を指定することでbody要素の中にも記述できます。
<h2>最新のデジカメに戦前のレンズを付ける方法</h2>
<p class="description">ではまず、以下の記事をご覧ください。</p>
<section>
<style scoped="scoped">
p {
color: red;
}
</style>
<h3>必要なもの</h3>
<p class="text">まずはデジカメを用意します。...</p>
</section>
scoped属性を指定すると、body要素の中にstyle属性を記述できるだけではなく、スタイルにスコープ（有効範囲）を持たせられます。むしろ、scopedという名前からすればこちらが本来の機能と言えるでしょう。scoped属性を指定したstyle要素のスタイルは、自身の親要素とその子要素にのみ適用されます。前のソースコードの例で言えば、class="text"のp要素には適用されますが、class="description"のp要素には適用されません。
scoped属性が付いたstyle要素は、タブ文字や半角スペース以外のフローコンテンツより前に記述する必要があります。一般的には、そのセクションなどの先頭に記述すればよいでしょう。また、コンテンツモデルがトランスペアレントの要素（a要素など）では、scoped属性を指定してもstyle要素は記述できません。
scoped属性の利用シーンとしては、ブログなどで特定の記事内だけで専用のスタイルを使用したい場合が考えられます。ただし、2012年7月現在、ほとんどのブラウザーはscoped属性をサポートしていませんので、フォールバックとしてstyle要素の親要素にid属性を指定し、idセレクターを使ってCSSを記述するとよいでしょう。
<h2>最新のデジカメに戦前のレンズを付ける方法</h2>
<p class="description">ではまず、以下の記事をご覧ください。</p>
<section id="sample">
<style scoped="scoped">
#sample p {
color: red;
}
</style>
<h3>必要なもの</h3>
<p class="text">まずはデジカメを用意します。</p>
</section>
また、HTML5ではなくCSSの仕様ですが、@globalというルールがHTML5の仕様書に記載されています＊1。scoped属性が指定されたstyle要素内で@globalルールを使用すると、そのスタイルは文書全体に適用され、通常のCSSのような扱いになります。
*1 あとにCSSの仕様書に移される予定です
<h2>最新のデジカメに戦前のレンズを付ける方法</h2>
<p class="description">ではまず、以下の記事をご覧ください。</p>
<section>
<style scoped="scoped">
@global p {
color: red;
}
</style>
<h3>必要なもの</h3>
<p class="text">まずはデジカメを用意します。...</p>
</section>
このソースコードの場合、class="text" のp要素にも class="description" のp要素にもスタイルが適用されます。
ポイント
2012年7月現在、scoped属性を手軽に試すには、Chromeの試験運用機能を利用するとよいでしょう。試験運用機能は、アドレスバーに「about:flags」と入力して設定ページを表示し、「<style scoped> を有効にする」を選択してChromeを再起動すると利用できます。
