HTML&CSS

メディアクエリは書く順番が大切なのはナゼ?やっと納得できたのでまとめ

メディアクエリが反映されなくて色々調べた結果、CSSの書く順番が間違ってた…というとこまではわかったんだけど、どうして順番が大事なのかな?

同じような疑問を持っている人がいないからなのか、こんなところでつまづく人がいないからなのか、スッキリする記事が見つけられず、色んな記事を総合した結果、自分なりに無理やり納得したのでまとめ。

状況

下記のようなCSSを書いて、Chromeデベロッパーツールでレスポンシブの表示確認をしていたところ、意図したブレイクポイントで切り替わらなくてドツボにはまりました。

See the Pen
media query01
by あやたろう@独女リゾートエンジニアの卵 (@aya2kiku)
on CodePen.

メディアクエリが適用されない理由をググってみたところ、

モバイルファースト か デスクトップファースト かで、メディアクエリを書く順番が変わる 

というルールがあることがわかったのだけど、あくまで「ルールがある」ということを知っただけであって、なんでそうしなきゃいけないのか…がなかなかわからなかったのです。

こんな感じで理解

私が書いていたメディアクエリをイラストにするとこうなります↓

CSSは後から書いたものが優先されるので…

最後に書いた、

のCSSだけが適用されていました。

そこで、メディアクエリの書き順を変更↓

すると…

幅によって、思った通りにCSSが反映されました。ε-(´∀`*)ホッ

考察

つい先日に書いた こちらの記事 の通り、「後から書いたCSSの方が優先される」…ということは知っていたのに、メディアクエリの書き順に関しては、なんでこんなに理解に苦しんだんだろう?という自問自答をしてみたところ…。

私、そもそもメディアクエリに関して、「CSS」というより「メディアクエリという独立した何か」だと認識していたっぽい。

うまく言えないけど、

@media(max-width:xx)って個別に指定してるんだから、どんな順番で書いても適用されるんじゃないの?

っていう感じ。(どういう感じ?)

下記の参考サイト様の記事がなければ、未だに迷走していたかもしれません。感謝!

CSSの優先順位についてはこちら↓

CSSが反映されない!確認するポイントは?点数、順序、重要度。 目を皿のようにして見直してもセレクタは正しく指定されているのに、CSSが思った通りに反映されない、そんな時。 Chromeのデ...