【入門編】記述順序によるカスケードの解決 – CSS実践ガイド

こんにちは。フロントエンドの現場で長年コードと格闘してきた、あるアーキテクトです。

CSSを書き始めた頃、「なんでさっき書いたはずの色にならないんだ！」「さっきまでは動いていたのに！」と、深夜のPC前で頭を抱えた経験はありませんか？もしそうなら、安心してください。それはあなたがダメなのではなく、CSSという言語が持つ「カスケード（滝）」という、ちょっと気難しいルールのせいなんです。

今日は、CSSの「優先順位」という、Web制作の最初にして最大の関門について、少しだけ紐解いてみましょう。

—

1. 「カスケード」は「上書きの歴史」

CSSの「C」はカスケード（Cascade）の頭文字です。これは直訳すると「滝」や「連鎖」という意味。水が上から下に流れるように、スタイルも「上から下に読み込まれ、後に書かれたものが勝ち残る」という性質を持っています。

これを「お買い物のレジ待ち」で例えてみましょう。

あなたがスーパーのレジに並んでいるとします。後ろから来た人が「あ、さっきのよりこっちの商品の方がいいな」と、カートの中身をどんどん入れ替えていくようなイメージです。

基本のルール：後出しジャンケンが勝つ

もし、同じ場所（詳細度）に対して異なる命令を出した場合、最後に書いたものが最終決定権を持ちます。

/ 最初に「文字を赤くして！」とお願いした /
h1 {
color: red;
}

/ そのすぐ下に「やっぱり青にして！」と書き直した /
h1 {
color: blue; / こっちが優先されます /
}

「あれ？さっき赤って書いたじゃん！」とCSSは怒りません。単に、「一番最後に言ったことが正解だよね」と素直に従うだけなのです。これがCSSの最も基本的で、最も強力なルールです。

—

2. なぜ「詳細度」という壁があるのか？

「じゃあ、全部一番下に書けばいいの？」というと、そうもいきませんよね。Webサイトは複雑です。

ここで登場するのが「詳細度（Specificity）」という考え方です。これは「どれだけピンポイントに指定しているか」という「強さ」のこと。

タグ名（`p`, `h1` など）： 「誰でもいいから全員！」という広い指定（弱い）
クラス名（`.box`, `.button` など）： 「このクラスを持っているやつだけ！」という少し詳しい指定（普通）
ID名（`#header` など）： 「世界に一つだけの君！」という超ピンポイントな指定（めちゃくちゃ強い）

もし、タグ名での指定（弱い）を一番下に書いても、ID名での指定（強い）が上にあれば、強い方が勝つようになっています。

現場の知恵： 初学者のうちは、「IDはなるべく使わない」と覚えておいてください。IDでガチガチに固めてしまうと、後から「ここだけ色を変えたい」と思ったときに、どんなに強力なCSSを書いても負けてしまう「魔のループ」に陥ってしまうからです。

—

3. 「!important」という禁断の果実

CSSには、詳細度も記述順序もすべて無視して強制的に勝つ方法があります。それが `!important` です。

p {
color: red !important; / 絶対に赤くする！ /
}

これは例えるなら、レジの行列を無視して割り込むような行為です。確かにその場は解決しますが、多用すると「誰が優先されているのか全然わからない！」という大混乱が起きます。

私の教訓： `!important` は「CSSの最終兵器」です。コード全体で数回使うか使わないか、くらいに留めておきましょう。これに頼りすぎると、後で修正が効かなくなる「技術的負債」というモンスターを育ててしまうことになります。

—

まとめ：迷ったときはこう考える

CSSが思い通りに動かないとき、まずはこの3ステップでチェックしてみてください。

1. 「同じ詳細度なら、後に書いたものが勝っていないか？」（一番よくある原因です）
2. 「もっと強い指定（クラスやID）がどこかに隠れていないか？」（ブラウザの検証ツールで確認しましょう）
3. 「`!important` がどこかで悪さをしていないか？」（最後の手段です）

CSSのルールは、最初はパズルのように感じるかもしれません。でも、これらはすべて「Webサイトを正しく、美しく表示するため」のルールです。

うまくいかなくても大丈夫。それはあなたが一つ上のレベルに行くための大切なプロセスです。焦らず、少しずつ「カスケード」の流れを掴んでいってくださいね。あなたのコードが、美しく思い通りに動くことを応援しています！