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) から抽出したものです。

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応1 あり133.51
type1 あり133.51
media1 あり133.51
title1 あり133.51
scoped19 — 351 なし

55 — 612 3

21 — 55

なし なし なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応118 あり461 あり
type118 あり461 あり
media118 あり461 あり
title118 あり461 あり
scoped なし なし なし

55 — 612 3

21 — 55

なし なし なし

1. 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.

2. This attribute was hidden behind a pref because no other browsers support it (See bug 1291515).

3. 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.

関連情報

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

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