概要
Style 要素は、文書のスタイル情報を含みます。スタイル情報は、この要素内に CSS の文法で記述します。デフォルトでは、この要素内に記述するスタイルが CSS であると想定されています。
| コンテンツカテゴリ | メタデータコンテンツ、scoped 属性が提供された場合: フローコンテンツ |
|---|---|
| 許可された内容 | type 属性に合致するテキストコンテンツ、すなわち text/css。 |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可された親要素 | scoped 属性がない場合: メタデータコンテンツを受け入れる要素、または <head> 要素の子要素である <noscript> 要素。scoped 属性がある場合: フローコンテンツを受け入れる要素、ただし要素間のホワイトスペースおよび他の <style> を除くあらゆるフローコンテンツより前に配置しなければならない。また、コンテンツモデルがトランスパレントである要素の子に配置してはならない。 |
| DOM インターフェイス | HTMLStyleElement |
属性
他のすべての HTML 要素と同様に、この要素はグローバル属性を持ちます。
type- この属性は、スタイル言語を MIME タイプで定義します (文字セットは指定すべきではありません)。この属性は省略可能であり、省略した場合の既定値は
text/cssです。
【訳注: 省略時の動作は単に主用な実装の挙動にすぎませんでしたが、HTML5 で正式な仕様となりました。script 要素の type 属性についても同様です。】 media- このスタイルを適用するメディア。メディアクエリを指定します。値はメディアクエリであり、省略した場合の既定値は
allです。 scoped- この属性が指定された場合、スタイルは、その親要素にのみ適用されます。省略した場合、スタイルは文書全体に適用されます。WhatWG 仕様 を参照してください。
title- 代替のスタイルシートセットを指定します。
disabled- この属性を記述すると、要素内に指定されたスタイル規則が
Documentに適用されなくなります。
例
シンプルなスタイルシート
<style type="text/css">
body {
color:red;
}
</style>
スコープ限定のスタイルシート
<article>
<div>The scoped attribute allows for you to include style elements mid-document.
Inside rules only apply to the parent element.</div>
<p>This text should be black. If it is red your browser does not support the scoped attribute.</p>
<section>
<style scoped>
p { color: red; }
</style>
<p>This should be red.</p>
</section>
</article>
実動サンプル
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| WHATWG HTML Living Standard style の定義 |
現行の標準 | HTML5 から変更なし |
| HTML5 style の定義 |
勧告 | scoped 属性を追加 |
| HTML 4.01 Specification style の定義 |
勧告 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| 基本サポート | (有) | 1.0 (1.7 or earlier) | (有) | (有) | (有) |
scoped |
20[1] | 21.0 (21.0)[2] | 未サポート | 未サポート | 未サポート |
| 機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | (有) | 1.0 (1.7 or earlier) | (有) | (有) | (有) |
scoped |
? | 25.0 (25.0)[2] | 未サポート | 未サポート | 未サポート |
[1] Chrome 20 から 34 では、"Enable <style scoped>" または "experimental WebKit features" フラグを chrome://flags で有効にすることでサポートされます。コードの複雑さを理由として、Chrome 35 から削除されています。
[2] Gecko 20 以降は :scope 疑似クラスを実装していますが、設定項目 layout.css.scope-pseudo.enabled に true を設定しなければなりません。これは Nightly および Aurora テストバージョンのみデフォルトで有効です。
関連情報
- 外部のスタイルシートを使用することを可能にする
<link>要素