デバイスの幅によってそれぞれ適したcssを読み込むために必要な“メディアクエリ（Media Queries）”をしっかりと理解していますか？
この“メディアクエリ”とは、主にスマホ対応するレスポンシブデザインに必須となるタグで、メディアタイプやメディア特性によって各種対応するデバイスや、分岐条件（widthを用いた横幅のサイズ）などを指定するとことによって、Webサイトを各種デバイスに適した形で見せることができ、最近ではheadタグやcssに必ずと言って良いほど記述されていると思われます。
※アクセスしてきたデバイスの幅を読み取る“viewport（ビューポート）”の記述も必須です。
その設定・記述方法は思ったよりも簡単で、Webページに関して言えば単純に横幅を指定して読み込むcssを変えるだけのもので、後ほど詳しくご説明しますが、複雑にならないための管理方法としてひとつのcssに全てをまとめているという方も多いのではないでしょうか？
このようにメディアクエリとは、以下のようにcssファイルそのものをデバイスの幅によって変更させたり、cssファイル内で読ませるスタイルを変更することも可能です。
- 読み込むcssファイルそのものをデバイスによって変える
- 読み込むスタイルをデバイスによって変える
両者は似ているようですが、要はstyle.cssを振り分けるのか？それともcss内で読み込むスタイルを切り替えるのか？といった違いで、その場合メディアクエリの記述方法が若干異なり、基本的にデバイスの横幅を指定するだけで各種css・スタイルを適応させることができるというものです。
※ここで指定する横幅の数値をブレイクポイントと呼びます。
そのため、このメディアクエリはレスポンシブデザインには欠かせないもので、簡単に言うと…ビューポートでアクセスしてきたデバイスの横幅を取得、メディアクエリで読み込むcssを振り分けることで適宜デバイスに合った見せ方ができ、SEOやユーザビリティにも繋がる重要な役割を果たすタグと覚えておくと良いでしょう。
では今回は、アクセスして来たデバイスによって適したcssを振り分けるために必要な“メディアクエリ”について、意味や記述方法など詳しくご説明していきたいと思います。
メディアクエリとは？
“メディアクエリ”とは、訪問ユーザーが使用するデバイスの幅に合わせたWebの見せ方を可能にするもので、スマホからアクセスした際にPC用のページが表示されると当然文字が小さくて閲覧しにくい…といったユーザビリティを考慮して画面サイズに適したデザイン表示させるために必要なタグです。
もちろんそういったサイトは使いづらい・見にくいといった理由から一瞬で検索結果ページに戻ってしまう可能性が高いため、多くのサイトがスマホ対応を重要視しているのではないでしょうか？
また、スマホが普及しはじめた頃はまだまだPCによる検索が多くを占めていましたが、2016年11月にGoogleが公式ブログにて発表したモバイルファーストインデックスを機会に多くのサイトがレスポンシブデザインを導入し、特に最近ではスマホからの検索数の方が増えていますので、スマホ対応はもちろん必須の対策と言えます。
※参考：Google ウェブマスター向け公式ブログ [JA] : モバイル ファースト インデックスに向けて
他にも最近ではiPadなどのタブレットも大変多くの機種が発売され、その画面サイズも実に様々あり、モニターサイズも年々大きく鮮明になる傾向ですので、敢えてタブレット対応までは考慮していないというサイトも少なくありません。（この辺りはWordPressをお使いの場合ならすでにテーマ側で対応済みかと思われます。）
そのため、独自でスマホ対応する際は主にPCとスマホの表示を区別するだけでも十分かと思われ、後ほどご説明する“ブレイクポイント”と呼ばれるデバイスの幅（PC・スマホに適応させるcssを振り分ける境界となるサイズ）を現在発売されているスマホやタブレットなどから決めると良いでしょう。
そしてそのメディアクエリに記述するメディア属性は主に“メディアタイプ”と“メディア特性”から成り立っています。
キーワード選定におすすめのキーワードツールをご紹介しています。
メディアタイプ
メディアタイプとは、メディアクエリのメディア属性に記述するもので、どのメディアにcssを適応させるのかを指定します。
具体的に言うと…メディアクエリ「media=”screen and (min-width:768px)」の下線の部分を指し、以下のように様々な種類が定義されており、主にWebサイトで使用するため、“screen（モニターやディスプレイ）”や“all（全てを対象）”を指定している方が多いのではないでしょうか？
all (すべてのデバイスに適した)
braille (点字)
embossed
handheld (ハンドヘルドコンピュータ)
projection
screen
speech
tty
tv
ただし、「Media Queries Level 4 （日本語訳）」によると、“Media Queries Level 4”からは、以下の4つがメディアタイプとして推奨とされているようです。
このように簡素化されたことによって、主に使用するメディアタイプは“all”もしくは“screen”、そして印刷用のcssを考慮した“print”辺りを覚えておくと良いでしょう。
- all
- screen
- speech
ここでWebページの印刷も考慮すると「media=”print , screen“)」と記述することで、指定したcssを読み込んだ状態でプリントすることが可能です。（メディアタイプはカンマで複数指定可能です。
注意点としては、印刷に対応していないcssのプロパティも多いので、Chromeのエミュレーターを利用して印刷時の見え方をチェックしてみたり、実際にプリントアウトしてみると良いでしょう。
ここではデベロッパーツールの3点リーダーをクリックして「More tools」＞「Rendering」に表示される“Emulate CSS media type”の項目から“print”を選択すると確認することができます。
場合によっては印刷時のcssを考慮した際のメディアタイプとして「href=”/css/print.css” media=”print“)」と記述し、別途印刷用のcssを用意する必要があります。
ポイントとしては、主に印刷する際は当然クリックできるわけでもありませんので、場合によってはグローバルメニューやスライド画像を非表示にしたり、資料としての見やすさを優先させてcssを記述していくと良いかと思われます。（意外と崩れているケースも多いので、一度チェックしてみても良いかもしれません。）
メディア特性
続いての“メディア特性”とは「media=”screen and (max-width:787px)“」の下線の箇所を指します。
※「and」という演算子をメディアタイプとの間に記述するわけですが、「,（カンマ）」もそのひとつです。
他にも“height（ビューポートの高さ）”や“orientation（ビューポートの向き：portraitは縦向き・landscapeは横向き）”など“メディア特性”には数多くの種類がありますが、レスポンシブデザインの導入によってスマホ対応するために必要なのは概ね“width（ビューポートの横幅）”だと認識しておいて間違いありません。
参考：@media – CSS: カスケーディングスタイルシート | MDN
これは主にブレイクポイントと呼ばれるデバイスの横幅といった意味で、上記の場合だと横幅最大787pxまでのデバイスを対象とするわけです。（787px以下のスマホを対象とする。）
ただし、ここで注意したいのは…iPhoneシリーズに記載されている解像度（px）は主にデバイスピクセルと呼ばれるRetinaディスプレイなど1ピクセルに含まれる数を考慮したもので、実際のサイズとはまた異なります。（実際に着目するべきサイズはcssピクセルと呼ばれる論理上の画面サイズです。）
それを元にすると…最近の機種だと以下のようなサイズ（括弧内はデバイスピクセル比）となり、例えば“iPhone XS”の場合だと公式ページには2,436×1,125ピクセル解像度と記載されていますが、2xや3xと表示されるデバイスピクセル比を考慮するとブレイクポイントとする数値は375×812（横・縦）となります。
- iPhone 6/7/8：375×667（2x）
- iPhone 6/7/8 Plas：414×736（3x）
- iPhone X/XS：375×812（3x）
- iPhone XR：414×896（2x）
- iPhone XS Max：414×896（3x）
※参考：The Ultimate Guide To iPhone Resolutions
ちなみにこのデバイスピクセル比は、ChromeやFirefoxのデベロッパーツールからも確認することができます。（レスポンシブデザインモードの各種デバイスを変更するとチェックできます。）
そして、タブレットである“iPad”の最小サイズが768×1,024となっているため、この数値を基準にしているケースが多く、タブレットのシェアを考慮して横幅768px以下のデバイスは全てモバイル用のcssを読み込んでいる方も多いのではないでしょうか？
または、アナリティクスの「ユーザー」＞「モバイル」＞「概要」からセカンダリディメンションの「ユーザー」＞「画像の解像度」を選択し、さらに“アドバンスフィルタ”にて“mobile”に絞って抽出すると、この場合一番多いのは“375×667（デバイスピクセル比2=750×1,334）”と“375×812（デバイスピクセル比3=1,125×2,436）”となっていて、恐らく“iPhone 8”と“iPhone X”からのアクセスが多いものと思われます。
メディアクエリの記述方法
では続いてこの“メディアクエリ”の記述方法についてです。
通常、cssを外部ファイルとして読み込む際、各ページのhead内には以下のような記述があるはずです。
<link rel="stylesheet" href="/css/style.css">
メディアクエリはこのリンクタグにメディアタイプとメディア特性を追記する形で記述していき、htmlファイルに書くケースと、cssファイルそのものに書くケースと2パターン存在します。
要は外部ファイルとして指定するパターンと直接記述するパターンがあるというわけです。
cssファイルを分けて管理するのか？それともひとつのcssファイルで切り替えるのか？これはサイト・ブログのボリュームにもよって選択すると良いでしょう。
また、このメディアクエリはビューポートがあってはじめて機能するので、基本となる以下のタグもhead内に必ず記述してください。（「width=device-width」とは文字通りデバイスサイズのことを意味します。）
<meta name="viewport" content="width=device-width">
htmlに記述する場合
ここでスマホ対応するために読み込むcssを切り替えるためには、以下のように“media=〜”のタグを追記します。この部分をメディアクエリと呼び、中身の部分をメディア属性と呼びます。
<link rel="stylesheet" href="/css/mobile.css" media="screen and (max-width:767px)">
そしてcssファイルそのものを分岐させるのであれば、上記のような書き方で問題なく、PC用のcssファイルも考慮すると以下のように複数指定することとなります。
この場合だと“screen（ディスプレイ）”を対象に横幅最大767pxまでのデバイスにmobile.cssを適応させるという意味合いとなります。
<link rel="stylesheet" href="/css/style.css" media="screen and (min-width:768px)"> <link rel="stylesheet" href="/css/mobile.css" media="screen and (max-width:767px)">
この場合、上記と同じく“screen（ディスプレイ）”を対象に「min-width:768px」…横幅768px以上のデバイスはstyle.cssを読み込み、「max-width:767px」…767px以下のデバイスではmobile.cssを読み込むという意味となります。
ただ、ブレイクポイントについてはここまで大きなサイズのスマホが主流となっているわけではありませんので、あくまでiPadの最低サイズを指標としているというわけです。
キーワード選定に悩んでいませんか？
cssに記述する場合
また、この記述方法については冒頭でもお伝えした通り2パターンのケースがあり、上記のようにcssファイルそのものをリンク要素として振り分ける以外にも、css内で読み込むスタイルを分岐させることも可能です。
こちらは下記のように「@」を付けてメディアクエリを記述し、「{ }」の中に適宜適応させるスタイルを記述していきます。これだとひとつのcssファイルで管理することもできますので、サイトの規模を考慮して使い分けると良いでしょう。（あまりにも大規模なサイトだと数千…場合によっては1万行を超える膨大な行数となってしまいますので、別途スマホ用のcssを分けて管理した方が修正しやすいかと思われます。）
そしてこの中に書いたスタイルに関しては、メディアクエリで指定したサイズのデバイスのみ適応となるわけです。
注意点としては、修正作業中にスタイルが適応されないと思っていたら…異なるデバイスの箇所に記述・変更を加えていたというケースもありますので、その辺りに関しては適宜確認しながらの作業が必要となります。
@media screen and (min-width: 768px) {
（ここにPC用スタイルを記述）
}
@media screen and (max-width: 767px) {
（ここにモバイル用スタイルを記述）
}
ちなみにその中間としてタブレットにも対応したいという場合は以下のように記述します。
@media only screen and (min-width: 767px) and (max-width: 1280px) {
（ここにタブレット用スタイルを記述）
}
ここでは“StatCounter”を参考に、国内で使用されているPC用ブラウザのシェアを元にブレイクポイントを設定したと仮定しています。（最も小さいサイズをブレイクポイントとした場合。）
参考：StatCounter Global Stats – Browser, OS, Search Engine including Mobile Usage Share
ちなみにひとつのcssで管理する場合のコツとしては、まずPC用のスタイルをそのままコピーして、それぞれをPC用・スマホ用のスタイルをメディアクエリで囲みます。
そしてスマホ対応として必要なプロパティをデベロッパーツールなどでチェックしながら書き換えていくと管理しやすいかと思われます。というのも…PC・スマホ共通のスタイルを使い回し、部分的にスマホ用のスタイルを追記していくと、後々PC用のスタイルを調整したつもりがスマホでは想定外のデザイン・表示となってしまう可能性があるからです。
こういった管理方法で長期間運用してしまうと、一箇所変更すると様々なところに影響を及ぼしてしまいますので、できればPCのスタイルをそのままスマホにも適応させて、適宜修正していった方が間違い・ミスを防げるでしょう。
まとめ
今回は、ユーザーファーストのためには欠かせないスマホ対応のレスポンシブデザインに必須となる“メディアクエリ”について意味や記述方法について詳しくご説明しました。
このように“メディアクエリ”とは、メディア属性・メディアタイプ・メディア特性といった若干複雑な名称が並ぶため、少しややこしく感じられるかもしれませんが、正しく理解することによって様々なデバイスにも対応することも可能ですし、拘るならRetinaディスプレイに対応するcssをそれぞれ記述することもできる非常に便利なcssの仕様のひとつです。
そして、冒頭でもご説明した通り、このメディアクエリはビューポートがあってはじめて機能するものなので、こちらの記述も必ず一緒に覚えておくと良いでしょう。
また、以前はスマホ対応したからといって順位に影響することはありませんでしたが、最近は特にユーザーエクスペリエンスといったユーザーのサイト内での行動なんかも重要視されているため、見やすさ≒ユーザビリティと考慮してストレスなく閲覧できるデザイン設計を心がけることが重要となります。
