<style>

対応:		HTML 4（1997）

『style』はHTMLドキュメント内にCSSを直接記述するための要素で、主に『head』内に配置してページ全体のスタイルを定義します。

構文

<!-- head内にCSSを記述する基本的な使い方 -->
<head>
  <style>
    body {
      font-family: sans-serif;
      color: #333;
    }
    h1 {
      color: #0066cc;
    }
  </style>
</head>

<!-- 特定のメディアにのみ適用するCSSを記述 -->
<style media="print">
  .no-print { display: none; }
</style>

主な属性

属性	概要
type	スタイルシートのMIMEタイプを指定します。現在は省略するのが標準的です（省略時は「text/css」とみなされます）。
media	スタイルを適用するメディアタイプをメディアクエリで指定します。省略すると全メディアに適用されます（例: screen, print, (max-width: 768px)）。

サンプルコード

sample_style_tag.html

サンプルページはこちら

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>styleタグサンプル</title>

  <!-- 全メディアに適用するスタイル -->
  <style>
    body {
      font-family: "Helvetica", sans-serif;
      margin: 24px;
      background-color: #f9f9f9;
    }
    .highlight {
      background-color: #ffffcc;
      padding: 4px 8px;
      border-radius: 3px;
    }
  </style>

  <!-- 印刷時のみ適用するスタイル -->
  <style media="print">
    .no-print {
      display: none;
    }
    body {
      font-size: 12pt;
    }
  </style>
</head>
<body>

  <p>これは通常の段落です。</p>
  <p class="highlight">このテキストはハイライトされています。</p>

  <!-- 印刷時には表示しない要素 -->
  <nav class="no-print">
    <a href="/">トップへ</a>
  </nav>

</body>
</html>

実行結果

段落が指定したフォントで表示され、2つ目の段落には薄黄色のハイライトが適用されます。印刷プレビューではナビゲーションが非表示になります。

サンプルページはこちら

概要

『style』要素はページ固有のCSSを記述する際に使います。外部CSSファイルをリンクする『link』要素と比べると、別途ファイルを読み込む必要がないため初回表示がわずかに速くなる場合があります。ただし、複数のページで同じスタイルを使い回せないため、サイト全体で共通するスタイルは外部CSSファイルにまとめることを推奨します。

『media』属性を使うと、画面表示用と印刷用でスタイルを使い分けることができます。例えば『media="print"』とすると、そのスタイルは印刷時・印刷プレビュー時にのみ適用されます。画面サイズに応じたレスポンシブデザインには「(max-width: 768px)」のようなメディアクエリを指定できます。

要素1つだけにスタイルを適用したい場合は、各タグの『style』属性（インラインスタイル）を使うこともできます。スタイルの管理・再利用・保守性を考えると、原則として『style』要素または外部CSSファイルにまとめて記述するのがよいでしょう。

クリティカルCSSのインライン化（パフォーマンス最適化）

ファーストビュー（最初に画面に映る範囲）のレンダリングを高速化するため、初期表示に必要な最低限のCSSを『<style>』でHTMLに直接埋め込む手法を「クリティカルCSSのインライン化」と呼びます。

<head>
  <!-- クリティカルCSS（ファーストビューに必要なスタイルだけ） -->
  <style>
    body { margin: 0; font-family: sans-serif; }
    header { background: #333; color: #fff; padding: 1rem; }
    .hero { height: 400px; background: #f0f0f0; display: flex;
            align-items: center; justify-content: center; }
  </style>

  <!-- 残りのCSSは非同期で読み込む -->
  <link rel="preload" href="/css/style.css" as="style"
        onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="/css/style.css"></noscript>
</head>

JavaScriptでstyleタグを動的に操作する

// styleタグをJavaScriptで動的に追加する
var style = document.createElement("style");
style.textContent = ".modal-open { overflow: hidden; }";
document.head.appendChild(style);

// CSSSheetAPIでルールを動的に追加・削除する
var sheet = document.styleSheets[0]; // 最初のスタイルシートを取得
sheet.insertRule(".highlight { background: yellow; }", sheet.cssRules.length);

// CSS変数（カスタムプロパティ）をJavaScriptから変更する
document.documentElement.style.setProperty("--primary-color", "#e74c3c");

// 変更を元に戻す
document.documentElement.style.removeProperty("--primary-color");

よくあるミス

ミス1: style要素をbody内に書く

『style』要素は『head』の中に配置するのが正しい使い方です。『body』内に書いてもブラウザは解釈してくれる場合が多いですが、HTML仕様上は不正な構造です。また、レンダリングの遅延やスタイルの適用タイミングの問題が起きる可能性があります。

<!-- NG: bodyの中にstyleを書く -->
<body>
  <style>
    p { color: red; }
  </style>
  <p>テキスト</p>
</body>

修正後は次の通りです。

<!-- OK: styleはheadの中に書く -->
<head>
  <style>
    p { color: red; }
  </style>
</head>
<body>
  <p>テキスト</p>
</body>

ミス2: インラインstyle属性とstyleタグの使い分けを誤る

インラインstyle属性（例：<p style="color:red">）は要素1つだけにスタイルを適用します。同じスタイルを複数の要素に適用したい場合は『style』タグ内にCSSクラスとして定義するか、外部CSSファイルを使うのが保守性の観点から適切です。

<!-- NG: 同じスタイルをインラインで何度も書く -->
<p style="color: blue; font-weight: bold;">テキスト1</p>
<p style="color: blue; font-weight: bold;">テキスト2</p>
<p style="color: blue; font-weight: bold;">テキスト3</p>

修正後は次の通りです。

<!-- OK: styleタグでクラスとして定義する -->
<head>
  <style>
    .highlight { color: blue; font-weight: bold; }
  </style>
</head>
<body>
  <p class="highlight">テキスト1</p>
  <p class="highlight">テキスト2</p>
  <p class="highlight">テキスト3</p>
</body>