HTMLとは何かで見たとおり、HTMLは文章に「意味」を付けるだけで、「見た目」は決めていません。その見た目を担当するのがCSSです。
見た目だけを、後から付ける仕組み
CSSはCascading Style Sheetsの略で、Håkon Wium Lie氏が考案し、1994年ごろから使われ始めました。HTMLと同じくW3C（Web関連の標準を決める団体）によって仕様が整備されています。
h1 {
color: navy;
font-size: 32px;
}これは「<h1>というタグには、紺色で32ピクセルの大きさの文字を使う」という指定です。HTML側のタグには手を加えず、別のファイルとして見た目のルールだけをまとめて書くのがCSSの基本の形です。
以前は<font color="navy">のように、見た目の指定をHTMLタグに直接埋め込む書き方が主流でした。CSSが普及したことで、「意味」と「見た目」を別のファイルに分けて管理できるようになりました。1つのCSSファイルを直せば、それを使っている全ページの見た目が一括で変わる——この分離こそがCSSの実務上の価値です。
クラスとIDの違い
CSSで見た目を指定する対象を選ぶとき、<h1>のようなタグ名だけでなく、クラスとIDという2種類の目印がよく使われます。名前が似ていますが、性質は明確に違います。
クラス（class） |
ID（id） |
|
|---|---|---|
| 書き方 | <p class="warning"> |
<p id="header"> |
| CSSでの指定 | .warning { } |
#header { } |
| 1ページ内での重複 | 何個あってもよい | 1つだけ（同じidを持つ要素は1つに限る） |
| 1つの要素に付けられる数 | 複数付けられる（class="warning bold"） |
1つだけ |
| 主な用途 | 同じ見た目を複数の要素で使い回す | ページの中で唯一の場所を指し示す |
たとえば「注意書きの段落」を何箇所にも置きたいなら、それぞれにclass="warning"を付けて、CSS側で.warningにまとめてスタイルを書きます。一方、「ページ内のこの1箇所」というピンポイントの指定——ページ内リンクのジャンプ先や、JavaScriptから特定の場所だけを操作したいとき——には、重複しないIDが向いています。「繰り返し使うならクラス、ページに1つしかない場所ならID」と覚えておくと、見分けがつきやすくなります。
カスケード——ルールがぶつかったときの決着の付け方
CSSの名前に含まれている「Cascading（カスケード、滝のように流れ落ちる）」は、同じ要素に複数のルールが当てはまったとき、どちらを優先するかを決める仕組みを指しています。
p { color: black; }
.warning { color: red; }
#header { color: navy; }もし<p id="header" class="warning">という要素があったら、この3つのルールがすべて当てはまります。このとき優先されるのは、大まかに次の順番です。
- IDによる指定がもっとも強い
- クラスによる指定がその次
- タグ名だけの指定がもっとも弱い
この例では#headerが勝ち、文字は紺色になります。同じ強さのルールが重なった場合は、あとに書かれたルールが勝ちます。 「CSSを書いたのに反映されない」というつまずきの多くは、このカスケードの優先順位を知らないまま、弱い指定で強い指定を上書きしようとしていることが原因です。
なお!importantという書き方を使うと、この優先順位を無視して強制的に勝たせることができますが、乱用すると「なぜこの見た目になっているのか」を追いづらくする諸刃の剣なので、最終手段として覚えておく程度でよいものです。
まとめ
- CSSは、HTMLが決めた「意味」に「見た目」を付ける仕組み。意味と見た目を分けて管理できるのが実務上の価値
- クラスは繰り返し使う目印、IDはページ内で1つだけの目印——性質が違う
- 複数のルールが同じ要素にぶつかったときは、ID＞クラス＞タグ名の順で強いルールが勝つ（この優先順位の仕組みを「カスケード」と呼ぶ）
- 「反映されていないと思ったCSS」は、たいていより強い別のルールに上書きされているだけ、というケースが多い
なお、いまはTailwind CSSのように、クラス名をHTMLに直接並べて見た目を組み立てる書き方も広く使われています（このサイト自体もTailwindで作られています）。書き方の流儀は変わっても、クラス・ID・カスケードという基本の仕組みは変わらず土台にあります。