763万 キーワード

2021年 検索パフォーマンス

57.8万 ユーザー

2021年 訪問ユーザー数

WordPressのスキルアップはこちら!▶[click]

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

CSS(シーエスエス)
この記事は約4分で読めます。
スキルアップで未来を変える!!
情熱があれば【誰でも】挑戦できます!
ここからSTART↓

メディアクエリ(Media Queries)にonlyがある場合と無い場合があることに今さらながら気付きましたが、この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という表示を入れることでメディアクエリが指定できます。

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

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

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

/* スクリーンが640px以下のときにCSSを適用する */
@media screen and (min-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が全部の画面サイズで適用されてしまう可能性がある…ということのようです。

まとめ

onlyのことを書いたつもりが、思ったよりも長い内容になってしまいました…(^_^;

ひとまずonlyは入れていた方が古いブラウザーでの不具合を防ぐことになる…という解釈ではありますが、はたして、どこまで古いブラウザー対策をするべきなのだろうか…という気もします。もし必要があれば随時入れておくほうがいいのかもしれません。研究、研究。

御参考ください😃

Loading
「ワードプレスで未来を変える!」
【未経験挑戦可!】スキルアップしたい!WordPressに挑戦したい!何かに挑戦して人生を変えたい!!という方をお待ちしています↓↓
CSS(シーエスエス)
EGUWEB
タイトルとURLをコピーしました