HTML の <style> 要素は、文書あるいは文書の一部分のスタイル情報を含みます。 <style> 要素を含んでいる文書のコンテンツに適用される CSS を含みます。

<style> 要素は文書の <head> 又は <body> の中に入れることができ、スタイルは適用されますが、整理上の理由でスタイルは <head> に入れることをお勧めします。 — コンテンツと表現をできるだけ分離したほうがはるかに良いからです。もちろん、スタイルを外部スタイルシートに入れて <link> 要素を使用することをより推奨します。

文書に複数の <style> 及び <link> が含まれている場合、これらは含まれている文書の DOM 上の順序で適用されます。 — 予期しないカスケード問題を防ぐために、含まれている順序が正しいことを確認してください。

<link> 要素と同じ方法で、 <style> 要素に media 属性を付けてメディアクエリを含めると、ビューポートの幅などのメディア特性に依存して内部スタイルシートを選択的に適用することができます。

属性

この要素にはグローバル属性があります。

type
この属性は、スタイル言語を MIME タイプで定義します (文字セットは指定すべきではありません)。この属性は省略可能であり、省略した場合の既定値は text/css です。 — 現代のウェブ文書では、これを含める理由はほとんどありません。
media
この属性はスタイルを適用するメディアを定義します。値はメディアクエリであり、省略した場合の既定値は all です。
nonce
script-src コンテンツセキュリティポリシー内の行内スクリプトをホワイトリストに入れるために使われる暗号ノンス (ワンタイム番号) です。サーバーはポリシーを送信するたびに一意のノンス値を生成する必要があります。それ以外の方法でリソースのポリシーのバイパスとして推測できないノンスを提供することが重要です。
title
この属性は代替スタイルシートのセットを指定します。

非推奨の属性

scoped
この属性が指定された場合、スタイルは、その親要素および親要素の子要素にのみ適用されます。

CSS でのスタイル付け

<style> 要素自身には視覚表現がありませんので、スタイル付けの考慮事項はありません。

単純なスタイルシート

以下の例では、文書にとても単純なスタイルシートを適用します。

<!doctype html>
<html>
<head>
  <style>
    p {
      color: red;
    }
  </style> 
</head>
<body>
  <p>This is my paragraph.</p>
</body>
</html>

複数の style 要素

この例には、二つの <style> 要素が含まれています。 — 競合する宣言は、詳細度が同じであれば、後の <style> 要素が優先されることに注意してください。

<!doctype html>
<html>
<head>
  <style>
    p {
      color: white;
      background-color: blue;
      padding: 5px;
      border: 1px solid black;
    }
  </style> 
  <style>
    p {
      color: blue;
      background-color: yellow;
    }
  </style> 
</head>
<body>
  <p>This is my paragraph.</p>
</body>
</html>

メディアクエリが含まれるもの

この例では一つ前に作ったものに対して、二番目の <style> 要素に media 属性を設定してあるので、ビューポートが 500px 未満の場合のみ適用されるようにします。

<!doctype html>
<html>
<head>
  <style>
    p {
      color: white;
      background-color: blue;
      padding: 5px;
      border: 1px solid black;
    }
  </style> 
  <style media="all and (max-width: 500px)">
    p {
      color: blue;
      background-color: yellow;
    }
  </style> 
</head>
<body>
  <p>This is my paragraph.</p>
</body>
</html>

技術的概要

コンテンツカテゴリ メタデータコンテンツscoped 属性が提供された場合: フローコンテンツ
許可されている内容 type 属性に合致するテキストコンテンツ、すなわち text/css
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 メタデータコンテンツを受け入れるすべての要素
許可されている ARIA ロール なし
DOM インターフェイス HTMLStyleElement

仕様書

仕様書 状態 備考
HTML Living Standard
style の定義
現行の標準  
HTML5
style の定義
勧告 HTML 4.01 Specification から変更なし
HTML 4.01 Specification
style の定義
勧告  

ブラウザーの対応

以下の情報は MDN の Github (https:/github.com/mdn/browser-compat-data) から抽出したものです。

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 3Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 6Safari iOS 完全対応 1Samsung Internet Android 完全対応 あり
typeChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 3Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 6Safari iOS 完全対応 1Samsung Internet Android 完全対応 あり
mediaChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 3Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 6Safari iOS 完全対応 1Samsung Internet Android 完全対応 あり
titleChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 3Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 6Safari iOS 完全対応 1Samsung Internet Android 完全対応 あり
scoped
非推奨非標準
Chrome 未対応 19 — 35
無効
未対応 19 — 35
無効
無効 From version 19 until version 35 (exclusive): this feature is behind the Enable <style scoped> preference (needs to be set to true). To change preferences in Chrome, visit chrome://flags.
Edge 未対応 なしFirefox 未対応 55 — 61
補足 無効
未対応 55 — 61
補足 無効
補足 This attribute was hidden behind a pref because no other browsers support it (See bug 1291515).
無効 From version 55 until version 61 (exclusive): this feature is behind the layout.css.scoped-style.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
未対応 21 — 55
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 未対応 55 — 61
補足 無効
未対応 55 — 61
補足 無効
補足 This attribute was hidden behind a pref because no other browsers support it (See bug 1291515).
無効 From version 55 until version 61 (exclusive): this feature is behind the layout.css.scoped-style.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
未対応 21 — 55
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報

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

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