最近では、一人でPC、スマートフォン、タブレットを持っている人も多くなりました。2021年２月時点で日本のディバイス使用率は、PCは42.63%、スマートフォンは54.46%、タブレットは2.91%となっています。ユーザが複数の異なる画面サイズでWEBサイトを閲覧するようになり、サイト側もそれに合わせてレイアウトやデザインの調整が必要になります。
そこで登場したのが、どの画面サイズでもHTMLファイルは同じだけど、画面サイズの違いで読み込むCSSファイルを変えるという「レスポンシブルデザイン」です。
レスポンシブデザインでは、ディバイスの幅に合わせて出力するCSSを制御するにはメディアクエリ（Media Query）が必要になります。
今回は、メディアクエリ（Media Query）の記述方法について解説していきます。
メディアクエリとは？
メディアクエリ（Media Query）とは、メディアタイプや画面サイズ（解像度）に合わせて適応するCSSを切り替えるCSS3のモジュールです。
screen（一般的ディスプレイ）、projection(プロジェクター)、print(プリンタ)、tv(テレビ)、all(すべて)といったメディアタイプと画面サイズ（解像度）を指定することで、細かく適応するCSSを切り替えることができます。
メディアクエリの書き方
メディアクエリ（Media Query）は、HTML内に記述する場合とCSS内に記述する場合があります。目的や状況に合わせて使い分けてください
HTML内に記述する場合
以下のようにhtmlでは<head>タグ内に記述します。
<link rel="stylesheet" href="style.css" type="text/css" media="screen and (max-width:480px)">読み込むCSSを指定して、読み込む条件のメディアタイプとメディア特性を記述します。
メディアタイプで、screen（一般的ディスプレイ）、projection(プロジェクター)、print(プリンタ)、tv(テレビ)、all(すべて)など、どのメディアにCSSを適合させるのかを指定します。
メディア特性では、画面サイズ（解像度）の条件を指定します。例えば、max-width：480pxであれば画面サイズが480pxまでは指定したCSSを適応します。mix-width：1028pxであれば画像サイズが1028px以上の場合に適応します。
HTML内に記述する場合の特徴としては、<head>に追加することで簡単にCSSを適応出来る反面、ブレイクポイント（出力条件）が多くなるほど、CSSファイルが増えメンテンスが大変になります。
CSS内に記述する場合
以下のようにCCS内に記述します。CSSではメディアクリエをしてするのに「@media」を記述します。PCとスマフォどちらを優先するかで書き方が変わります
スマフォを優先する場合
スマフォで閲覧することを基本にCSSを設計していき、タブレット用、PC用のCSSを指定していく流れになります。こうすることで、スマフォでアクセスした際に無駄に読み込むCSSを軽減することができます。
@media screen and (min-width: 481px) {
/* タブレット用 */
}
@media screen and (min-width: 960px) {
/* PC用 */
}PCを優先する場合
PCで閲覧することを基本ににCSSを設計していき、タブレット用、PC用のCSSを指定していく流れになります。以前から行われている記述の仕方なので、馴れている方も多いと思います。
@media screen and (max-width: 959px) {
/* タブレット用 */
}
@media screen and (max-width: 480px) {
/* スマホ用 */
}
SEO視点で考えると、「スマフォを優先する場合」をおすすめします。現在、スマフォでの評価が検索ランキングに影響します。余計なCSSを読み込むことでページ表示速度が遅くなり、評価を下げる要因になることは避けたほうがいいと考えます。
Googleアナリティクスから最もアクセスが多い画面サイズを調べる
すべてのディバイスや画面サイズ（解像度）には限界があります。まずはGoogleアナリティクスでアクセスが最も多い画面サイズを調べてみましょう。
Googleアナリティクスにアクセスし、ユーザー＞テクノロジー＞ブラウザとOSを選択します。グラフ下にある「画面の解像度」を選択し、セカンダリディメイションでブラウザのサイズを指定することで一番多い画面サイズを知ることができます。
以上、メディアクエリとは？レスポンシブル対応する書き方でした。
