【CSS】レスポンシブやメディアクエリが効かない原因と解決方法9選
「スマホ対応するためにレスポンシブにしたのに効いてないよ!?」
「パソコンではスマホ版になるのにスマホで見るとパソコン版になってる!?」
レスポンシブやメディアクエリ、@media screenが効かない原因と解決方法を、起こっている現象に合わせて9つ紹介します。
これから紹介する原因はやりがちなミスです。同じミスをしていなか確認してみてください。
目次
- 【原因1】view portを書いていない
- 【原因2】メディアクエリのmax-widthとmin-widthが逆になっている
- 【原因3】メディアクエリのmax-widthとmin-widthが重複している
- 【原因4】小さい値のmax-widthが大きい値のmax-widthを上書きしている
- 【原因5】メディアクエリの「}」閉じタグがない
- 【原因6】メディアクエリがあちこちにある
- 【原因7】メディアクエリの中にメディアクエリを書いている
- 【原因8】screenの後にandがない
- 【原因9】screenおよびandの前後に半角スペースがない
- その他の原因 記述ミスなど
- 【まとめ】レスポンシブやメディアクエリが効かない原因
【原因1】view portを書いていない
パソコンでスマホ幅にしたときはちゃんとスマホ版になっているのに、実際にスマホで見るとパソコン版になっている、というときはview portを書いていないからです。
ソースコード内で「viewport」で検索して、あるか確認しましょう。
なければビンゴです。下記コードをheadタグ内に追記しましょう。
<meta name="viewport" content="width=device-width" />view portについて詳しくはこちら↓
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
【原因2】メディアクエリのmax-widthとmin-widthが逆になっている
ブラウザの幅を変えてみて、幅が大きいときにスマホ版、幅が小さいときにパソコン版になっている、というときはメディアクエリのmax-widthとmin-widthが逆になっています。
「max-widthのmaxは大きいって意味だからパソコン版、min-widthのminは小さいって意味だからスマホ版」と思い込みがちですが、実際はその逆です。
以下のように覚えましょう。
「min-width:△px」は「ブラウザ幅が最小でも△px」の時（主にパソコン版）
「max-width:○px」は「ブラウザ幅が最大でも○px」の時（主にスマホ版）
失敗例
@media(max-width:751px){パソコン版}
@media(min-width:750px){スマホ版}成功例
@media(min-width:751px){パソコン版}
@media(max-width:750px){スマホ版}わからなくなったらとりあえず「max」と「min」を逆にして直るか試してみましょう。
メディアクエリについて詳しくはこちら↓
【原因3】メディアクエリのmax-widthとmin-widthが重複している
ブラウザの幅を変えて、ある地点からある地点までおかしくなっている、というときはメディアクエリのmax-widthとmin-widthが重複しています。
例えばパソコン版を「min-width:650px」スマホ版を「max-width:750px」と指定したとしましょう。
このとき、750px～650pxの幅のとき両方のCSSがかかることになります。
境目をしっかり決めて指定しましょう。
失敗例
@media(min-width:650px){パソコン版}
@media(max-width:750px){スマホ版}成功例
@media(min-width:751px){パソコン版}
@media(max-width:750px){スマホ版}なお、min-widthとmax-widthどちらも750pxにしたとき、750pxピッタリのとき両方のCSSがかかります。
たった1pxですがトラブルの元となりますので、「min-width:751px」「max-width:750px」のように1pxずらしましょう。
【原因4】小さい値のmax-widthが大きい値のmax-widthを上書きしている
max-widthを複数回指定したうえで指定した地点になってもCSSが切り替わらない、というときはこれの可能性があります。
下記のように(max-width:1500px)と(max-width:1200px)を指定するとします。
ブラウザ幅が1500px以上なら(max-width:1500px)だけ効いてほしいですが、ブラウザ幅が1500px以上のとき、ブラウザ幅は1200px以上でもあるため(max-width:1200px)も効いてしまいます。
両方が効くとき後述された方が効くため、(max-width:1200px)のほうで上書きされるというわけです。
失敗例
@media(max-width:1500px){
div{
margin: 0;
}
}
@media(max-width:1200px){
div{
margin: 10px;
}
}成功例
@media(max-width:1200px){
div{
margin: 10px;
}
}
@media(max-width:1500px){
div{
margin: 0;
}
}これを避けるには厳しい条件のほう、つまり(max-width:1500px)を後述するか、(max-width:1200px)のほうに上限も指定しましょう。
上限と下限を同時に指定するには下記のようにします。
@media(min-width:○px) and (max-width:△px){}ここではmax-widthを例に挙げましたが、min-widthでも同様です。
【原因5】メディアクエリの「}」閉じタグがない
メディアクエリの中に書いたCSSが全部効いていない、というときはメディアクエリの「}」閉じタグがないからです。
メディアクエリは「{}」の中にCSSを書きますが、そのCSSにも「{}」を書きます。
このとき「}」がメディアクエリの閉じタグなのにCSSの閉じタグだと勘違いして消してしまったり、CSSの閉じタグを書き忘れたりすることでメディアクエリの閉じタグがなくなることがあります。
このミスをなくすためにメディアクエリ内のCSSはインデントをつけるようにしましょう。
また、CSSを書くときは「}」を最後に書くのではなく、「{}」をセットで最初に書くようにしましょう。
失敗例
@media(min-width:751px){
div{
margin: 0;
}
成功例
@media(min-width:751px){
div{
margin: 0;
}
}【原因6】メディアクエリがあちこちにある
特定のCSSだけ効かない、というときはメディアクエリがあちこちにあるせいで別のCSSに上書きされている可能性があります。
メディアクエリはCSS内にいくつでも指定できます。
ただし、同じようなメディアクエリがあちこちにあると、後からAのメディアクエリに追記したCSSが実はBのメディアクエリにもあって、そちらが優先されている、ということが起こりかねません。
また、先述したメディアクエリの重複にもつながります。
メディアクエリはあちこちに置かず、一ヶ所にまとめておくことをオススメします。
【原因7】メディアクエリの中にメディアクエリを書いている
メディアクエリの中にメディアクエリを書くとIEで効きません。
タブレット版のように範囲がある場合、min-widthの中にmax-width（またはその逆）を指定すると範囲指定ができます。
ただしこの方法IEでは効きません。
もちろんスマホブラウザにIEはありませんし、もうすぐIEも使われなくなるのでこの方法を使い続けてもいいのですが、IEでもちゃんと効く方法があります。
@media(min-width:○px) and (max-width:△px){}andを使うことで「AかつB」という形にできます。andの後ろには空白必須です。
失敗例
@media(min-width:750px){
@media(max-width:850px){
div{
border: 1px solid #333;
}
}
}成功例
@media(min-width:750px) and (max-width:850px){
div{
border: 1px solid #333;
}
}【原因8】screenの後にandがない
メディアクエリを書くとき「screen」をつけることがあるでしょう。
この「screen」と「(min-width:○○px)」を使うときは間に「and」が必要です。
失敗例
@media screen (min-width:751px){
div{
margin: 0;
}
}成功例
@media screen and (min-width:751px){
div{
margin: 0;
}
}まず「screen」は「パソコン画面のとき」という意味です。この逆は「prent」で「印刷のとき」という意味です。
「@media screen and (min-width:751px)」というのは「パソコン画面のときかつ、ブラウザの幅が751px以上のとき」という意味です。逆に印刷時は効きません。
印刷時のことを考えなくていいなら「 screen and 」は不要になります。
【原因9】screenおよびandの前後に半角スペースがない
下記の通り半角スペースが必要です。全角スペースでもダメです。
@media空白screen空白and空白(min-width:○○px)
失敗例
@mediascreenand(min-width:751px){
div{
margin: 0;
}
}成功例
@media screen and (min-width:751px){
div{
margin: 0;
}
}その他の原因 記述ミスなど
スペルミスや記号のミス、CSSの優先順位のミスなどケアレスミスの可能性があります。
下記記事を参考に見直してみてください。
【まとめ】レスポンシブやメディアクエリが効かない原因
- パソコンでスマホ幅にしたときはちゃんとスマホ版になっているのに、実際にスマホで見るとパソコン版になっている
→view portを書いていない - ブラウザの幅を変えてみて、幅が大きいときにスマホ版、幅が小さいときにパソコン版になっている
→メディアクエリのmax-widthとmin-widthが逆 - ブラウザの幅を変えて、ある地点からある地点までおかしくなっている
→メディアクエリのmax-widthとmin-widthが重複 - max-widthを複数回指定したうえで指定した地点になってもCSSが切り替わらない
→小さい値のmax-widthが大きい値のmax-widthを上書きしている - メディアクエリの中に書いたCSSが全部効いていない
→メディアクエリの「}」閉じタグがない - 特定のCSSだけ効かない
→メディアクエリがあちこちにあるせいで別のCSSに上書きされている - メディアクエリの中にメディアクエリを書く
→IEで効かない - screenの後にandがない
→「screen」と「(min-width:○○px)」を使うときは間に「and」が必要 - screenおよびandの前後に半角スペースがない
→@media空白screen空白and空白(min-width:○○px)
以上、レスポンシブやメディアクエリが効かない原因と解決方法9選でした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
