◀ 2.

HTML style要素の使い方｜type・media属性とlinkとの使い分け

▶

編集

この記事の要点

<style> 要素は HTML 内にCSS を直接書き込むためのタグ。通常は <head> 内に置く
type="text/css" は HTML5 では省略可（デフォルトが CSS）
media 属性で適用条件を絞れる（media="screen and (max-width: 600px)"）
CSS 組み込みは 3 方式: <style> 要素 / <link rel="stylesheet"> / style 属性
CSP（Content Security Policy）の style-src 制限下では nonce / hash が必要

style 要素とは

<style> 要素は HTML 内に CSS を直接記述するための要素です。要素内容としてスタイルシート言語（通常は CSS）を書き、その HTML 文書内の要素にスタイルを適用します。通常は <head> 内に配置します。

基本構文

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプル</title>
  <style>
    body { font-family: sans-serif; }
    p    { color: red; font-size: 16px; }
    .box { padding: 1em; border: 1px solid #ccc; }
  </style>
</head>
<body>
  <p>赤い段落</p>
  <div class="box">枠つきボックス</div>
</body>
</html>

主な属性

属性	意味	例
`type`	MIME タイプ。HTML5 では省略可（既定 `text/css`）	`type="text/css"`
`media`	適用するメディア条件（メディアクエリ）	`media="(max-width:600px)"`
`nonce`	CSP の `style-src 'nonce-xxx'` と照合する識別子	`nonce="abc123"`
`title`	代替スタイルシートのタイトル	`title="Dark"`

media 属性で条件付き適用

media 属性で、その <style> ブロック自体を特定の条件下でのみ評価させられます。CSS 内の @media と等価ですが、ブロック単位で切り分けたいときに便利です。

<!-- 印刷時のみ適用 -->
<style media="print">
  body { font-size: 12pt; color: black; }
  nav, .ad { display: none; }
</style>

<!-- スマホサイズのみ適用 -->
<style media="(max-width: 600px)">
  .sidebar { display: none; }
  main { padding: 0.5em; }
</style>

CSS の組み込み方 3 方式

HTML に CSS を適用する方法は 3 つあります。<style> 要素はそのうちの 1 つです。

方式	書き方	適用範囲	キャッシュ
<style> 要素	`<style>p{...}</style>`	その HTML 内	HTML と同時にキャッシュ
<link> で外部 CSS	`<link rel="stylesheet" href="style.css">`	リンクされたページ全体	CSS 単位で長期キャッシュ可
style 属性（インライン）	`<p style="...">`	その要素のみ	キャッシュ不可

style 要素と link 要素の使い分け

シーン	推奨	理由
共通 CSS を複数ページで使う	<link> 外部 CSS	キャッシュが効く、保守が楽
そのページ専用のスタイル	<style>	HTTP リクエスト削減
Critical CSS（初回描画分）	<style> インライン	レンダリング高速化（LCP 改善）
HTML メール	style 属性 + <style>	メールクライアントが外部 CSS を読まない

記述位置

仕様上は <head> 内が標準ですが、HTML5 では <body> 内にも書けます（scoped 属性は廃止されたため、書いた位置に関わらず全体に適用）。Web パフォーマンスの観点では、初回描画に必要な Critical CSS は <head> の最後に置くと描画ブロッキングを最小化できます。

CSP（Content Security Policy）と style 要素

セキュリティ強化のため style-src 'self' のような CSP を設定しているサイトでは、<style> 内のインライン CSS がブロックされます。回避策は次の 3 つです。

外部 CSS ファイルに切り出す（最も安全）
nonce を付与: <style nonce="abc123"> + CSP style-src 'nonce-abc123'
hash で許可: CSP style-src 'sha256-xxx' に該当ハッシュを記載

よくある誤り

<body> 直下に巨大な <style> — レイアウト確定が遅れ、FOUC（スタイルなし表示のチラつき）の原因
同じ CSS を全ページで <style> に貼る — キャッシュが効かず、ダウンロード量が増える。共通分は外部 CSS へ
<style> 内に HTML タグを書く — パースエラー。中身は CSS のみ
style 属性と混同 — <style> は要素、style="..." は属性

FAQ

Q: type="text/css" は必要？
A: HTML5 では不要です。ただし古いブラウザ / メールクライアント向けに保険として付ける現場もあります。

Q: scoped 属性は使える？
A: 仕様から削除されました。スコープ化したい場合は CSS Modules / Shadow DOM / コンポーネントフレームワーク（Vue の <style scoped> 等）を使います。

Q: 複数の <style> を書ける？
A: 書けます。出現順で評価され、同じ優先度なら後勝ちです。

Q: <style> 内に @import で別の CSS を呼べる？
A: 書けますが、@import は読み込みが直列になりレンダリングを遅らせます。<link> 要素を並列で複数指定するほうがパフォーマンス的に有利です。

Q: 動的に追加・削除できる？
A: JavaScript から document.createElement('style') で生成して head に appendChild すれば動的に CSS を注入できます。CSS-in-JS ライブラリの多くはこの仕組みでスタイルを差し込みます。

パフォーマンス上の注意

巨大な <style> ブロックは HTML サイズを膨らませ、初回ダウンロード時間を伸ばします。「初回描画に絶対必要な分」だけを <head> に直書きし、残りは外部 CSS ファイルへ分離する Critical CSS 抽出が現代的なアプローチです。

レンダーブロッキング: <head> 内の CSS は読み込み終わるまで描画が始まらない
Critical CSS: First View に必要な分だけインライン化
残りの CSS: <link rel="stylesheet"> または media="print" onload="this.media='all'" テクニックで非同期読み込み

ページ一覧

その他