CSS ・ CSSの記法
内部スタイルシート
style要素にCSSを書く
HTMLファイルの head の中に style 要素を置き、その中にCSSを書く方法です。そのページだけに適用されます。
01
サンプルコード
HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <meta charset="UTF-8">
5 <title>内部スタイルシート</title>
6 <style>
7 h1 {
8 color: #7d5411;
9 }
10 .lead {
11 background: #fff3e4;
12 padding: 8px 12px;
13 }
14 </style>
15</head>
16<body>
17 <h1>メニュー</h1>
18 <p class="lead">このページの見た目は head の style に書いています。</p>
19</body>
20</html>
02
実行結果
ブラウザでの表示head の style 要素に書いたCSSが適用されています
03
解説
内部スタイルシートは、HTMLの head の中に style 要素を書き、その中にCSSを記述する方法です。「埋め込みスタイルシート」とも呼ばれます。
CSSを別ファイルにしないので、HTMLファイル1つで完結します。練習用のページや、そのページだけで使う小さなスタイルを書くときに便利です。
一方で、複数のページで同じCSSを使い回せないため、ページが増えると同じ記述をあちこちに書くことになります。サイト全体で使うスタイルは外部スタイルシートにまとめましょう。
04
応用例・注意点
3つの書き方の比較
| 書き方 | 説明 |
|---|---|
外部スタイルシート | 別ファイル。複数ページで共有でき、管理しやすい |
内部スタイルシート | head の style 要素に書く。そのページだけに効く |
インラインスタイル | 要素の style 属性に書く。その要素だけに効く |
外部スタイルシートと組み合わせる
共通部分は外部CSS、そのページだけの調整は style で書けます。後に書いたほうが優先されます（詳細度が同じ場合）。
HTML
1<head>
2 <link rel="stylesheet" href="style.css">
3 <style>
4 /* このページだけの調整 */
5 .hero { background: #201f1d; }
6 </style>
7</head>
注意点
- 01style 要素の中にはCSSだけを書きます。HTMLのタグは書けません。
- 02同じスタイルを複数のページの style に書いていたら、外部スタイルシートに移すサインです。