HTML Living Standard/style

style 要素

<style> 要素は、HTMLドキュメント内で直接CSS（カスケーディングスタイルシート）を記述するために使用されます。この要素は <head> 要素内に配置され、文書全体のスタイルを定義します。外部スタイルシートを使用する代わりに、内部CSSを使用する際に用いられます。

概要

カテゴリ: メタデータコンテンツ
使用できる文脈: <head> 要素内
内容モデル: 文字データ（CSSコード）
タグの省略: 開始タグと終了タグのどちらも省略可能（ただし、推奨されない）
属性:
- type – スタイルシートのタイプを指定（通常は text/css）
- media – メディアタイプに基づいたスタイルの適用条件を指定
- scoped – 以前はスタイルのスコープを制限するために使用されていたが、現在は廃止されている

使用例

基本的なCSSの記述

HTML内でCSSを記述する最も基本的な方法は、<style> 要素を使って内部スタイルシートを作成することです。以下の例では、<style> 要素内にCSSを記述し、ページの背景色を変更しています。

<head>
  <style>
    body {
      background-color: lightblue;
    }
  </style>
</head>

この例では、body 要素の背景色を lightblue に設定しています。

メディアクエリを使用したスタイルの適用

<style> 要素内でメディアクエリを使用して、異なるデバイスに応じたスタイルを指定することができます。以下は、画面の幅が600px以下のデバイスに対して異なるスタイルを適用する例です。

<head>
  <style>
    body {
      background-color: lightblue;
    }

    @media screen and (max-width: 600px) {
      body {
        background-color: lightgreen;
      }
    }
  </style>
</head>

この例では、画面の幅が600px以下のデバイスで表示されるページの背景色が lightgreen に変更されます。

`type` 属性の使用

<style> 要素は、デフォルトでCSSを指定するために使用されますが、type 属性を使ってスタイルシートのメディアタイプを明示することもできます。通常、CSSの場合は type="text/css" を指定します。

<head>
  <style type="text/css">
    body {
      color: black;
      font-family: Arial, sans-serif;
    }
  </style>
</head>

type="text/css" は省略可能で、明示的に指定することは不要です。

使用しないべき場面

<style> 要素はページ内で直接CSSを記述するため、特に小規模なプロジェクトやテストの場合には便利ですが、大規模なプロジェクトや保守性の観点からは外部スタイルシートの使用が推奨されます。<style> 要素を使用すると、スタイルの管理がHTMLコードと一体化し、可読性や保守性が低下する可能性があります。

廃止された属性

以前、scoped 属性が <style> 要素に対して使用されていましたが、この属性は現在廃止されました。scoped 属性は、スタイルがその <style> 要素が囲む要素にのみ適用されるように制限するものでしたが、代わりにCSSのセレクタを適切に使用することが推奨されています。

アクセシビリティの考慮事項

type 属性を指定することは通常不要ですが、他のメディアタイプに対応するスタイルを記述する場合は、その属性を明示的に指定することができます。
スタイルシートは、視覚的に障害を持つユーザーに影響を与える可能性があります。アクセシビリティを考慮したスタイルシートの設計が推奨されます。

ベストプラクティス

外部スタイルシートの使用: <style> 要素は便利ですが、特に大規模なプロジェクトでは外部スタイルシート（<link> 要素を使用）を使用する方が管理が容易です。
メディアクエリの活用: レスポンシブデザインを実現するために、<style> 要素内でメディアクエリを活用しましょう。
簡潔なスタイル定義: <style> 要素内に記述するスタイルはできるだけ簡潔で、ページのレイアウトに必要な最小限のCSSを記述するよう心がけましょう。