<style>: スタイル情報要素
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
<style> は HTML の要素で、文書あるいは文書の一部分のスタイル情報を含みます。 <style> 要素を含んでいる文書のコンテンツに適用される CSS を含みます。
試してみましょう
<style> p { color: #26b72b; } code { font-weight: bold; } </style> <p> This text will be green. Inline styles take precedence over CSS included externally. </p> <p style="color: blue"> The <code>style</code> attribute can override it, though. </p> p { color: #f00; } <style> 要素は文書の <head> 要素の中に入れる必要があります。一般に、スタイルを外部スタイルシートに入れて <link> 要素を使用することをより推奨します。
文書に複数の <style> および <link> が含まれている場合、これらは含まれている文書の DOM 上の順序で適用されます。 — 予期しないカスケード問題を防ぐために、含まれている順序が正しいことを確認してください。
<link> 要素と同じ方法で、 <style> 要素に media 属性を付けてメディアクエリーを含めると、ビューポートの幅などのメディア特性に依存して内部スタイルシートを選択的に適用することができます。
属性
この要素にはグローバル属性があります。
media-
この属性はスタイルを適用するメディアを定義します。値はメディアクエリーであり、省略した場合の既定値は
allです。 nonce-
style-src コンテンツセキュリティポリシー内のインラインスクリプトをホワイトリストに入れるために使われる暗号ノンス（ワンタイム番号）です。サーバーはポリシーを送信するたびに一意のノンス値を生成する必要があります。それ以外の方法でリソースのポリシーのバイパスとして推測できないノンスを提供することが重要です。
title-
この属性は代替スタイルシートのセットを指定します。
blockingExperimental-
この属性は、クリティカルなサブリソースの取得時に、特定の処理をブロックすべきであることを明示的に示します。
@importでインポートされたスタイルシートは、ふつうクリティカルなサブリソースと見なされますが、一方でbackground-imageやフォントはそうとはみなされません。render: 画面へのコンテンツの描画がブロックされます。
非推奨の属性
type非推奨;-
この属性は指定すべきではありません。指定した場合、許可される値は空文字列か
text/cssと大文字と小文字を区別せずに一致するものだけです。
例
単純なスタイルシート
以下の例では、文書にとても単純なスタイルシートを適用します。
<!doctype html> <html lang="en-US"> <head> <meta charset="UTF-8" /> <title>Test page</title> <style> p { color: red; } </style> </head> <body> <p>This is my paragraph.</p> </body> </html> 結果
複数の style 要素
この例には、2 つの <style> 要素が含まれています。 — 競合する宣言は、詳細度が同じであれば、後の <style> 要素が優先されることに注意してください。
<!doctype html> <html lang="en-US"> <head> <meta charset="UTF-8" /> <title>Test page</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>This is my paragraph.</p> </body> </html> 結果
メディアクエリーが含まれるもの
この例では一つ前に作ったものに対して、2 番目の <style> 要素に media 属性を設定してあるので、ビューポートが 500px 未満の場合のみ適用されるようにします。
<!doctype html> <html lang="en-US"> <head> <meta charset="UTF-8" /> <title>Test page</title> <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> 結果
技術的概要
| コンテンツカテゴリー | メタデータコンテンツ |
|---|---|
| 許可されている内容 | type 属性に合致するテキストコンテンツ、すなわち text/css。 |
| タグの省略 | どちらのタグも省略できません。 |
| 許可されている親要素 | メタデータコンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | 許可されている role なし |
| DOM インターフェイス | HTMLStyleElement |
仕様書
| Specification |
|---|
| HTML # the-style-element |