オススメ記事
メディアクエリ（Media Queries）の書き方を紹介します。
「link要素として指定する方法」や「スタイルシートで指定する方法」など、それぞれの記述コードを用意しました。さらに、各デバイスの解像度（画面サイズ）やブレイクポイントを判断する方法などを解説しています。
スポンサーリンク
目次
メディアクエリ（Media Queries）とは？
メディアクエリ（Media Queries）とは、webページの表示をデバイス環境に応じて切り替える機能のことです。「画面サイズの幅がこれ以上（または、これ以下）だったら、このスタイルを適用」「画面が横向きならこのスタイルを適用」といったことが、1つのHTMLで対応することができる。CSS3より導入された新しい要素です。
以前のように、スマホ版とPC版を分けて用意する必要が無いため、ファイルの管理や更新の効率性が上がります。
レスポンシブデザインの重要性
モバイル非対応のサイトは、ユーザビリティを損なうだけでなく、直帰率の増加やトラフィックの減少など、サイトパフォーマンスに悪影響を与えます。
Googleは、2015年4月21日からモバイル対応していないサイトに対して、スマホ検索の順位を下げる「モバイルフレンドリーアルゴリズム」を導入しました。SEOの観点からも「モバイルフレンドリー」は非常に重要である。
メディアクエリの書き方
では早速、メディアクエリを書いてみましょう。
記述の仕方は「link要素として指定する方法」と「スタイルシートに指定する方法」の２通りありますので順番に紹介します。
link要素として指定する場合
htmlソースの<head>タグ内に記述し、読み込むCSSを切り替える方法です。実際のコードは以下のようになります。
<link rel="stylesheet" href="smartphone.css" media="screen and (max-width:480px)">
<link rel="stylesheet" href="tablet.css" media="screen and (min-width:480px) and (max-width:1024px)">
<link rel="stylesheet" href="pc.css" media="screen and (min-width:1024px)">
上記コードのように、分岐点（max-widthやmin-widthの数値）を細かく指定することで、複数のファイルを条件分岐して読み込ませることが可能です。この分岐点のことを「ブレイクポイント」と呼びます。
スタイルシートに指定する場合
続いて、メディアクエリをスタイルシート（CSS）に記述する方法を紹介します。
デバイスの画面サイズを判定する記述
/*
@media の外に記述したスタイルは、全サイズで読み込まれます。
*/
@media screen and (min-width:480px) {
/* 画面サイズが480px以下の場合、ここのスタイルを読み込む */
}
@media screen and (min-width:768px) and ( max-width:1024px) {
/* 画面サイズが768px～1024pxの間は、ここのスタイルを読み込む */
}
@media screen and (min-width:1024px) {
/* 画面サイズが1024px以上の場合、ここのスタイルを読み込む */
}
デバイスの向きを判定する記述
/*縦向きの場合*/
@media screen and (orientation:portrait){
}
/*横向きの場合*/
@media screen and (orientation:landscape){
}
デバイスの向きを判定するには「orientation」というプロパティを使います。portraitは縦向き、landscapeは横向きとなります。
デバイスピクセル比で判断する記述
/* Retinaディスプレイの場合に適用される */
@media screen and (-webkit-min-device-pixel-ratio:2){
}
デバイスのピクセル比で切り替えることも可能です。ピクセル比というと難しく聞こえますが、「Retinaディスプレイか、そうでないか」と言い換える事ができます。
[応用] iPhone 3/3GSとiPhone4で分ける記述
@media only screen and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 1) {
/* iPhone 3G/3GS CSS */
}
@media only screen and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) {
/* iPhone 4 CSS */
}
例えば、3/3GSと4/4Sは見た目の大きさは同じですが、Retinaディスプレイの対応が異なります。そのような場合、横幅とピクセル比を指定することで、それらを切り替えることができます。
デバイスの解像度（画面サイズ）
代表的なスマートフォン・タブレットの画面サイズを紹介します。
iPhoneの画面サイズ
| デバイス | 端末解像度(横×縦) 実質解像度(横×縦) |
画素(ppi) | デバイスピクセル比 |
|---|---|---|---|
| iPhone 2G,3G | 320px × 480px 320px × 480px |
163 ppi | 1.0 |
| iPhone 3GS | 320px × 480px 320px × 480px |
163 ppi | 1.0 |
| iPhone 4 | 640px × 960px 320px × 480px |
326 ppi | 2.0 |
| iPhone 4S | 640px × 960px 320px × 480px |
326 ppi | 2.0 |
| iPhone 5 | 640px × 1,136px 320px × 568px |
326 ppi | 2.0 |
| iPhone 5C | 640px × 1,136px 320px × 568px |
326 ppi | 2.0 |
| iPhone 5S | 640px × 1,136px 320px × 568px |
326 ppi | 2.0 |
| iPhone 6 | 750px × 1,334px 375px × 667px |
326 ppi | 2.0 |
| iPhone 6 Plus | 1,080px × 1,920px 414px × 736px(※) |
401 ppi | 3.0 |
| iPhone 6S | 750px × 1,334px 375px × 667px |
326 ppi | 2.0 |
| iPhone 6S Plus | 1,080px × 1,920px 414px × 736px(※) |
401 ppi | 3.0 |
Androidの画面サイズ
| デバイス | 端末解像度(横×縦) 実質解像度(横×縦) |
画素(ppi) | デバイスピクセル比 |
|---|---|---|---|
| AQUOS ZETA SH-04F | 1,080px × 1,920px 360px × 640px |
408ppi | 3.0 |
| GALAXY S5 SC-04F | 1,080px × 1,920px 360px × 640px |
432ppi | 3.0 |
| Xperia Z2 SO-03F | 1,080px × 1,920px 360px × 640px |
424 ppi | 3.0 |
| Xperia Z3 SOL26 | 1,080px × 1,920px 360px × 640px |
424 ppi | 3.0 |
| AQUOS ZETA SH-03G | 1,080px × 1,920px 360px × 640px |
401 ppi | 3.0 |
| Xperia Z3 Compact SO-02G | 1,080px × 1,920px 360px × 640px |
319 ppi | 3.0 |
| Xperia Z4 SO-03G | 1,080px × 1,920px 360px × 640px |
480ppi | 3.0 |
| Xperia Z5 Premium SO-03H | 2,160px × 3,840px 360px × 640px |
801ppi | 6.0 |
| Nexus 5X | 1,080px × 1,920px 410px × 730px |
423ppi | – |
| Nexus 6P | 1440px × 2560px 410px × 730px |
518 ppi | – |
ipadの画面サイズ
| デバイス | 端末解像度(横×縦) 実質解像度(横×縦) |
画素(ppi) | デバイスピクセル比 |
|---|---|---|---|
| iPad | 768px × 1,024px 768px × 1,024px |
132 ppi | 1.0 |
| iPad 2 | 768px × 1,024px 768px × 1,024px |
132 ppi | 1.0 |
| iPad(第3世代) | 1,536px × 2,048px 768px × 1,024px |
264 ppi | 2.0 |
| iPad(第4世代) | 1,536px × 2,048px 768px × 1,024px |
264 ppi | 2.0 |
| iPad Air | 1,536px × 2,048px 768px × 1,024px |
264 ppi | 2.0 |
| iPad Air 2 | 1,536px × 2,048px 768px × 1,024px |
264 ppi | 2.0 |
| iPad mini | 768px × 1,024px 768px × 1,024px |
163 ppi | 1.0 |
| iPad mini 2 | 768px × 1,024px 768px × 1,024px |
163 ppi | 1.0 |
| iPad mini 3 | 1,536px × 2,048px 768px × 1,024px |
326 ppi | 2.0 |
| iPad mini 4 | 1,536px × 2,048px 768px × 1,024px |
326 ppi | 2.0 |
| iPad Pro | 2,048px × 2,732px 1,024px × 1,366px |
264 ppi | 2.0 |
| iPad Pro (9.7inch) | 1536px × 2048px 768px × 1,024px |
264ppi | 2.0 |
Android タブレットの画面サイズ
| デバイス | 端末解像度(横×縦) 実質解像度(横×縦) |
画素(ppi) | デバイスピクセル比 |
|---|---|---|---|
| Nexus 7(2013) | 1200px × 1920px 600px × 960px |
323ppi | 2.0 |
| Nexus 10 | 1600px × 2560px 800px × 1280px |
300ppi | 2.0 |
| Nexus 9 | 1536px × 2048px 768px × 1024px |
288ppi | 2.0 |
ビューポート（viewport）を設定する
レスポンシブデザインに対応させるためには、ビューポート（viewport）を設定する必要があります。以下コードを<head>タグ内に記述しましょう。
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">| width=device-width | 端末画面の幅に合わせる |
|---|---|
| initial-scale | 初期のズーム倍率の値 |
| minimum-scale | 最小倍率 |
| maximum-scale | 最大倍率 |
| user-scalable | ズーム操作の指定 「yes」：許可する （初期値） 「no」：許可しない |
ブレイクポイントを判断する
ブレイクポイントは任意となり、様々なデバイスがあるため判断に悩むかと思います。そんな時は、Googleアナリティクスで「訪問ユーザーの画面サイズ（解像度）」を確認します。
ユーザーの「画面サイズ」を確認する手順
Googleアナリティクスにログインし、左メニューから [ユーザー] → [モバイル] → [デバイス] と進みます。
![Googleアナリティクス [ユーザー] → [モバイル] → [デバイス]](https://kasegood.net/wp/wp-content/uploads/2016/08/media-queries_01-1.png)
[セカンダリディメンション] を選択し「画面の解像度」をクリックします。（検索すると簡単に見つかります。）
すると、訪問ユーザーの「画面の解像度」を確認することができます。これを参考にして、ブレイクポイントを決めると良いでしょう。
