この記事の目次
CSSの書き方と読み込み方とは
CSS は、HTML で作ったページの見た目（色・文字の大きさ・余白・配置など）を決める言葉です。HTML が「ここは見出し」と意味を付け、CSS が「見出しは青く、大きく」と飾りを付ける、という分担になっています。
CSS を使い始めるときに押さえることは2つです。HTML への読み込み方と、1つのルールの読み方です。この記事では、この2つと、要素・class・id という3種類の基本のセレクタ（どこに当てるかの指定）を、実例で説明します。
基本（読み込み方は3通り）
| 書き方 | 例 | 向いている場面 |
|---|---|---|
別ファイルを <link> で読み込む |
<link rel="stylesheet" href="css/style.css"> |
基本はこれ。複数のページで同じ CSS を使える |
<style> 要素に書く |
<head> の中に <style> h1 { color: red; } </style> |
そのページだけの試し書き |
style 属性に書く |
<p style="color: red;"> |
一時的な確認。管理しにくいので多用しない |
<link> は <head> の中に書きます。href には、HTML ファイルの場所から見た CSS ファイルの場所（パス）を書きます。
1つのルールは、次の3つでできています。
h2 {
border-left: 6px solid #1d4ed8;
padding-left: 8px;
}
h2… セレクタ（どこに当てるか）border-left… プロパティ（何を変えるか）6px solid #1d4ed8… 値（どう変えるか）
プロパティと値は :（コロン）でつなぎ、最後に ;（セミコロン）を付けます。ルール全体は { } で囲みます。
具体例（セレクタの3つの基本）
| セレクタ | 書き方 | HTML の例 | 当たる範囲 |
|---|---|---|---|
| 要素セレクタ | p { } |
<p> |
すべての p |
| class セレクタ | .note { } |
<p class="note"> |
class=”note” が付いたものすべて |
| id セレクタ | #hello-btn { } |
<button id="hello-btn"> |
id=”hello-btn” の1つ |
<p>ふつうの段落</p>
<p class="note">注意書きの段落</p>
p {
line-height: 1.8;
}
.note {
background: #fffbeb;
padding: 8px 12px;
}
この例では、2つの段落の両方に行の高さ 1.8 が当たり、class="note" の段落だけに薄い黄色の背景と余白が付きます。見た目を付けたい部品には class を付け、class セレクタで指定するのが、管理しやすい基本の形です。id は1ページに1つしか使えない名前なので、見た目の指定より、JavaScript で要素を探す目印やページ内リンクに使うことが多くなります。
CSSの書き方と読み込み方の実践ステップ
- サイトのフォルダに
cssフォルダを作り、style.cssを作ります。 - HTML の
<head>に<link rel="stylesheet" href="css/style.css">を書きます。 style.cssにbody { color: #222222; }などのルールを1つ書いて保存し、ブラウザを再読み込みして変わることを確かめます。- 見た目を変えたい部品に
class="…"を付け、class セレクタでルールを書きます。 - 効かないときは、開発者ツールの要素パネルでその部品を選び、ルールが当たっているか、打ち消し線が付いていないかを見ます。
CSSの書き方と読み込み方の注意点
- 同じ要素に、ぶつかるルールが2つ当たったときは、「詳細度」（セレクタの強さ）が高いほうが勝ちます。強さが同じなら、後に書いたほうが勝ちます。
style属性はとても強いため、多用すると CSS ファイル側で上書きできなくなります。- 色の値は
#1d4ed8のような16進数のほか、rgb()や色の名前でも書けます。文字と背景の色の差（コントラスト）が十分かも確かめます。
CSSの書き方と読み込み方でよくあるミス
<link>のパスの間違い： CSS 全体が効かないときの一番多い原因です。開発者ツールの Network で CSS ファイルが404になっていないか見ます。;や}の書き忘れ： その後ろのルールが効かなくなることがあります。- class 名のつづりの違い： HTML の
class="note"と CSS の.notesのように1文字違うと当たりません。 - 全角のスペースや記号： CSS の記号はすべて半角で書きます。
CSSの書き方と読み込み方のチェックリスト
- [ ] CSS を別ファイルにし、
<head>の<link>で読み込んだ - [ ] セレクタ・プロパティ・値を区別して読める
- [ ] 見た目を付ける部品には class を付けた
- [ ] 効かないときに、開発者ツールで当たっているルールを確認できる
CSSの書き方と読み込み方のFAQ（よくある質問）
Q. CSS ファイルはいくつに分けるべきですか？
A. 小さなサイトなら1つで十分です。大きくなったら、共通部分とページごとの部分に分けるなど、探しやすさで決めます。
Q. class と id は、どちらで見た目を指定すべきですか？
A. 見た目は class で指定するのが基本です。id は1ページに1つだけの名前で、詳細度も強いため、上書きしにくくなります。
Q. CSS のコメントはどう書きますか？
A. /* ここにメモ */ と書きます。HTML の <!-- --> とは書き方が違います。
筆者の見解（CSSの書き方と読み込み方）
CSS は書き方自体は単純ですが、「なぜ効かないのか」で時間を取られやすい言葉だと感じます。私は、最初から「別ファイル＋class セレクタ」に絞って書くことを勧めます。読み込み方とセレクタの種類を増やさなければ、効かない原因の候補も少なく保てるからです。迷ったら開発者ツールで当たっているルールを見る、という習慣を早めに付けると、上達が速くなると考えます。
CSSの書き方と読み込み方の関連項目
- CSS詳細度とは｜計算方法と効かないときの直し方
- box-sizing: border-boxとは｜幅の計算と全体指定のやり方
- CSS変数（カスタムプロパティ）の使い方｜var()とスコープ
- 相対パスと絶対パスの違い｜画像やリンクが表示されない原因
- ブラウザの開発者ツールの使い方｜要素・Console・スマホ表示
