【CSS】画面サイズによる場合分け～メディアクエリを深掘り

前回のブログ投稿で、レスポンシブサイトでメディアクエリに触れましたので、今回ここを掘り下げてみようと思います。

もうほとんどのクリエイターの方はメディアクエリ

＠media screen and ( min-width: 768px ) {................}

（768pixel 以上）

＠media screen and ( max-width: 768px ) {................}

（768pixel 以下）

は、ご存じであると思いますが…

ほぼこれで事足ります(笑)

でも、メディアクエリは深堀りすると・・・結構色んな使い方ができるんですよね。

今回はそこをご紹介いたします。

※「＠」は、このブログでの都合上、全角を使用しております。ご了承ください。

　（半角アットマークは禁止ワードに設定されているようです(^^;)）

■複数条件の連結

■AND条件

・複数の条件を「かつ」で結ぶときは「and」キーワードを利用します

＠media screen and ( min-width: 480px ) and ( max-width: 640px ) {................}

　この場合、「画面の幅が、480px～640pxの場合」という意味になります

■OR条件

・複数の条件を「または」で結ぶときには、各条件を「, カンマ」で区切って記述します

＠media screen and ( min-width: 480px ) , screen and ( max-width: 640px ) {................}

　この場合、「画面の幅が、480px以下、または640px以上の場合」という意味になります

　（481～639pxの範囲だけ除外する条件になります）

■否定条件とonly

■not（否定条件）の指定

・＠mediaに続けて「not」キーワードを記述すると否定条件を指定できます

＠media not screen and ( max-width: 480px ) {................}

　この場合、「画面の幅が、480px以下ではない場合」つまり「480px以上」という意味になります。

・否定条件を利用するときは、「メディアタイプ」の記述が必須です

■onlyキーワードの指定

・メディアクエリをサポートしていない古いブラウザ向けの対策として利用します

　（つまり、「only」があると古いブラウザでは無視、「only」がないと古いブラウザではメディアクエリにかかわらず、そのまま実行されます）

・メディアクエリをサポートしているブラウザでは、問題なくメディアクエリが処理されます

＠media only screen and ( max-width: 480px ) {................}

※現在の主要ブラウザでは、onlyを付けても付けなくても動作はほぼ変わりません。

　昔のブラウザとの互換性のために使われていた記述です。

■画面の幅以外の条件指定

・メディアクエリの条件指定に利用できる主なプロパティ

■width

・「画面の幅」を条件に指定できます

・max-width（以下）、min-width（以上）などのプロパティを使用することも可能です

■height

・「画面の高さ」を条件に指定できます

・max-height（以下）、min-height（以上）などのプロパティを使用することも可能です

・実際には、Webの世界の高さはフレキシブルが基本のためほぼ指定することはありません

■aspect-ratio

・「画面の縦横比」を条件に指定できます

・横方向と縦方向の比率を「/ スラッシュ」で区切って値を指定します

＠media screen and ( min-aspect-ratio: 4/3 ) {................}

この場合、画面の比率が、「４：３」より横長になったときに、メディアクエリの条件が有効になります

■device-width / device-height / device-aspect-ratio （非推奨）

・「画面の幅/高さ/縦横比」を条件に指定できます

・これらのプロパティで条件を指定した場合は、Webの表示領域ではなく端末の画面サイズに有効/無効が判別されます

＠media screen and ( min-device-width: 1600px ) {................}

　この場合、「液晶画面の幅」が1600px以上のときに、メディアクエリの条件が有効になります。

※物理的な画面サイズで判別されるため、ブラウザウィンドウを変更しても変化することはありません。

　「ブラウザを縮めてもレイアウトが切り替わらない」

　「分割画面（マルチタスク）に対応できない」

　「高解像度（Retina）ディスプレイや拡大ズームとの相性が悪い」

　などの理由から、「非推奨」となっております。

■orientation

・「画面の向き」を条件に指定できます

・縦向き（縦長）の場合は「portrait」、横向き（横長）の場合は「landscape」を値にします

＠media screen and ( orientation: landscape ) {................}

　この場合、端末を横向きしたときにだけ、メディアクエリの条件が有効になります。

※ブラウザの表示領域が横長・縦長でも判定されるため、

「スマホだけ」と思って使うと意図しない動作になる場合があります。

　よって、実際に使用するときには以下のように記述します。

＠media screen and ( max-width: 640px ) and ( orientation: landscape ) {................}

■resolution

・「画面の解像度」を条件に指定できます

　以下のように記述すると、画面の解像度が300dpi以上のときにメディアクエリの書式指定が有効になります。

＠media screen and ( min-resolution: 300dpi ) {................}

　通常の2倍の画素数を持つデバイス（Retinaディスプレイなど）へ高精細な画像やスタイルを適用する際には、以下のように記述します。

＠media screen and ( min-resolution: 2dppx ) {................}

■全面デザインのメイン画像を作りたい場合

メイン画像の縦横比が4：3の場合、

/*「４：３」より横長になったとき */
＠media (min-aspect-ratio: 4/3) {
    .main_image img{
        width: 100%;
        height: auto;
        ..........
    }
}

/*「４：３」より縦長になったとき */
＠media (max-aspect-ratio: 4/3) {
    .main_image img{
        width: auto;
        height:100%;
        ..........
    }
}

とすれば、良いわけです。

CSSのみで画面比が判断できるって素晴らしいですね(^▽^)

メディアクエリは「画面幅」だけでなく、「画面比率」「画面の向き」「解像度」など、意外と多くの条件を指定できます。

必要になったときに思い出せるよう、頭の片隅に置いておくと役立つかもしれません☆