メディアクエリの罠！？
cssが効かなくなるブラウザサイズを解決！

WEBサイトをレスポンシブ対応させるMedia Queries（メディアクエリ）をご存知でしょうか。

ブラウザの横サイズをpxで記述するだけで簡単にブラウザサイズに合ったcssを書くことが可能になります。

今回は私が見つけた「Media Queries（メディアクエリ）の罠」とその解決方法をご紹介。

まずMedia Queries（メディアクエリ）とは
CSSが効かない空間が生まれてしまう原因と解決策

まずMedia Queries（メディアクエリ）とは

WEBサイトのレスポンシブ化が当たり前となった昨今、

cssに記述するだけでブラウザの横幅ごとにcssの書き換えを可能にする手法です。

//横幅767px以下の時のcss設定
@media screen and (max-width: 767px) {
　//ここにcss記述
}

//横幅768px以上の時のcss設定
@media screen and (max-width: 767px) {
　//ここにcss記述
}

こうすることによって、PCサイズとスマホサイズそれぞれのcssの書き分けが可能になります。

しかし私が今回見つけた罠は上のような設定の時に発生します。

CSSが効かない空間が生まれてしまう原因と解決策

実例

例えばPCとスマホで別々の画像を用意し、横幅767pxをブレイクポイントとして画像の切り替えを行います。

//横幅768px以上の場合に表示する画像
<p class="pcOnly"><img src="https://j-online.ne.jp/blog/wp-content/uploads/2020/11/raul-varzar-1l2waV8glIQ-unsplash.jpg"></p>

//横幅767px以下の場合に表示する画像
<p class="spOnly"><img src="https://j-online.ne.jp/blog/wp-content/uploads/2020/11/zeke-tucker-gSSK4u8yPpM-unsplash.jpg"></p>

↓ブラウザの横幅で画像が変化する

しかしこのとき、もうすでにメディアクエリの罠にはまっています。

罠とは、ブラウザの横幅がとあるピクセルの時にcssが効かなくなる、というものです。

その時の画像がこちらです。

画像は横幅が767pxの時です。

cssが効いていないので、両方の画像が表示されてしまっています。

今回はこちらの問題を解決していきます。

原因

原因はメディアクエリの書き方にあります。

上記のようなcssの設定だと、PCのみの画像の場合は横幅が767pxの時に画像が非表示になり、

スマホのみの画像の場合は横幅768pxまで非表示になっています。

ですがこの設定だと、解像度が良いノートPCなどで横幅が767px~768pxの時、cssが設定されていないことになってしまうのです！

はい、その通りです。

ですが文字を見やすくするためにブラウザの拡大度を1.5倍や2倍にしている場合、

cssが効いていない幅が広くなってしまうなど、ないことに越したことはないでしょう。

解決方法

解決方法は私が調べたところ、以下の二つしか見つかりませんでした。

メディアクエリをmax-widthかmin-widthかのどちらかに統一する。
メディアクエリをmax-width:767.9pxに設定するなどして、少数点以下の幅にも対応させる。

メディアクエリをmax-widthかmin-widthかのどちらかに統一する

簡単にレスポンシブ化ができるメディアクエリは便利なので、ついどちらも多様しがちになってしまいます。

ですがどちらかに統一することによって、cssが効かなくなる幅を消失させることができます。

メディアクエリをmax-width:767.9pxに設定するなどして、少数点以下の幅にも対応させる

メディアクエリを小数点以下の幅でもcssが効くように設定します。

今回はこちらの方法で対応しました。

.pcOnly {
 //max-width: 767.9pxに設定し、小数点以下にも対応
 @media screen and (max-width: 767.9px){
  display: none;
 }
}

.spOnly {
 @media screen and (min-width: 768px){
  display: none;
 }
}

このように記述することによって、767px~768pxの間でcssが効かない問題を解決できました。

タブレットの検証などでブラウザを767pxギリギリまで縮めて確認するクライアントもいるかもしれないので、

定期的に意識していきたいと思います。