<style> スタイル情報要素

試してみましょう

<style>
  p {
    color: #26b72b;
  }
  code {
    font-weight: bold;
  }
</style>

<p>
  このテキストは緑色になります。インラインスタイルは、外部から読み込まれた CSS よりも優先されます。
</p>

<p style="color: blue">
  ただし、<code>style</code> 属性で上書きすることは可能です。
</p>

p {
  color: red;
}

属性

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

blocking

この属性は、重要なサブリソースの取得時に、特定の処理をブロックすべきであることを明示的に示します。@import でインポートされたスタイルシートは、ふつう重要なサブリソースと見なされますが、一方で background-image やフォントはそうとはみなされません。ブロック対象となる操作は、以下の一覧に挙げるブロック対象トークンの空白区切りリストでなければなりません。現在、トークンは次の 1 つだけです。

• render: 画面へのコンテンツの描画がブロックされます。

メモ: style 要素は文書の <head> 内に含まれる場合のみ、レンダリングをブロックする可能性があります。デフォルトで、style 要素が <head> 内にある場合は、ブラウザーが構文解析中にそれを検出した際にレンダリングをブロックします。スクリプトを介して動的にそのような style 要素を追加する場合、レンダリングをブロックさせるには、さらに blocking = "render" を設定する必要があります。

media

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

nonce

暗号学的ノンス (number used once) で、style-src コンテンツセキュリティポリシー内のインラインスタイルを許可するために使用されます。サーバーはポリシーを送信するたびに一意のノンス値を生成する必要があります。それ以外の方法でリソースのポリシーのバイパスとして推測できないノンスを提供することが重要です。

title

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

非推奨の属性

type

この属性は指定すべきではありません。指定した場合、許可される値は空文字列か text/css と大文字と小文字を区別せずに一致するものだけです。

使用上の注意

<style> 要素は、通常、文書の <head> 内に記載されます。また、任意の要素を含めることができる <template> 要素のテンプレートコンテンツ内でも使用できます。<body> 内では、親要素の最初の子として使用できます。

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

<link> 要素と同じように、<style> 要素にはメディアクエリーを含む media 属性を指定できます。これにより、ビューポートの幅などのメディア特性に応じて、内部スタイルシートを選択的に適用できます。

body 内での <style> の使用

<style> 要素は、<body> などのフローコンテンツが想定される場所でも使用できます。ただし、その親要素の最初の子であり、スタイルシートがその親要素と子孫だけをスタイル設定する場合に限ります。

• すべてのスタイルルールは、@scope { ... } や @scope to (.x) { ... } のようにスコープルートセレクターを伴わない @scope ルールの内側になければなりません。このような @scope ルールのスコープルートは <style> 要素の親になります。このルール自体は、@media、@supports、@container、@starting-style、@layer などのルールの内側に置くこともできます。
• @scope (.card) { ... } のようにスコープルートセレクターを伴う @scope ルールも、スコープルートセレクターを伴わない @scope ルールの内側に置く必要があります。
• スタイルシートに @import ルールを含めてはいけません。

ブラウザーは body 内にある <style> 要素を適用しますが、これらのルールに従わないものは無効な HTML です。このルールにより、body 内の <style> 要素が、親要素以外の、すでにブラウザーによって描画された可能性のあるコンテンツを再スタイル設定することを防ぎます。

@font-face、@keyframes、@property などのアットルールは、文書全体で使う名前を定義します。すでに描画された可能性のあるコンテンツのスタイルが変わるのを避けるため、このような名前は <style> 要素の親の内側でのみ使用し、文書内の他の場所では使われていない名前を選んでください。

例

基本的なスタイルシート

以下の例では、文書に短いスタイルシートを適用します。

<!doctype html>
<html lang="ja-JP">
  <head>
    <meta charset="UTF-8" />
    <title>テストページ</title>
    <style>
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>これは段落です。</p>
  </body>
</html>

結果

<style> を <template> の中で使用

<style> 要素は、<template> 要素の内部に配置することも可能です。スタイルは、テンプレートのコンテンツがインスタンス化され、文書内に挿入されるまでは有効になりません。

<template id="card-template">
  <style>
    .card {
      border: 1px solid #cccccc;
      padding: 1rem;
      border-radius: 0.5rem;
    }
  </style>

  <div class="card">テンプレートコンテンツ</div>
</template>

複数の style 要素

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

<!doctype html>
<html lang="ja-JP">
  <head>
    <meta charset="UTF-8" />
    <title>テストページ</title>
    <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>これは段落です。</p>
  </body>
</html>

結果

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

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

<!doctype html>
<html lang="ja-JP">
  <head>
    <meta charset="UTF-8" />
    <title>テストページ</title>
    <style>
      p {
        color: white;
        background-color: blue;
        padding: 5px;
        border: 1px solid black;
      }
    </style>
    <style media="(width < 500px)">
      p {
        color: blue;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <p>これは段落です。</p>
  </body>
</html>

結果

body 内のスコープ付きスタイル

この例では、<style> 要素は <aside> 要素の最初の子です。そのルールはスコープルートセレクターを伴わない @scope ルールの内側にあるため、<aside> とその子孫だけに適用されます。

<aside>
  <style>
    @scope {
      :scope {
        background-color: lightyellow;
        padding: 0 1rem;
      }
      p {
        font-weight: bold;
      }
    }
  </style>
  <p>ご存じですか？タコには心臓が 3 つあります。</p>
</aside>
<p>この段落は aside の外側にあるため、スタイル設定されません。</p>

@scope ルールの外側に p { margin: 0; } のようなルールを追加すると、<aside> に限定されないため HTML は無効になります。

結果

技術的概要

仕様書

ブラウザーの互換性

関連情報

• 文書に外部スタイルシートを適用することができる <link> 要素
• 代替スタイルシート