HTML要素辞書 by Sentaro

<style>

スタイル定義要素。ドキュメントに直接CSSスタイル情報を埋め込むために使用されます。

info

概要

<style> 要素は、HTMLドキュメント内で、そのドキュメントに適用するCSS（カスケーディング・スタイルシート）を定義します。
通常は、ドキュメントの `` 内に配置されますが、HTML5以降は `` 内の特定の場所でも許可されるようになりました（適用範囲が限定されます）。
外部CSSファイルを参照する `` 要素の使用がより一般的で推奨されていますが、単一ページや特定のページ固有の小さなスタイル定義には便利です。

play_circle

デモ (静的表示)

HTML (Source)

Preview (Result)

styleタグで定義されたスタイル

list

属性 (Attributes)

属性名	説明
media	スタイルが適用されるメディア（デバイス、出力方法）を指定するメディアクエリ。例: `screen`, `print`, `(max-width: 600px)`
nonce	コンテンツセキュリティポリシー (CSP) に使用される暗号化ノンス（一度だけ使われるランダムな値）です。セキュリティ対策のために使用されます。
title	代替スタイルシートとして使用される場合のスタイルシート名。ほとんど使われません。

code

実用例

1. 基本的なCSS定義 (head内)

<head>
 ...
 <style>
  body {
   margin: 0;
   padding: 0;
   font-family: sans-serif;
  }
  h1 {
   color: #333;
  }
 </style>
 ...
</head>

2. 特定のメディアに対するスタイル適用

<style media="print">
 /* 印刷時のみ適用されるCSS */
 nav {
  display: none; /* ナビゲーションを非表示に */
 }
</style>

<style media="(max-width: 600px)">
 /* 画面幅が600px以下のデバイスに適用されるCSS */
 .container {
  width: 100%;
 }
</style>

3. body内でのスタイル定義 (非推奨だが可能)

<body>
 <h2>セクションタイトル</h2>
 <style scoped> // scoped属性は廃止されましたが、かつてはbody内で有効でした。現在は非推奨/使用不可。
  h2 {
   color: red; /* このh2に適用される想定だった */
  }
 </style>
 ...
</body>

lightbulb

知っておくべき重要事項

priority_high

配置の推奨
パフォーマンスの観点から、<style>要素は**<head>要素のなるべく上部**に配置することが強く推奨されています。これにより、ブラウザがHTMLのレンダリングを開始する前にスタイルを読み込み、FOUC (Flash of Unstyled Content) を防ぐことができます。

security

セキュリティと<link>要素
複数のページで共通のスタイルを使用する場合、<style>要素で直接記述するよりも、外部ファイルにCSSを記述し `` で読み込む方が、キャッシュが効きやすく、**保守性・再利用性**の点で優れています。

私について利用規約プライバシーポリシー