<style>: スタイル情報要素

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

試してみましょう

<style> 要素は文書の <head> 要素の中に入れる必要があります。一般に、スタイルを外部スタイルシートに入れて <link> 要素を使用することをより推奨します。

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

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

属性

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

type

この属性は、スタイル言語を MIME タイプで定義します (文字セットは指定すべきではありません)。この属性は省略可能であり、省略した場合の既定値は text/css です。空文字列と text/css 以外の値は使用されません。 注: 現代のウェブ文書では、この属性を含める理由はほとんどありません。

media

この属性はスタイルを適用するメディアを定義します。値はメディアクエリであり、省略した場合の既定値は all です。

nonce

script-src コンテンツセキュリティポリシー内の行内スクリプトをホワイトリストに入れるために使われる暗号ノンス (ワンタイム番号) です。サーバーはポリシーを送信するたびに一意のノンス値を生成する必要があります。それ以外の方法でリソースのポリシーのバイパスとして推測できないノンスを提供することが重要です。

title

この属性は代替スタイルシートのセットを指定します。

非推奨の属性

scoped

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

メモ: この属性は、 https://github.com/w3c/csswg-drafts/issues/3547 により、将来再導入されるかもしれません。今この属性を使用したい場合は、ポリフィルを利用することができます。

例

単純なスタイルシート

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

<!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 ロール 対応するロールなし
許可されている ARIA ロール 許可されている role なし
DOM インターフェイス HTMLStyleElement

仕様書

Specification
HTML Standard
# the-style-element

ブラウザーの互換性

BCD tables only load in the browser

関連情報