メディアクエリを使ってPCサイトとスマホサイトを作成する方法
メディアクエリとViewportを使うことによって、1つのHTMLファイルでWebサイトをPC向けデザイン、タブレット向けデザイン、スマホ向けデザインに対応させることができます。いわゆるレスポンシブデザインといいます。
Webページのデザインを記述するCSSのうちの1つです。画面環境にあったデザインに切り替える機能があり、それぞれの画面の大きさや解像度に適した形に調整して表示できます。本記事では、メディアクエリの概要や書き方、活用例について解説します。
レスポンシブ対応するメリット
- 1つのHTMLファイルでPC、スマホを表示することができるため、更新が楽になる
- PCとスマホでURLを分ける必要がなく、SEO対策が楽である。
Googleはモバイルファーストを推奨しているため、レスポンシブでスマホに対応することで検索順位で有利になることもポイントです。
レスポンシブ対応のデメリット
- デバイス毎にCSSを用意しなければならないので、デザイン修正が大変
- レイアウトが複雑な場合は、作業に時間がかかる。
- モバイルファーストでデザインした場合、PCで実現できるデザインの自由度が下がる
メディアクエリとは
メディアクエリとは、従来のCSS（CSS2）では媒体までしか判断できなかったメディア・タイプを拡張して媒体の特性まで判断できるようにしたCSS3の要素のことです。簡単に説明すると、条件を満たした場合は指定したCSSを適用し、満たさない場合は適用させないといった指示ができます。
これまで使用されていた従来のCSS（CSS2）では、媒体までしか判断できないため条件分岐を設定できず、CSSのみではレイアウトを柔軟に調整できませんでした。新たな仕様が加わったCSS3を使用することで、メディア・タイプを拡張して「媒体の特性」まで判断できるようになり、レスポンシブデザインが作成できるようになりました。
レスポンシブデザインとは、画面の大きさに合わせてレイアウトを柔軟に調整するWebデザイン手法のことです。あらゆるデバイスやディスプレイサイズでも見やすいWebページをデザインできるため、ユーザー満足度を高められるのがメリットと言えます。
メディア特性で画面幅の条件を明記すれば、〇px以上もしくは〇px以下の場合といった条件を指定できます。指定したいCSSの記述はなくても問題ありませんが、記載すれば背景色や文字サイズなどを細かく設定できます。
レスポンシブデザインでスマートフォン向けサイトを作る方法
PC,タブレット、スマホのサイトをレスポンシブデザインで作成する場合は、以下の手順で行います。
- 「viewport」をHTMLに記述する
- 「メディアクエリ」をCSSに記述する
- PC,タブレット、スマホで表示したときに崩れた箇所を修正する
HTMLヘッダーセクションにViewportタグを追加します。
<meta name="viewport" content="width=device-width, initial-scale=1.0">HTMLヘッダにviewportを記述する
viewportとはWebページの表示領域を指します。viewportを正しく指定すると、画面サイズに応じたレイアウトの最適化ができるようになります。HTMLヘッダーセクションにViewportタグを追加します。そして、content属性の内容でどのような表示領域を持つかを指定します。
基本
<meta name="viewport" content="width=device-width,initial-scale=1.0" />1.画面拡大できないパターン
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">２.画面拡大できるようにする場合
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes">Widthプロパティ
表示領域の幅を指定するプロパティです。数値で直接指定するか、device-widthを指定します。device-widthを指定した場合は、表示しているデバイスの画面サイズが表示領域になります。レスポンシブデザインでは通常、device-widthを使用します。
name
文書情報の種類
initial-scale、minimum-scale、maximum-scaleプロパティ
initial-scaleで初期表示時のズーム倍率を指定します。minimum-scale、maximum-scaleではそれぞれ、ズーム倍率の最小値と最大値を指定します。特別な理由がない限りは、initial-scaleに1を指定し、初期表示時はズームしていない状態にします。
user-scalableプロパティ
ピンチインによるズーム処理が可能かどうか指定するプロパティです。yes を指定するとズーム可能になります。ズームを禁止したい場合は no を指定します。
２、メディアクエリをCSSに記述します。
レスポンシブデザインにするためには、メディアクエリを使ってデバイス幅が〇〇px以上であれば、指定のCSSを使用する。〇〇px以下であれば指定のCSSを使用するといった。デバイス幅に応じてのCSSを作成します。要するにメディアクエリはデバイス幅によってCSSを切り換えることができる技術となります。
メディアクエリを書き込むコツとしては、モバイル、タブレット、PCといったデバイスごとにCSSを分けて記述していきます。そして、「大きい→小さい」、「小さい→大きい」、どちらかに統一して記述します。
ブレイクポイント
メディアクエリで重要になる要素にブレイクポイントがあります。ブレイクポイントは、デザインが変わる分岐点ことです。その分岐点で対応するCSSを切り替えます。
ブレイクポイントの記述方法にはPCサイトを基準にする「PCファースト方式」とスマホサイトを基準にする「モバイルファースト方式」があります。
現在では、サイトアクセスがモバイルからのアクセスが多いので、モバイルファーストがおすすめです。デスクトップファーストで指定すると読み込みに時間がかかるあめページ表示が遅くなってしまいます。
デスクトップ（PC）ファースト方式のメディアクエリの書き方
PCファーストでは、まずはメディアクエリを使わずにCSSを記述します。chromeのChromeDevTools（F12）のデバイスモードで、スマホとモバイルのデザインを確認します。デザインが崩れている箇所を修正するCSSをデバイスごとに記述していきます。
/* PC用のCSSはメディアクエリの外に記述する */
@media screen and (max-width: 959px) {
/* 959px以下に適用されるタブレット用のCSS */
}
@media screen and (max-width: 480px) {
/* 480px以下に適用されるスマホ用のCSS */
}モバイル（スマホ）ファースト方式のメディアクエリの書き方
モバイルファースト方式でも、PCファースト方式と同様にCSSを修正していきます。
/* スマホ用のCSSはメディアクエリの外に記述する */
@media screen and (min-width: 481px) {
/* 481px以上に適用されるタブレット用のCSS */
}
@media screen and (min-width: 1000px) {
/* 1000px以上に適用されるPC用のCSS */
}メディアクエリのサンプル
/*
1280-1024 - デスクトップ（デフォルトのグリッド）
1024-768 - タブレット横長
768-480 - タブレット縦長
480-less - スマホ
*/
@media all and (min-width: 1024px) and (max-width: 1280px) { }
@media all and (min-width: 768px) and (max-width: 1024px) { }
@media all and (min-width: 480px) and (max-width: 768px) { }
@media all and (max-width: 480px) { }レスポンシブデザインでよく使用されるプロパティ
width, max-width プロパティ
画面サイズに合わせて、画像やボックス領域の幅を伸び縮みさせるときに使います。
レスポンシブでは width: 100% のように、パーセンテージでの指定することが多いです。ただ、パーセンテージで大きさを指定すると、PCブラウザのように画面幅が1000pxを超えてくるようなときに、画像が大きくなりすぎてしまいます。そこで、max-widthプロパティで最大の幅を指定します。
@media screen and (min-width: 481px) {
img {
max-width: 640px;
}
}displayプロパティ
ある要素を「PCだけ表示する」「スマホだけ表示にする」というように、デバイスごとに表示・非表示を切り替えるときに使います。メディアクエリを使い、特定の画面サイズのときに displayプロパティを none に指定すると、非表示になります。
@media screen and (min-width: 481px) {
div{
display: none;
}
}flex, flex-wrapプロパティ
画面サイズの狭いデバイスでは縦並び、広いデバイスでは横並びにレイアウトすることがありますよね。CSSで横並びさせる方法は様々ありますが、便利なのがフレックスボックスレイアウトです。フレックスボックスレイアウトでは、flexプロパティやflex-wrapプロパティなどを使います。
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
img {
width: 100%;
}
@media screen and (min-width: 480px) {
ul {
display: flex;
flex-wrap: wrap;
}
li {
width: 50%;
box-sizing: border-box;
padding: 5px;
}
}
@media screen and (min-width: 800px) {
li {
width: 40%;
}
}ファイル読み込み時に対応幅を指定する方法
HTMLにlinkタグのmedia属性を利用すれば、特定のデバイスや条件に応じて異なるスタイルシートファイルをロード可能です。この機能により、画面サイズに基づいて適切なCSSファイルを読み込むことが可能です。
<link rel="stylesheet" media="(max-width: 480px)" href="sp.css">
<link rel="stylesheet" media="(min-width: 481px)" href="pc.css">レスポンシブでの画像切り替え方法
img画像を挿げ替える
画面サイズごとに使用する画像ファイルをsrcset属性で指定します。
<img srcset="image-sp.jpg 480w, image-tablet.jpg 640w, image-pc 960w">img要素の表示・非表示を切り替え
PCとモバイルで切り替えるimgタグを記述します。アクセスしてきたデバイスごとにdisplayプロパティで切り替えるという方法です。
<img class="sp" src="img-sp.jpg">
<img class="pc" src="ima-pc.jpg">CSSでは以下のようにメディアクエリでdisplay: noneを指定しておきます。
@media screen and (max-width: 480px) {
.sp {
display: none;
}
}
@media screen and (min-width: 1000px) {
.pc {
display: none;
}
}JavaScriptによるsrc属性を動的に切り替え
JavaScriptで画面幅に応じてsrc属性を切り替える方法です。たとえば、src属性にはモバイル用の画像パスを書いておき、PCブラウザからアクセスがあったときはPC用の画像パスに変換するというやり方です。
背景画像はメディアクエリで切り替え
背景画像は、background-imageプロパティをメディアクエリで切り替えます。
.sitelogo {
/* */
background-image: url('sitelogo-sp.jpg');
}
@media screen and (max-width: 480px) {
/* */
.sitelogo {
background-image: url('sitelogo-pc.jpg');
}
}各デバイスの横幅と縦幅
デバイスの横幅はブレイクポイントを決定する参考になります。
| デバイス | ブラウザの横幅(px) | ブラウザの縦幅(px) |
|---|---|---|
| iPhone5 | 320 | 568 |
| iPhone6 | 375 | 667 |
| iPhone6s | 414 | 736 |
| iPhoneX | 375 | 812 |
| iPhoneXR | 414 | 896 |
| iPhoneSE | 375 | 667 |
| iPhone12Pro | 390 | 844 |
| iPhone14ProMax | 430 | 932 |
| Pixel7 | 412 | 915 |
| Samsung GalaxyS8+ | 360 | 740 |
| Samsung GalaxyS20 Ultra | 412 | 915 |
| Samsung GalaxyS10 | 480 | 1013 |
| Xperia 1 | 411 | 960 |
| iPad mini，iPad mini2～5 | 768 | 1,024 |
| iPad mini6 | 768 | 1,024 |
| iPad，iPad 2，iPad Air，iPad Air2 | 768 | 1,024 |
| iPad（第7～9世代） | 820 | 1,080 |
| iPad Pro 10.5，iPad Air（第3世代） | 834 | 1,112 |
| iPad Air（第4世代） | 820 | 1,180 |
| iPad Pro（11インチ） | 834 | 1,194 |
| iPad Pro（12.9インチ） | 1,024 | 1,366 |
パソコンの画面サイズ
| 画面サイズ | シェア |
|---|---|
| 1,920×1,080 | 26.17% |
| 1,536×864 | 11.47% |
| 1,366×768 | 8.34% |
| 1,280×720 | 6.53% |
| 1,440×900 | 4.95% |
| 2,560×1,440 | 4.55% |
タブレットの画面サイズ
| 画面サイズ | シェア |
|---|---|
| 768×1024 | 30.22% |
| 810×1080 | 13.57% |
| 820×1180 | 7.11% |
| 834×1194 | 6.36% |
| 744×1133 | 5.47% |
| 800×1280 | 4.84% |
スマホの画面サイズ
| 画面サイズ | シェア |
|---|---|
| 390×844 | 19.11% |
| 375×667 | 10.41% |
| 375×812 | 8.75% |
| 414×896 | 8.35% |
| 360×640 | 5.95% |
| 428×926 | 4.62% |
タブレットの画面分割に対応させた場合、スマホ表示で維持できます。iPad（第7～9世代）では820pxの半分となった場合、410pxとなりスマホと同じ画面サイズになります。
お勧めのメディアクエリの指定
| デバイス | CSS指定方法 | |
|---|---|---|
| PC | #CSS {width:1000px;margin:0 auto;} | widthとmarginを指定して、表示を中心に固定します。 |
| タブレット | @media (max-width: 1020px) and (min-width: 768px) { #css {width:98%;margin:0 1%;} } | PCのCSSを上書きます。（例では、widthとmarginを上書き） |
| スマホ | @media (max-width: 767px) { #css{width:auto;} } | PCのCSSを上書きます。（例では、widthを上書きして微調整） |
PC向けを基準とするのは、古いバージョンのIEでメディアクエリに対応していないブラウザに合わせやすいという理由です。
タブレットのデザインはスマホに合わせるべきか？それともPCに合わせるべきか？
タブレットはスマホと比較して画面サイズが大きいので、一般的にはPCデザインを採用するのが良いでしょう。スマホのデザインをタブレットに採用すると、沢山の情報量を表示できるのにも関わらず、スマホの分の情報しか表示できないのが理由です。
ブレイクポイント
デバイスの画面サイズに応じてCSSを切り換えるポイントの幅をブレイクポイントと言います。特にスマホやタブレットなど、画面が大きくなることがあるので、ブレイクポイントを定期的に見直す必要があります。
Webサイトを表示させるデバイスは、主に以下の３つの画面幅についてスタイルシートを調整します。
- PC
- タブレット
- スマートフォン
以下の例でいえば、「ブレイクポイントが480px」となります。画面が幅が480px以下のデバイスにCSSが適用されます。
@media screen and (max-width: 480px) {}各デバイスのブレイクポイントの決め方
メディアクエリのサイズを決める際は以下の基準が参考になります。
| タブレット | 768px |
| スマホ横 | 480px、568px |
| スマホ縦 | 320px、360px |
ブレイクポイントのおススメ
- パソコンのブレイクポイントは「960px～1,280px」がおススメです。Macについても対応は可能です。
- タブレットブレイクポイントは「768px～1,280px」がおススメです。また、タブレットの画面分割表示（iPadのSplit View）への対応についても検討する必要があります。タブレットを分割したときでもタブレットビューを維持したい場合など、どのサイズから画面分割表示のタブレットビューを行うのか検討します。
- スマホのブレイクポイントは「390～500px」がおススメです。
フレームワーク
簡単にレスポンシブデザイン化する方法として、CSSフレームワークを使用する方法があります。「Bootstrap」や「Foundation」というフレームワークが有名です。