【CSS】メディアクエリ(Media Queries)の「only」とは何か？という素朴な疑問について

CSS(シー・エス・エス)

2021.09.232022.07.24

メディアクエリ(Media Queries)にonlyがある場合と無い場合があることに今さらながら気付きましたが、このonlyがある場合と無い場合の違いとは何か…？について書いてみます。

そもそもメディアクエリ(Media Queries)とは？
メディアクエリ(Media Queries)を使う条件
メディアクエリ(Media Queries)の基本的な書き方
onlyとは？
まとめ

そもそもメディアクエリ(Media Queries)とは？

「メディアクエリ(Media Queries)」とは、表示された画面サイズに応じてCSSを切り替える機能のことです。レスポンシブWebデザインを作るときに必要な指定になります。

例えば「画面のサイズが特定のサイズ以下になった時に、フォントサイズを小さくする」といった挙動をメディアクエリで設定できます。

メディアクエリは、一般的な端末の種類 (プリンタと画面など)や特定の特性 (画面の解像度やブラウザーのビューポートの幅など) に応じてサイトやアプリを変更したいときに便利です。
https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries

メディアクエリ(Media Queries)を使う条件

まずはhead内のタグにmeta要素としてviewportを指定する必要があります。下記のように、meta要素のname属性に対してviewportを指定、content属性の値にviewportの設定を記述します。

<meta name="viewport" content="width=device-width, initial-scale=1">

ビューポートはコンピューターグラフィックの中で現在表示されている領域を表します。ウェブブラウザーの用語では、これは一般にブラウザーウィンドウのうち、ユーザーインターフェイス、メニューバーなどを除いた部分です。すなわち、あなたが見ている文書の部分です。
https://developer.mozilla.org/ja/docs/Web/CSS/Viewport_concepts

メディアクエリ(Media Queries)の基本的な書き方

@media screen andという表示を入れることでメディアクエリが指定できます。

その後に「(min-width:XXXpx)」と入れることで、XXXpx以上の時に～という指定になります。

[rml_read_more]

/* スクリーンが640px以上のときにCSSを適用する */
@media screen and (min-width: 640px) {
/*ここに指定するセレクタ類を入れる*/
}

逆に、XXXpx以下の時に～というときは「(min-width:XXXpx)」という指定になります。

/* スクリーンが640px以下のときにCSSを適用する */
@media screen and (max-width: 640px) {
/*ここに指定するセレクタ類を入れる*/
}

XXXpx以上の時に～XXXpx以下の時に～を同時に指定する場合は、andで連結します。

/*　画面サイズが768px～1024pxのときにCSSを適用する */
@media screen and (min-width:768px) and ( max-width:1024px) {
/*ここに指定するセレクタ類を入れる*/
}

onlyとは？

ということで本題のonlyですが、表示がある場合と無い場合があります。

@media screen and (max-width: 600px) {
}

@media only screen and (max-width: 600px) {
}

only
only 演算子はクエリ全体が一致した場合にスタイルを適用し、古いブラウザーで選択されたスタイルが適用されるのを防ぐために使用します。 only を使用しない場合、古いブラウザーは screen and (max-width: 500px) というクエリを単なる screen として解釈してクエリの注釈を無視し、あらゆる画面にスタイルを適用します。 only 演算子を使用する場合は、メディアタイプも指定しなければなりません。
https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries

つまり、この説明によると、古いブラウザーはonlyを入れておかないと、メディアクエリが効かずにCSSが全部の画面サイズで適用されてしまう可能性がある…ということのようです。