【入門編】メディアクエリとカスケード – CSS実践ガイド

やあ、こんにちは。CSSの世界へようこそ。
この道で長く食べているとね、CSSを「ただの装飾ルール」だと思っている人が意外と多いことに気づくんだ。でも、CSSはもっとこう……「重なり合う想い」というか、「どちらが優先されるか」という静かな駆け引きが繰り広げられる、非常にドラマチックな場所なんだよ。

今日はその中でも、みんなが最初につまずく「メディアクエリとカスケード」という難所を、一緒に紐解いていこう。肩の力を抜いて、リラックスして聞いてね。

—

まず、大前提の話をしようか。CSSという言葉の最初の「C」は「Cascading（カスケード）」のC。これは「滝」を意味するんだ。水が上から下に流れるように、「CSSは後から書いたもの（下にあるもの）ほど優先される」という鉄の掟がある。

たとえば、こんなシーンを想像してみて。

/ 1. まず、シャツを「白」に決める /
.shirt {
background-color: white;
}

/ 2. でも、やっぱり「青」がいいかなと後から決める /
.shirt {
background-color: blue;
}

この場合、ブラウザは当然「青いシャツ」を表示するよね。これは誰でもわかる。でも、ここに「メディアクエリ」という強力な助っ人が加わると、少しだけ景色が変わってくるんだ。

—

メディアクエリ（`@media`）は、画面のサイズに応じてスタイルを切り替える便利な道具だ。「スマホのときはこう、パソコンのときはこう」と教えてくれる。

ここで初心者の君が混乱しやすいのが、「あれ？メディアクエリの中に書いたコードは、普通のコードより偉いの？」という疑問だ。

結論から言おう。メディアクエリは「偉い」わけじゃない。ただ、「特定の条件下でだけ発動する、少し特殊なタイミングの命令」なんだ。

/ 普通のスタイル（基本の姿） /
.box {
width: 100px;
background-color: red;
}

/ メディアクエリ（画面が広いときだけ発動！） /
@media (min-width: 768px) {
.box {
background-color: blue;
}
}

このコード、もしブラウザの幅が広いときには、`.box`は「青色」になる。なぜなら、メディアクエリの中身は「画面が広い」という条件を満たした瞬間に、まるで後から書き加えられたかのように強く影響力を持つからだ。

ここで大切なのは、「メディアクエリをどこに書くか」という順番なんだ。

—

もし、メディアクエリを「普通のスタイル」の上に書いてしまったらどうなるだろう？

/ ① 先にメディアクエリを書く /
@media (min-width: 768px) {
.box {
background-color: blue;
}
}

/ ② 後から普通のスタイルを書く /
.box {
background-color: red;
}

こうなると、画面がいくら広くても `.box` は「赤色」になってしまう。なぜなら、ブラウザは「後から出てきた命令（赤）」を、「さっきメディアクエリで決めた命令（青）」よりも優先して採用するからだ。

CSSの優先順位は、書いてある「場所」と「タイミング」がすべて。
だから、僕たちは普段、メディアクエリをファイルの「一番最後」に書くことが多いんだ。そうすれば、どんなときでもメディアクエリの命令が「最後の一言」として決定権を握れるからね。

—

最後に、少しだけ「裏技」の話をしよう。CSSには `!important` という、魔法のような呪文がある。

.box {
background-color: red !important; / 絶対に赤にする！という強い意志 /
}

これをつけると、どんな詳細度も、どんな順番も無視して、その設定が強制的に適用される。でもね、これだけは覚えておいてほしい。「importantを多用するコードは、後から直すときに地獄を見る」ということを。

これは、買い物でレジに並んでいるときに、無理やり割り込み乗車をするようなものだ。一度や二度ならいいけれど、みんながやり始めたら列はぐちゃぐちゃになるよね。`!important` は「本当にどうしようもない時の最終手段」として、奥の棚にしまっておくのが、プロのたしなみさ。

—

ここまで読んでくれてありがとう。
CSSの競合で悩むとき、それは君が「ブラウザがどう動くか」を真剣に考えている証拠だよ。

最初はわからなくて当たり前だ。まずは「基本のスタイルを先に書いて、メディアクエリはファイルの最後の方にまとめる」。これだけ守ってみて。それだけで、コードは驚くほど読みやすく、扱いやすくなるはずだ。

わからないことがあったら、いつでもまた戻ってきてね。現場の知恵は、いつだって君の味方だから。応援しているよ！