2-1. メディアクエリによる表示の切り替え

1.メディアクエリとは

メディアクエリ（Media Queries）とはCSSの記述に条件を加える記法です。

CSS2ではメディアタイプ（Media types）というものがあり、メディアごとにCSSの適用範囲を変えることができました。しかし、スマホやタブレットの普及によりWebサイトで多様なデバイスに対応する需要が高まりCSS3で登場したのがメディアクエリです。

メディアクエリによりブラウザサイズごとに適用されるCSSのを変えることができるようになりました。

JavaScriptでもレスポンシブ対応する方法はありますが、メディアクエリでの実装はシンプルでわかりやすく実装することができます。

2.Viewportの指定

メディアクエリを正しく動作させるにはViewportの指定が必要です。

Viewportで画面のサイズを限定すると意図しない表示になる場合があるので必ず設定しておきましょう。

<meta name="viewport" content="width=device-width">

3.インライン記述方法

メディアクエリのインライン記述方法を紹介します。

@media (max-width: 1280px) {
  h1 {
    color: #f00;
  }
}

・ブラウザサイズが 1280px以下の時
・h1 { color: #f00; } を適用する

もう１つ例をあげます。

@media (min-width: 768px) and (max-width: 1080px) {
  .text {
    color: #0f0;
  }
}

・ブラウザサイズが 768px以上かつ1080px以下の時
・.text { color: #0f0; } を適用する

上記２つのデモです。ブラウザの横幅を変えると文字色が変わります。
https://codepen.io/youhe_/pen/xvxLZz

このようにメディアクエリで"ブラウザサイズを指定"して"その {} 内にCSSを書く"ことで特定のブラウザサイズでのみ動作するCSSを書くことができます。

4.アウトライン記述方法

CSSを読み込む時にファイルごと条件を指定することもできます。

<link href="css/mobile.css" rel="stylesheet" type="text/css" media="max-width: 767px" >

・ブラウザサイズが 767px以下の時
・mobile.cssを適用する

5.ブラウザサイズの指定方法

次にブラウザサイズの指定方法を紹介します。主に使用するのは以下の２つです。

max-width

max-widthはビューエリアの最大幅を指定できます。
max-widthで指定した幅より小さい場合にスタイルが適用されます。

min-width

min-widthはビューエリアの最小幅を指定できます。
min-widthで指定した幅より大きい場合にスタイルが適用されます。

6.よく使うメディアクエリ

スマホのみCSSを適用する

iPadの768pxを基準にして、767px以下の場合CSSを適用するメディアクエリです。
@media all and (max-width: 767px) {...}

PCのみCSSを適用する

ホバーのアニメーションをつける時などに使います。

@media all and (min-width: 980px) {...}

7.【おまけ】メディアタイプについて

冒頭でも少し触れましたが、メディアクエリと似たような記述でメディアタイプというものが存在します。以下のような記述で、先ほど紹介したよく使うメディアクエリでも使っています。

@media all and (min-width: 768px) {
  h1 {
    color: #f00;
  }
}

このallがメディアタイプになります。
メディアタイプでは出力するメディアを指定できます。
・all → 全て
・screen → ディスプレイ
・print → 印刷
・speech → 音声
あまり使い分けることはないですが、こんなものがあるんだ程度で覚えておくと良いと思います。