レスポンシブサイトを作るとき、一般的にはメディアクエリでCSSを切り分けて書くと思います。
でも、なぜか上手にレスポンシブにならない！！ということはありませんか？
そんな時に慌てないように、メディアクエリが効かないときにチェックするべきポイントをまとめてみました。
前提：CSSが読み込まれている状態での想定です。CSS自体が読み込まれていない…というときには、CSSのファイル名やリンク設定を確認しましょう。
その1.ビューポートは設定されているか
ブラウザの幅を縮めたときにはメディアクエリが効くけど、実際にスマートフォンで見るとスマホサイトにならない…というときは、
ビューポートが適切に設定されていない可能性があります。
<meta name="viewport" content="width=device-width,initial-scale=1">レスポンシブサイトを作る際には上記をheadタグ内に記述してあげましょう。
まれにあるのが、「viewport」のスペルミスだったり、device-widthの後ろを「,」ではなく「;」にしてしまっていたりするパターン。
特にスニペット登録せず手打ちで模倣している初心者さんに見られがちなミスです。まず見直してみるポイントといえるでしょう。
その2.幅の指定は適切か
メディアクエリの指定は、下記のように書きますね。
@media screen and (max–width: 768px)
※上記はPCサイトを基準として、768px以下ではスマホ用CSSを適用するためのメディアクエリです。
たとえばここのminとmaxの指定が逆であったり、括弧が全角半角違っている、などでも思ったように適用されなくなってしまいますね。
あとは、この間生徒さんのファイルを添削している中であったのが、
andの後ろに半角スペースがなかったせいでメディアクエリが読み込まれなかったパターン。
一見普通に見えるので、CSSが効かない理由を見つけるのにちょっと時間がかかってしまいました:(；ﾞﾟ”ωﾟ”):
上記の2点が正しければ、メディアクエリの指定は反映されることでしょう。
上記以外で、特定の箇所のメディアクエリが効かないよーということがあれば、CSSの中身の記述が違っているとか、どこかで上書きされてしまっているとか、そういった問題になってくると思います。
効かないスタイルに!importantを付けて反映されれば上書き説が濃厚なので、上書きされてしまっている箇所を確認してみましょう。
こういうちょっとしたミスってなかなか気づけないので、うまくいかなかったときのチェックリストとして知っておきましょう*＼(^o^)／*
