【CSS】「メディアクエリー」で使える「論理演算子」について解説！【not, only, and】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事では「メディアクエリー」で使える「論理演算子」について解説します！論理演算子の使い方についても丁寧にまとめていくので、興味がある方はぜひご一読ください。

また、下の動画でも「メディアクエリー」で使える「論理演算子」ついて詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

そもそも「メディアクエリー」とは何か？

そもそも「メディアクエリー」って何？？？という方はまず下記の記事からどうぞ！こちらで丁寧に解説しています！

「メディアクエリー」で使える「論理演算子」にはどのようなものがあるのか？

「メディアクエリー」で使える「論理演算子」には下記のようなものがあります！

• not
• only
• and

「メディアクエリー」では、これら３つを使うことができます。

この記事では「@media」を使いながら、メディアクエリーにおける「論理演算子」の使い方をみていこうと思います！のでぜひ最後まで読んでいってね！

「not」の使い方！

@media not screen {
    body {
        background-color: purple;
    }
}

「メディアクエリー」では、「@media」のすぐ隣に「not」を置くことができます。

このように書くと、それ以降の部分が「false」だった場合に、{}の中身が適用されます。

通常は、条件が「ture」なら、{}の中身のスタイルが適用されるのですが、それを反転させることができるのが「not」です。

「only」の使い方！

@media only screen and (max-width: 1080px) {
    body {
        background-color: purple;
    }
}

「only」は古いWebブラウザーのためにある機能です。なので最新のブラウザー向けにサイトを作る場合は、ほとんど使わなくてもいいと思います。

どんなことができるかと言うと、古いブラウザーだと「screen and (max-width: 1080px)」の部分を単に「screen」と解釈してしまうことがああり、そうなると、残りの部分は無視されて、上手く条件分岐できず全てにスタイルが適用されてしまう、のようなことが起きてしまうのですがそれを防ぐ為に「only」は使われます。

「only」を使うと、全ての条件で「true」の場合のみ、スタイルを適用させることができます。

「and」の使い方！

@media screen and (max-width: 1080px) and (min-width: 600px) {
    body {
        background-color: purple;
    }
}

「and」は条件を追加する際に使うことができます！

「メディア種別」と「メディア特性式」を繋ぐ箇所で使われたり、単に「メディア特性式」を追加する際にも使われます。

条件が増えると、それらの条件が全て「true」の場合にだけスタイルが適用されるようになるので、その辺も押さえておいてください！

「,」カンマの使い方！

@media (min-width: 1080px), (width: 900px) {
    body {
        background-color: purple;
    }
}

「,」カンマを使うと、もう一つの条件を「or」で追加することができます！

「and」で条件を追加した場合は、「かつ」なので全ての条件が「true」であることが必須ですが、「,」カンマで条件を追加した場合には「または」の意味になるので、どちらかの条件が「true」の場合に、全体が「true」になり、スタイルが適用されます！

なるほどね！

「not」と「only」を使う場合は「メディア種別」の指定が省略できない

@media not screen and (max-width: 1080px) {　　　　〇
    body {
        background-color: purple;
    }
}

@media not (max-width: 1080px) {　　　　×
    body {
        background-color: purple;
    }
}

「not」と「only」を使う場合は、「メディア種別」の指定が省略できないので、注意してください！

「Google Chrome」だと補正がかかるのかも

「Google Chrome」で「not」を使い「メディア種別」の指定を省略するってのを試してみたら、なぜか普通に動きました。

おそらく補正がかかっているのだと思われます。ですが、やっぱり正しい書き方をした方がいいと思うので、省略できないというルールがあることを覚えておいてください。

参考リンク！

仕様書。
https://drafts.csswg.org/mediaqueries/

MDN。
https://developer.mozilla.org/ja/docs/Web/CSS/@media#%E8%AB%96%E7%90%86%E6%BC%94%E7%AE%97%E5%AD%90

あわせて読みたい記事。

まとめ！

「メディアクエリー」で使える「論理演算子」には下記のようなものがあります！

• not
• only
• and

「not」を使うと条件を反転させられる！

「only」を使うと古いブラウザーに対応することができる！

「and」を使うと条件を追加することができる！

「,」カンマを使うと、もう一つの条件を「or」で追加することができる！

「not」と「only」を使う場合は「メディア種別」の指定が省略できない。

この記事が気に入った方は僕のTwitter（@chibasyuta）のチェックもお願いします！

また、下の動画でも「メディアクエリー」で使える「論理演算子」ついて詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それではこんな感じでこの記事を終わります！

ではまた！