【2020年版】メディアクエリ（Media Queries）とブレイクポイント【CSS】

メディアクエリ（Media Queries）とは

パソコンやスマートフォン、タブレットなど画面サイズ（解像度）が異なるデバイス毎にCSSのスタイルを振り分けるためのタグです。レスポンシブなWEBサイトを構築するためには必須のタグでしょう。

また、メディアクエリを使ってデバイス毎に適応させるCSSスタイルを切り替えるポイント（主に横幅）を「ブレイクポイント」と言います。

メディアクエリの指定方法

基本構文

メディアクエリの基本構文です。

@media メディアタイプ and (メディア特性の指定) { 適応させるCSSを記述 }

メディアタイプについて

「メディアタイプ」とは、どのメディアにcssを適応させるのかを指定します。省略も可能です。

主なメディアタイプとして下記のものが挙げられます。

all	全てのデバイス
print	印刷時のプレビュー
screen	printにもspeechにもあてはまらないもの全て（パソコンやタブレット、スマートフォンなどの画面）
speech	スクリーンリーダーなど

メディア特性の指定

「メディア特性」の部分には、ウインドウサイズの横幅のピクセル数値がはいります。
例えば下のように記述します。

@media screen and (max-width: 1068px) and (min-width: 768px) { CSSを記述 }

上の例の場合は、最大1068pxから最小768pxまでのウインドウサイズ時に、記述したCSSを適用させる、という意味になります。

@media screen and (max-width:767px) { CSSを記述 }

また、上のように書くと、横幅最大767pxまでは以下のCSSを適応させる、という意味になります。

@media screen and (min-width:1024px) { CSSを記述 }

上のように書くと横幅最小1024pxまでは以下のCSSを適応させる、という意味になります。

ブレイクポイントについて

ブレイクポイントの例（Apple、Google、Microsoft）

参考までにApple、Google、Microsoftの各サイトメディアクエリをどのように書いているかを調べてみました。（2020年10月現在）

Googleはシンプルです。書き方も各社それぞれと言う感じです。

Apple

@media screen and (max-width: 734px) and (min-width: 0px)
@media screen and (max-width: 767px) and (min-width: 735px)
@media screen and (max-width: 1068px) and (min-width: 768px)
@media screen and (max-width: 1440px) and (min-width: 1069px)
@media screen and (max-width: 1441000px) and (min-width: 1441px)

Googleについて

@media (max-width:600px)
@media (min-width:1024px)
@media (min-width:1440px)

Microsoft

@media screen and (max-width:1778px)
@media screen and (max-width:1399px)
@media screen and (max-width:1083px)
@media screen and (max-width:767px)
@media screen and (max-width:539px)

@media only screen and (min-width:1400px)
@media only screen and (min-width:1084px)
@media only screen and (min-width:768px)
@media only screen and (min-width:540px)

ブレイクポイントの値は幾つがいいのか？

ブレイクポイントの値を幾つにするのかは、結構悩みどころです。

だいたいパソコン向け、タブレット向け、スマホ向けでブレイクポイントを分けるのですが、スマートフォンは毎年発売されますし小さいサイズのスマートフォンも存在します。タブレットに関してはもう把握しきれません。しかもスマホやタブレットの縦で見た場合（ランドスケープ）と、縦で見た場合（ポートレート）も考慮しなければなりません。

2020年のスマートフォン、タブレットの国内のシェアをとその画面解像度を下記にまとめてみました。

	横 x 縦 (CSSピクセル)
iPhone11	414 x 896
iPhone8	375 x 667
iPhone7	375 x 667
iPhone11 Pro	375 x 812

	横 x 縦 (CSSピクセル)
iPad 10.2インチ	810 x 1,080
iPad pro 11インチ	834 x 1,194
iPad Air 10.9インチ	820 x 1,180
iPad mini 7.9インチ	768 x 1,024

≫ iPhone11、2020年4月のスマホシェアで8カ国中6カ国でトップ5入り

自分的には上記のシェアの高いデバイスの解像度を意識しながらブレイクポイントを決めています。

見た目のチェックに関しては、一応実機があるものは実機で見た目の確認はしますが、もちろん全てないのでChromeの開発ツールのシミュレータなど使って確認しています。

参考までに自分が使っているメディアクエリの設定です。いつもこのままと言う分けではなく、サイトごとにブレイクポイントは調整しています。

@media screen and (max-width:599px) { /* 小さい画面のスマホ用 */ }
@media screen and (min-width: 767px)　and (min-width: 600px)　{ /* スマホ用 */ }
@media screen and (max-width: 1068px) and (min-width: 768px)　{ /* タブレット & スマホ用 max-widthサイズはデザインによってその都度変更 */ }
@media screen and (min-width: 1069px) { /*パソコン用 min-widthサイズはデザインによってその都度変更 */ }