こんにちは。エンジニアのつっちーです。
以前に、「メディアクエリの書き方に注意しないと、ウインドウ幅と表示倍率によっては、スタイルの適用されない状態が発生してしまう」という内容の記事を書きました。 幅変更でスタイル消失!?「メディアクエリ設定」の落とし穴
つっちー
今回はその続編です。前回の記事では、対策として以下の2点を挙げ、基本的には1の方法を利用すべきであるとまとめました。
- メディアクエリの設定をmin-widthかmax-widthに統一する（推奨）
- メディアクエリの設定に小数を利用する（非推奨）
でも、たまにこの方法では不便なケースにも遭遇します。そんなときに便利なnotというキーワードがあったことを、最近になって知りましたので、もう一つの解決策として取り上げてみます。
こんなとき、min-widthかmax-widthに統一するのは大変……
上に書いたとおり、メディアクエリはmin-widthかmax-widthに統一したいものです。ブレイクポイント間のデザインの違いが、同じプロパティの値違いですべて表現できるのであれば、この方法だけで困らないでしょう。
ただ、いつでもそうはいかないもので、ブレイクポイントを境に全く異なったデザインが求められる場合もあります。このような場合、異なるスタイルを書くときに、それより前に書いたスタイルが影響しないよう、打ち消しの記述が必要になるはずです。
See the Pen
20211101 by ligdsktschy (@lig-dsktschy)
on CodePen.
ブレイクポイント間のデザインに差があればあるほど、打ち消しの記述は増え、また本来書きたいスタイルは目立たなくなっていきます。あとから読み返されるとき、あるいは別の開発者に読まれるとき、意図が伝わりづらくなってしまいます。
また、打ち消すためには、そのプロパティの既定値（デフォルト）を知る必要があり、「max-widthの既定値って何だっけ？」と時間を取られることにもなります（僕だけでしょうか……？）
その悩み、notが解決します！
そんなとき便利なのが、notというキーワードです。
これを使うと、メディアクエリの条件を反転させることができます。min-widthとmax-widthだけでは、「〜以上」「〜以下」しか表現できませんでしたが、これによって「〜より大きい場合」「〜より小さい場合（〜未満）」の表現が可能となります。
See the Pen
20211102 by ligdsktschy (@lig-dsktschy)
on CodePen.
この書き方であれば、モバイルとデスクトップのそれぞれのブロック内でスタイルの影響範囲が閉じられており、打ち消しの記述は必要ありません。本来書きたかったスタイルだけが残り、既定値を調べる手間も省くことができます。
そして、767.99…99pxといった、限りなく768pxに近いが、768pxより小さい幅がもし発生したとしても、スタイルが適用されないことはありません。もちろん実際にはそんなに細かい小数の幅は発生しえませんが、それであっても、やはりなるべく穴のないコードを書きたいものです。
まとめ
今回の例では、notキーワードによってスタイルをよりシンプルに記述できましたが、いつでもこれが最善の策になるかというと、そうは言い切れないと思います。
基本的にはmin-widthかmax-widthに統一し、打ち消しがあまりに多くなってしまう箇所のみnotを使う、くらいがよいのかなと僕は考えています。適宜つかい分けていきたいですね。
ではまた！ つっちーでした。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
