このサイトではモバイルへの対応を重視していると、ずっと言っている。

今やWebブラウジングの主役は完全に、スマホやタブレットといったモバイル端末なんだから当然だ。

スマホ向けコンテンツを制作している俺でなくても、すでにWebサイトのモバイル対応は必須となっている。

で、PC向けに作ったサイトがそのままでもスマホから見やすいかというと、そんなことは全くない。

PCのディスプレイとスマホの画面とでは、大きさ（主に幅）も向きも違うからだ。

そこで、それぞれのデバイスに合った表示方法を提供する必要が出てくる。

Googleなどの検索エンジンも、モバイルからのアクセシビリティ（閲覧のしやすさ）を重視する方向性となっている。

これに対応するためには、閲覧者のデバイスそれぞれに合わせて表示を切り替えるということをしなければならない。

そこで今回は、メディアクエリと呼ばれるCSSの機能を使い、閲覧者のブラウザの“幅”に応じて表示を切り替えることでモバイル端末に対応するレスポンシブ・ウェブデザインという方法を紹介する。

また、その他のモバイル対応に役立つテクニックも紹介する。

メディアクエリとは

メディアクエリはCSSにフィルタをかけることで、デバイスの種類、幅、高さ、向きなどに応じて適用するスタイルを切り替える仕組みだ。

つまり、PC（大画面）向け、タブレット（中画面）向け、スマホ（小画面）向け、印刷向け、といった具合にそれぞれに最適な表示を提供できるというわけだ。

CSS3にて導入されたが、CSS3はすでに多くのブラウザで実装されているし、互換性の問題はほとんどないだろう。

IE8以下を除いてな！　安定の糞ブラウザIE。

たとえば、幅769px以上のデバイス向けには■■というスタイルを、幅768px（ピクセル）以下のデバイス向けには●●というスタイルを、幅360px以下のデバイス向けには▲▲というスタイルを、というふうに、対象のデバイスに合わせた表示スタイルを設定できる。

JavaScriptなどでデバイスを判別する必要はない。

なぜ“幅”なのか

デバイスごとの差異は幅以外にもいろんなところに現れるが、Webページを表示するにあたっては幅だけを見て切り替えても問題ない場合が多い。

たとえば、ブログなどでよくある2カラム（列）・3カラムの表示。

メインとなる本文を表示するカラム、過去の記事やカテゴリなどを表示するカラムなどに分けられているやつだ。

このサイトもPCで見ると2カラムだ。

それをそのままスマホで表示させようとすると、以下のどちらかになる。

  • ページの幅を画面いっぱいに抑えると、それぞれのカラムの幅が狭すぎて改行だらけになる。
  • それぞれのカラムの幅を確保すると、ページの幅が広すぎて横スクロールが必要になる。

これを回避するため、このブログでは、PCで見るとサイドに表示される過去記事などのカラムを本文の下に表示させている。

これによって、本文も過去記事などもそれぞれ画面幅いっぱいに表示させることができる。

ただ、本文の末尾まで行かなければサイドカラムを見られなくなってしまうが……べつにいっか。

メディアクエリの設定例

メディアクエリの書き方は、CSS内に @media だ！

/* ①ここに全体に共通した記述と、幅769px以上のデバイスを対象とした記述 */
@media screen and (max-width: 768px) {
/* ②ここに幅768px以下のデバイスを対象とした記述 */
}
@media screen and (max-width: 480px) {
/* ③ここに幅480px以下のデバイスを対象とした記述 */
}
例の見かた
@media メディアクエリを宣言する
screen ディスプレイ向けのスタイルであることを表す
and “かつ”（and指定）を表す
max-width ディスプレイの最大幅をルールに指定する
768px タブレットの画面の最大幅の目安（iPadの画面幅が768px）
480px スマートホンの画面の最大幅の目安

上の例のように、@mediaのあとの中かっこ { } で囲まれた部分が、その@mediaのルールに合致するデバイス向けに適用される。

この例では、まずすべてのデバイス向けの記述（①）が書かれ、次に幅768px以下のデバイス向けの記述（②）、その次に幅480px以下のデバイス向けの記述（③）、という順番になっている。

CSSでは同じセレクターの同じプロパティに複数回にわたって記述がされた場合、最後の記述が有効になるという仕様である。

よって、たとえば画面幅が1280pxのPCでは、①の記述が読み込まれたあと、②と③については条件を満たさないので、結局①の記述がそのまま適用される。

画面幅が768pxのタブレットでは、①の記述が読み込まれたあと、②の記述が読み込まれて上書きされ、③については条件を満たさないのでスルーされる。

画面幅が360pxのスマートホンでは、すべての条件を満たすので、①の記述が②の記述で上書きされ、さらに③の記述で上書きされてから適用される。

もちろん、前（上）と後ろ（下）で共通のスタイルは前だけに書けばよい。

上記の例ではPC向けのスタイルを先に記述しているので、PCファーストと呼ばれる。

一方、下記の例では画面幅の狭いほうから記述している。

/* ①ここに全体に共通した記述と、幅480px以下のデバイスを対象とした記述 */
@media screen and (min-width: 481px) {
/* ②ここに幅481px以上のデバイスを対象とした記述 */
}
@media screen and (min-width: 769px) {
/* ③ここに幅769px以上のデバイスを対象とした記述 */
}

こちらの例では、上の例の max-width が min-width に変わっていて、最大幅ではなく最小幅を基準にルールを設定しているため順序が上の例と逆になっているが、中身は上の例と同じである。

こちらの例ではスマホ向けのスタイルを先に記述しているので、モバイルファーストと呼ばれる。

モバイルファーストのほうがよりスマホやタブレットに優しいサイトとなるが、既存のPC向けサイトを改造する場合はPCファーストのほうが当然簡単になる。

IE8以下はメディアクエリに対応していない

Webデザイナーの諸君はもうすでに散々悩まされていることと思うが、そうでない人のために言っておく。

IEはクソ！！！！！

IE（Internet Explorer：Windowsの標準ブラウザ）は企業ユーザーのために昔のバージョンとの互換性を追求した結果、標準規格であるHTMLやCSSなどへの対応に難があり、なんとIE8（Windows XP向け最終版、Windows Vistaでもまだ現役）以下のバージョンではメディアクエリにすら対応していない。

いや、メディアクエリなんてまだ序の口で、実際にはあれもこれも対応してなくて、プロもアマもWebデザイナーはみんな悩まされている。

しかも、OS付属の標準ブラウザだから、やたら普及率が高く、安易に切り捨てるわけにもいかない。

……というのは実は少し前の話で、現在では（少なくともこのブログでは）IE8以下で閲覧している人なんてほぼいないのだが、Webってのは一応あらゆる環境のユーザーに対応するのが美徳とされているので……

IE8以下という糞ブラウザをいまだに使っているガラパゴスの住人にも救いの手を差し伸べよう。

その方法は以下の二つに一つ。

  1. PCファーストの記述を使う
  2. css3-mediaqueries.js を導入する

1.の方法は単純明快、メディアクエリの設定より前の記述はメディアクエリではないので、IE8以下にも対応しているのだ！（別の理由で対応してないとかは別）

そして、メディアクエリの部分はすべて読み飛ばすわけだけど、今どきメディアクエリに対応していないブラウザはたぶんすべてPCのブラウザなので問題ない。

2.の方法は、JavaScriptの力でIE8以下を無理矢理メディアクエリに対応させる、というよりメディアクエリに対応しているのと同じように表示させるというものだ。

この方法を使うには、HTMLの<head>〜</head>の中に以下のように記述し、 css3-mediaqueries.js をGoogleCodeから読み込む。

<!--[if lt IE 9]><script type="text/javascript" src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->

※前後のHTMLコメントみたいな部分も必要。

2.の方法にはモバイルファーストでもIE8以下に対応できるという利点はあるが、このJavaScript自体がけっこう重いとも聞く。

俺のサイトでは1.の方法を採用している。

ぶっちゃけ、IE8以下はバッサリ切り捨てるのもそれほど悪くないと思う。

その他のテクニック

ビューポートとズームの設定

ビューポートとは、主にモバイル端末の仮想的な画面幅のことである。

なぜ仮想的なものを使うのかというと、たとえば俺のスマホ（AQUOS PHONE ZETA SH-06E）はディスプレイが約5インチで解像度がFull HD（1920×1080 px）である。

つまりピクセルが細かい。

こんな細かいピクセルで、たとえばこのブログの文字（サイズ：14px）を読もうとしても、細かすぎて読めるはずがない。

PCの14pxとスマホの14pxでは大きさが全然違うのだ。

そこで、ビューポートという仮想的な画面サイズを定めていて、俺のスマホでは幅が360pxとなっており、ピクセルの表示を3倍の大きさにすることで文字も画像もちゃんと見えるようにしている。

このビューポートをHTML側でも設定し、Webページがモバイルに対応していることをブラウザに示そう。

以下の例のように、<head>〜</head>の中に記述する。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=yes">
例の見かた
width=device-width ビューポートの幅＝デバイス幅　を指定する。
これはこの通りに書くこと。
initial-scale=1.0 初期のズーム倍率
これもこの通りに書くこと。
minimum-scale=1.0 最小のズーム倍率（初期値：0.25）
設定しなくてもいいけど、縮小はできないよう1.0に設定するのもアリ。
user-scalable=yes 閲覧者がページをズームできるかどうか（初期値：yes）
noにしているサイトも多いが、目が悪い人もいるだろうし、yesにするか何も書かないのが望ましい。

例とはいっても、だいたい書き方は決まっている。

maximum-scale を設定しているページもあるが、これは最大のズーム倍率で、1.0に設定することでページをズームアップできなくすることができる（初期値：1.6）。

まあ、よほどのことがない限り、拡大は許可したほうがいいと思う。

画面を回転させると文字の大きさが変わる

スマホなどは、画面の自動回転を有効にしていると縦画面から横画面になった時、画面の幅が広くなるが、そのとき文字の大きさが大きくなる。

おそらく、1行の長さが長くなるのに合わせているのだろうが、レイアウトが崩れるし、画面の大きさ自体が大きくなるわけではないので、この調整を無効にしたい。

CSSに以下のように書く。

html, body {
    -webkit-text-size-adjust: 100%;
}

text-size-adjust というプロパティを使うのだが、これはまだ正式規格になっていないので、 -webkit- という接頭辞を付ける。

モバイルブラウザのシェアのほとんどを占めるSafari（iOSの標準ブラウザ）もAndroidブラウザ（Android 4.4以前の標準ブラウザ）もChrome（Android 5.0以降の標準ブラウザ）も、WebKit系のブラウザなので、今のところ接頭辞は -webkit- だけでいい。

一応、他のブラウザ向けの接頭辞もあるので、今のうちに設定しておくといいかもしれない。

  • Firefox：-moz-
  • IE＆Edge：-ms-

接頭辞付きのプロパティと接頭辞なしのプロパティを同時に設定する場合、接頭辞なしのものを最後に記述する。

ソリッドデザインとリキッドデザイン

ソリッドデザイン（ソリッド：個体）とは、ページの幅を絶対的な数値（主にピクセル）で指定することで、ブラウザの幅に関わらず一定にするWebデザインのことだ。

対してリキッドデザイン（リキッド：液体）とは、ページの幅をパーセント（主に100％）で指定することで、ブラウザの幅に合わせて表示させるWebデザインのことだ。

ソリッドデザインは主にPC向けページで使われ、リキッドデザインは主にモバイル向けページで使われる。

ソリッドデザインだと、Webページの幅に対してブラウザの幅のほうが狭い場合、横スクロールバーが出ることになる。

画面（ブラウザ）幅が狭いスマホやタブレットでは、ソリッドデザインだと横スクロールバーが出やすいし、デバイスによって幅が違うので、モバイル向けサイトではリキッドデザインが使われることが多い。

このサイトでは、メディアクエリによりPC向けにはソリッドデザインを、タブレットやスマホ向けにはリキッドデザインを採用している。

数字が電話番号とみなされて勝手にリンクになる

モバイルブラウザでは、数字の並びを見ると電話番号だと思って勝手に通話リンクを作ってしまうことがある。

また、E-mailアドレスらしき文字列や、住所（英語表記）らしき文字列を見ても、それぞれ対応する外部アプリを起動するリンクを作ってしまうことがある。

これらを回避するには、<head>〜</head>の中に以下のように記述する。

<meta name="format-detection" content="telephone=no">

サイトアイコンいろいろ

サイトアイコンといえばfavicon（ファビコン：お気に入りアイコン）だけど、今やfaviconだけではモバイル端末に完全には対応できない。

つまり、16x16のfaviconだけでなく、「ホーム画面アイコン」用に高解像度のアイコンを用意する必要がある。

……いや、必要があるかどうかはその人次第だと思うけど、対応したい人は……

<head>〜</head>の中に以下のように記述したうえで、それぞれアイコン画像を用意しよう。

<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico"><!-- favicon 16x16 -->
<link rel="apple-touch-icon" href="apple-touch-icon.png"><!-- スマホ向けアイコン 192x192 -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"><!-- 整形済みスマホ向けアイコン 192x192 -->
<meta name="msapplication-TileImage" content="windows8.png"><!-- Windows 8のスタート画面タイル用アイコン 144x144 -->
<meta name="msapplication-TileColor" content="#001acc"><!-- Windows 8のスタート画面タイルの背景色 -->

紫色の部分は、画像のURL（最後のみCSSの色指定）を指定する。

apple-touch-icon は端末ごとにいろんなサイズを指定することができるけど、大きめのサイズ（例：192x192）を一つ設定しておけば、あとは全部縮小でいける。

というふうにしておくのが楽！（えっ）

アイコンの類は仕様が乱立しすぎて、本気であらゆる端末に対応させようと思ったら全部で20種類を超える、という話もあるくらいだ……

Webサイトに必要なfaviconが21個になっていた - IT探検記

終わりに

いろいろ紹介したが、モバイル向けのデザイン自体は紹介できなかったな。

これについてはまたの機会に……

とにかく、スマホはPCより画面が小さいこと、マウスでなく指で操作すること、こういうことを考えながらデザインすればいいんじゃないかな！

そして「れーとーびーむの作り方」シリーズでは、俺がこのサイトを作った経験から、今後もいろいろ紹介していく予定だ。

お楽しみに！

2016年3月8日追記：
最新の知見（）に基づき、内容の一部を更新。