お問い合わせ

    氏名

    メールアドレス

    件名

    メッセージ本文



    763万 キーワード

    2021年 検索パフォーマンス

    57.8万 人が訪問

    2021年 訪問ユーザー数

    WordPressのスキルアップはこちら!▶[click]
    いま、どうしてる? 誰でも検索できます

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

    CSS(シーエスエス)
    この記事は約4分で読めます。
    「ワードプレスで未来を変える!」
    誰でも挑戦できます!!
    【未経験挑戦可!】スキルアップしたい!WordPressに挑戦したい!何かに挑戦して未来を変えたい!という方をお待ちしています↓↓

    メディアクエリ(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
    タイトルとURLをコピーしました