【入門編】カスケードの順序と競合解決 – CSS実践ガイド

CSSの世界へようこそ！フロントエンドの現場で長年戦ってきた身として、今日あなたにお話ししたいのは、多くの人が最初の壁としてぶつかる「CSSの優先順位（カスケード）」の、その中でも特に「最後の一押し」を決めるルールについてです。

「書いたはずのスタイルが反映されない！」という、あの絶望的な瞬間。実はその多くが、今日お話しする「同じ強さなら、あと出しジャンケンが勝つ」という単純なルールに隠されているんです。

—

CSSのルールには「詳細度（Specificity）」という強さのランクがあるのですが、今回は「詳細度がまったく同じならどうなるのか？」というお話に絞ります。

想像してみてください。あなたは今、お気に入りの服屋さんでお会計をしようとしています。
店員さんがレジを打っている途中に、別の店員さんが駆け寄ってきて「あ、こっちのクーポンも適用して！」と別の注文を入れたらどうなるでしょうか？

そう、「最後に指示された内容」が優先されますよね。CSSもこれと全く同じです。これを専門用語で「ソースコードの記述順序による解決」と呼びますが、要するに「コードの下の方に書いたやつが勝つ」というシンプルなルールなんです。

—

CSSという言葉の「C」は「Cascading（カスケード）」のCです。このカスケードとは「滝」のこと。滝は上から下へと流れていきますよね。

CSSファイルも、一番上の行から下に向かって順番に読み込まれていきます。後から読み込まれた（＝ファイルの下の方にある）ルールは、それまで流れてきたスタイルを「上書き」しながら積み重なっていくイメージです。

例えば、こんなコードがあったとします。

/ 1. まず「文字は青だよ」と決めた /
p {
color: blue;
}

/ 2. そのすぐ下に「いや、やっぱり赤にして！」と書いた /
p {
color: red;
}

/
さて、ブラウザはどうするでしょう？
答えは、最後に読み込まれた「赤色」が勝つ！
/

この場合、詳細度（pタグという指定）は同じです。だから、後から登場した `red` が、先にいた `blue` を無情にも上書きします。これが「あとの方が強い」の正体です。

—

ここで、多くの人が「えっ、なんで！？」とつまずくポイントがあります。

実は、CSSファイルを読み込む順番によっても、この「あと出しジャンケン」の力学は働きます。例えば、HTMLの `` 内でスタイルシートを2つ読み込んでいる場合です。

もし `base.css` と `style.css` の両方に同じ `p` タグの指定があったら、後から読み込まれる `style.css` の内容が絶対的に優先されます。

「CSSファイルの中に書いている順番」だけでなく、「HTMLがどのファイルをどの順番で読み込んでいるか」も、実はこのカスケードの一部なんです。

—

「あと出しが勝つ」と聞くと、じゃあずっと下に書き足せばいいや！と思ってしまいがちですが、それを繰り返すとコードがスパゲッティのように絡まって、後で自分でも修正できなくなります。

僕たちが現場で心がけている「綺麗に保つコツ」を少しだけ伝授しますね。

例えば、ボタンの基本デザインは上に書き、色違いの「赤ボタン」や「青ボタン」のようなバリエーションは、それよりも下の行や別のファイルに書くようにしています。こうすると、「上書き」のルールが整理されて読みやすくなります。

ID（`#header` など）を使って無理やり優先させようとすると、後で上書きできなくて地獄を見ます。できるだけ「クラス名」だけで指定するのを基本にしましょう。

—

CSSの優先順位は、最初は魔法のように感じるかもしれません。でも、「詳細度が同じなら、下に書いた方が勝つ」、この原則さえ覚えておけば、ほとんどの謎は解けます。

もし思った通りに色が変わらなくても、「ああ、どこかで同じ強さのコードが下に書かれているんだな」と冷静にデベロッパーツールを開いてみてください。ブラウザが「こっちのコードが勝ったよ！」と教えてくれますから。

プロのエンジニアも、最初はみんなここで頭を悩ませてきました。焦らなくて大丈夫。一つずつ実験して、CSSの「流れ」を掴んでいきましょう。応援しています！