styleタグ -HTML 文書内に CSSを記述する｜HTML辞典
<style>タグとは？
<style> タグは、HTML 文書内に CSS（カスケーディングスタイルシート）を記述するためのタグです。
ページのデザインを制御するために使用され、通常は <head> 内に配置されます。
コンテンツモデル
メタデータコンテンツ（Metadata Content）。
閉じタグの有無
<style> は 開始タグ（<style>）と閉じタグ（</style>）の両方が必要 です。
基本的な記述方法
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: darkblue;
}
</style>
</head>
使用できる主な属性
| 属性名 | 説明 | 例 |
|---|---|---|
type | スタイルシートの MIME タイプ（通常 text/css） | <style type="text/css"> |
media | 適用するメディア（例: screen, print） | <style media="screen"> |
CSSを使ったデザイン変更
<style> を使用すると、HTML 内に直接 CSS を記述できます。
<style>
p {
font-size: 16px;
color: #333;
}
</style>
適切な使用例
✅ <head> 内に CSS を記述する
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
</style>
</head>
✅ 特定のメディア向けのスタイルを適用する
<style media="print">
body {
background: none;
color: black;
}
</style>
✅ <style> を <body> 内に記述して局所的に適用する（非推奨）
<body>
<style>
h2 {
color: green;
}
</style>
<h2>この見出しは緑色になります</h2>
</body>
（通常は <head> 内に記述するのが推奨されます。）
適切でない使用例（誤った使い方）
❌ <style> タグを <head> 以外で使用する（非推奨）
<!-- NG: <body> 内で <style> を記述 -->
<body>
<style>
p {
color: red;
}
</style>
</body>
✅ 正しい書き方（<head> 内に配置）
<head>
<style>
p {
color: red;
}
</style>
</head>
❌ <style> を <link> の代わりに使用して外部スタイルシートを適用しようとする
<!-- NG: 外部 CSS を <style> で読み込もうとする -->
<style src="styles.css"></style>
✅ 正しい書き方（外部 CSS は <link> で適用）
<link rel="stylesheet" href="styles.css">
<style>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<style> | 内部 CSS を記述 | HTML 内に直接 CSS を定義 | 簡単なスタイルの適用 |
<link> | 外部 CSS を適用 | href で外部ファイルを読み込む | ページ全体のスタイル管理 |
style（HTML属性） | 要素ごとにスタイルを適用 | インラインスタイルとして記述 | 特定の要素のみに適用 |
使用上の注意点
✅ <style> は通常 <head> 内に記述する
✅ 外部 CSS を使用する場合は <link> を使用する
<style>はページごとに CSS を記述するため、サイト全体の管理には向かない。
✅ media 属性を活用し、印刷用などのスタイルを適用する
media="print"を使うと、印刷時のスタイルを指定できる。
関連タグ
まとめ
<style> タグは、HTML文書内で CSS を記述し、ページのデザインを設定するためのタグ です。
簡単なスタイルの適用に適していますが、大規模なスタイル管理には <link> を使用するのが推奨されます。
