この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
CSSのメディアクエリを使って、スマホとPCでデザインを切り替えている時に、こんなことはありませんか？
あれ？PC用のCSSが効かない？
スマホ用のCSSが消えてる？
ということはありませんか？
実は先ほど私にもありました😇
もしかしたら原因は、メディアクエリの書く順番かもしれません。
この記事では「メディアクエリの順番による上書き」について、わかりやすく解説します。
結論
まず、結論から述べると、
おなじCSS（スタイル）のメディアクエリは、そのCSSよりも下に書く。という原則に従う。
では、例を交えて詳細を書いていきます。
CSSは「下に書いたものが優先」
まず、CSSは下に書いた方が優先というルールが基本です。
例えば
例えば以下のコードを見てください。
.button {
color: blue;
}
.button {
color: red;
}.buttonという同じclass名がついていますね。
この場合の.buttonの文字色は、青か赤のどちらになると思いますか？
答えは赤です。
それはなぜ？
それは、下に記述したスタイルで上書きされて、下のスタイルが優先されるという原則があるからです。
ですので、赤が適用されます。
ただし、例外があって、詳細度（優先度）が違えば、優先度の高いスタイルの方が優先されて適用されます。
詳細度（優先度）の解説は、今回の本筋からは離れますので優先度の詳細は下記を参照ください。
ちなみに詳細度とは「どんなセレクタがどれだけ強いか」を数値で比べる仕組みのことです。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_cascade/Specificity
今回は上記のコードのように、同じclassが付いている場合について解説します。
CSSは下に書いた方が優先というルールがあります。
よくある失敗例
CSSが効かない時に、メディアクエリの書く順番が原因と思われるコードを書きます。
例えば
例えば以下のコードです。
@media (min-width: 768px) {
.button {
font-size: 14px;
}
}
.button {
font-size: 16px;
} 例のコードでは、画面の幅が768px以上のときには、フォントサイズは14pxと16pxのどちらが適用されると思いますか？
答えは、16pxです。
本当は14pxを適用したいのに、16pxが適用されます。
それはなぜ？
それは、CSSは下に書いた方が優先だからです。
なんとなく、@media (min-width: 768px) {}で囲まれているから、別のセレクタ扱いで捉えてしまいませんか？
@media (min-width: 768px) {}で囲まれていても、同じ.buttonなので、下に書いたCSS（.button）が優先されます。
ですので、同じセレクタのメディアクエリを書く時は、必ず上書きしたいセレクタの下に書きましょう。
メディアクエリを複数書きたい場合
では、PC表示だけではなく、タブレット表示もメディアクエリでデザインを分けたい時はどうしたらいいのでしょうか？
その時は下記コードのように、メディアクエリを複数書くと思います。
メディアクエリを複数書く
/* スマホ向け */
.button {
font-size: 12px;
}
/* タブレット以上向け */
@media (min-width: 768px) {
.button {
font-size: 14px;
}
}
/* PC以上向け */
@media (min-width: 1024px) {
.button {
font-size: 16px;
}
}
この時にもメディアクエリを書く順番が重要です。
では下記のようなコードだと、どのようにスタイルは適用されるでしょうか？
/* スマホ向け */
.button {
font-size: 12px;
}
/* PC以上向け */
@media (min-width: 1024px) {
.button {
font-size: 16px;
}
}
/* タブレット以上向け */
@media (min-width: 768px) {
.button {
font-size: 14px;
}
}画面幅ごとに、font-sizeが何pxになるかを表にしました。
以下の表はスマホで見る時には横にスクロールできます。
| 画面幅 | 適用されるスタイル | font-size |
|---|---|---|
| ～767px（スマホ） | /* スマホ向け */ .button { font-size: 12px; } | |
| 768～1023px（タブレット） | /* タブレット以上向け */ @media (min-width: 768px) { .button { font-size: 14px; } } | |
| 1024px以上（PC） | /* タブレット以上向け */ @media (min-width: 768px) { .button { font-size: 14px; } } | （PC表示のスタイルが適用されていない） |
結果は、画面幅によって異なります。
ここで問題になるのが、1024px以上（PC）の場合です。
本来は、1024px以上の時にfont-sizeを16pxに指定したいのに、タブレット表示の14pxが適用されてしまっています。
これでは意図しないコードになってしまいます。
なぜこうなる？
では、なぜこのようにスタイルが適用されたのでしょうか。
答えは、こちらも、
CSSは下に書いた方が優先だからです。
今回の条件では下記のようになります。
- 画面の幅が1024px以上になると、「768px以上のスタイル」も「1024px以上のスタイル」も、どちらの条件にも当てはまる。
- しかし、768pxのメディアクエリが下に書かれているため、font-size: 14px に上書きされてしまう。
- 本来、PC表示は16px にしたいはずなのに、上書きされてしまっている。
どうしたらいい？
ではメディアクエリをどのような順番で書いたらいいのでしょうか？
それは、モバイルファーストか、PCファーストかで変わります。
モバイルファーストなら、小さい幅（768px）→大きい幅（1024px）の順に書く
PCファーストなら、大きい幅（1023px)→小さい幅（767px)の順に書く
厳密にいうと、PCファーストでもmin-widthを使用したら、幅の小さい順に書く方がいいです。
しかし、PCファーストはmax-widthを使うことが多いので、基本的に幅の大きい順に書きます。
まず、モバイルファーストのコードを紹介します。
/* スマホ向け */
.button {
font-size: 12px;
}
/* タブレット以上向け */
@media (min-width: 768px) {
.button {
font-size: 14px;
}
}
/* PC以上向け */
@media (min-width: 1024px) {
.button {
font-size: 16px;
}
}
PCファーストのコードも紹介します。max-widthを使用した例です。
/* PC向け */
.button {
font-size: 16px;
}
/* タブレット向け（1023px以下） */
@media (max-width: 1023px) {
.button {
font-size: 14px;
}
}
/* スマホ向け（767px以下） */
@media (max-width: 767px) {
.button {
font-size: 12px;
}
}
まとめ
今回の記事についてまとめます。
- おなじCSS（スタイル）のメディアクエリは、そのCSSよりも下に書く。という原則に従う。
- メディアクエリを複数書きたい場合は、
- モバイルファーストなら、小さい幅（768px）→大きい幅（1024px）の順に書く
- PCファーストなら、大きい幅（1023px)→小さい幅（767px)の順に書く
メディアクエリが効かない原因はもちろん他にもあります。
メディアクエリが効かない時は、記載順についても確認してみてください。
ではまたノシ
