Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

style 要素

概要

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
The definition of 'style' in that specification.
Living Standard HTML5 から変更なし
HTML5
The definition of 'style' in that specification.
勧告 scoped 属性を追加
HTML 4.01 Specification
The definition of 'style' in that specification.
勧告  

ブラウザ実装状況

機能 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.enabledtrue を設定しなければなりません。これは Nightly および Aurora テストバージョンのみデフォルトで有効です。

関連情報

  • 外部のスタイルシートを使用することを可能にする <link> 要素

ドキュメントのタグと貢献者

 このページの貢献者: yyss, ethertank, Marsf
 最終更新者: yyss,