webマーケティング手法やseo対策を発信するブログ!ウェブマ

メディアクエリの書き方「レスポンシブwebデザイン導入方法」

メディアクエリ

メディアクエリ(Media Queries)の書き方を紹介します。

「link要素として指定する場合」や「スタイルシートに指定する場合」のそれぞれの記述コードを用意しました。さらに、各デバイスの解像度(画面サイズ)やブレイクポイントを判断する方法などを解説しています。

メディアクエリ(Media Queries)とは?

メディアクエリ(Media Queries)とは、webページの表示をデバイス環境に応じて切り替える機能のことです。「画面サイズの幅がこれ以上(または、これ以下)だったら、このスタイルを適用」「画面が横向きならこのスタイルを適用」といったことが、1つのHTMLで対応することができる。CSS3より導入された新しい要素です。

以前のように、スマホ版とPC版を分けて用意する必要が無いため、ファイルの管理や更新の効率性が上がります。

レスポンシブデザインの重要性

モバイル非対応のサイトは、ユーザビリティを損なうだけでなく、直帰率の増加やトラフィックの減少など、サイトパフォーマンスに悪影響を与えます。

Googleは、2015年4月21日からモバイル対応していないサイトに対して、スマホ検索の順位を下げる「モバイルフレンドリーアルゴリズム」を導入しました。SEOの観点からも「モバイルフレンドリー」は非常に重要である。

メディアクエリの書き方

では早速、メディアクエリを書いてみましょう。
記述の仕方は「link要素として指定する方法」と「スタイルシートに指定する方法」の2通りありますので順番に紹介します。

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">
▼ビューポート(viewport)の項目説明
width=device-width 端末画面の幅に合わせる
initial-scale 初期のズーム倍率の値
minimum-scale 最小倍率
maximum-scale 最大倍率
user-scalable ズーム操作の指定
「yes」:許可する (初期値)
「no」:許可しない

ブレイクポイントを判断する

ブレイクポイントは任意となり、様々なデバイスがあるため判断に悩むかと思います。そんな時は、Googleアナリティクスで「訪問ユーザーの画面サイズ(解像度)」を確認します。

ユーザーの「画面サイズ」を確認する手順

Googleアナリティクスにログインし、左メニューから [ユーザー] → [モバイル] → [デバイス] と進みます。

Googleアナリティクス [ユーザー] → [モバイル] → [デバイス]

[セカンダリディメンション] を選択し「画面の解像度」をクリックします。(検索すると簡単に見つかります。)

セカンダリディメンション 画面の解像度

すると、訪問ユーザーの「画面の解像度」を確認することができます。これを参考にして、ブレイクポイントを決めると良いでしょう。

画面の解像度

この記事がお役に立ったらシェアしてね!

気に入ったらいいね!してね

関連記事

カテゴリー

人気の記事

新着の記事