デバイスごとの表示環境を考えたWebサイトの制作手法《レスポンシブWebデザイン》

1.ピクセルで指定してある値をパーセントに変換

スクリーンサイズに合わせてレイアウト要素の幅が動的に変わるように、ピクセル単位で指定してある width, padding, margin などの値はパーセント単位に変換します。

例えば、Webページの全体幅である #wrapper 要素が 960px、その子要素である #container 要素が 940px の場合
940÷960×100 = 97.916667%
このように計算して、スタイルシートには #container {width:97.916667%} と記述します。これと同様に他の width, margin, padding もパーセント単位に換算していきます。

ただ、一からWebサイトを制作する場合は、いきなりパーセント単位でスタイルを組むのは難しいので、まずピクセル単位で組んでから、後でパーセント単位に変換するようにします。

2.画像サイズを Fluid Image にする

スクリーンサイズに合わせて画像のサイズも動的に変化するようにします。そのために《Fluid Image》と呼ばれる手法を採り、下記のようにスタイルシートへ width を追加します。

/*モダンブラウザ用*/
img,
iframe,
object {
    max-width:100%;
}
/*IE7用*/
.ie7 img,
.ie7 object/ {
    width:100%;
}
/*IE8用*/
.ie8 img,
.ie8 object {
    width:auto9
}

3.メディアクエリでスタイルを振り分ける

スクリーンサイズに応じてレイアウトを切り替えるための方法を説明します。まず、適用されるスタイル（CSS）を、それぞれのスクリーンサイズによって振り分ける指定をします。

これを実現させるためには《メディアクエリ》[Media Queries]という CSS3 の機能を使います。このメディアクエリはヘッダー、もしくはスタイルシートに記述して使います。メディアクエリの記述では、スクリーンサイズ以外にも、ウィンドウサイズ、ディスプレイの解像度や種類などが指定できるので、それに応じたスタイルを適用させることが可能です。

これをヘッダーに記述する場合は、以下のように設定します。

<link rel="stylesheet" type="text/css" media="screen and (max-device-width:480px)"　href="iphone.css" />

例えば、iPhone のスクリーンサイズは 320px x 480px なので、max-device-width を 480px にします。すると、iPhone（正確には最大幅が480px 以下のスクリーンサイズ）で閲覧した場合は、iPhone用のスタイルが記述された iphone.css が読み込まれるようになります。

スタイルシートに直接記述する場合は、以下のように設定します。

@media screen and (max-width: 1024px) {
#wrapper {
    width:95%;
}
}
@media screen and (max-width: 768px) {...}
@media screen and (max-width: 480px) {...}

ここでは複数のスクリーンサイズ（PC, iPad, iPhone）を指定しています。max-width は“最大幅〜px 以下のスクリーンサイズ”という意味なので、上記例の場合、iPhone の横表示（幅 480px）で閲覧した場合は、その上に記述してあるスタイルが全て適用されることになります。このようにスタイルは、上の条件から順番に継承されていきます。

スタイルを設定する

メディアクエリによるスクリーンサイズの振り分けが出来たら、それぞれに適用させるスタイルを記述して、各メディア（スクリーンサイズ）に適したレイアウトを作っていきます。

@media screen and (max-width: 480px){
#main,
#sidebar {
    float:none;
    width:auto;
}
#menu-y {
    display:none;
}
}

例えば、3カラムのレイアウトを2カラム、または1カラムへと変化させるためには、並列配置してある各要素のフロートを無効にしておきます。また、スマートフォンでの閲覧に支障となる要素がある場合は、非表示にしておきます。

メディアクエリをIEにも対応させる

メディアクエリに対応していない IE8 以下のブラウザーでも、メディアクエリを利用できるようにするには《css3-mediaqueries.js》というスクリプトを読み込ませます。Google で公開されているコードなので、下記のようにヘッダー内に記述するだけでOKです◎

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

これで IE8 以下でも簡単にメディアクエリーに対応させられます。

4.metaタグで Viewport を制御する

ここまでの行程で、スクリーンサイズに応じてレイアウトが切り替わるように設定しましたが、それをスマートフォンで正しく表示させる上で、忘れてはならないのは《Viewport（ビューポート）》に関する記述です。

Viewport とはデスクトップでいうところのブラウザーウィンドウ上の表示サイズです。スマートフォンでは、デスクトップのようにウィンドウをリサイズする概念が無いため、その機種のスクリーンサイズ=ブラウザーウィンドウのサイズとなり、iPhone ではこれが 980px と設定されています。この事により、メディアクエリで設定してあるスクリーンサイズ幅 480px のスタイルは採用されず、スクリーンサイズ幅 980px のレイアウト、つまりデスクトップ用のレイアウトが擬似的に表示されてしまいます。

このようになる理由は、デスクトップ向けサイトを閲覧できるスマートフォンブラウザーでは、既存のウェブサイトを画面ちょうどに収めるため、デフォルトでは Viewport のサイズをデスクトップ相当にしてあるからです。

iPhone, Android いずれの場合も、このデフォルトの状態では文字や画像がとても小さく表示されます。これをちょうど良いサイズ、つまりスマートフォン用にメディアクエリで設定したレイアウトで表示するために、metaタグの記述で Viewport を制御します。

<meta name="viewport" content="width=device-width,initial-scale=1.0">

width=device-width
この記述で Viewport の横幅をデバイスの幅にすることができます。これで iPhone であれば、横幅 320px でコンテンツが表示されるようになります。この指定により Android でも、殆どの場合が横幅 320px として表示されるようになります。今回メディアクエリでは、max-width: 480px（スクリーンサイズの最大幅 480px 以下）の条件でレイアウトスタイルを指定してあるので、iPhone の縦表示（横幅 320px）で見ても、そのスタイルが採用されます。

initial-scale=1.0
表示の初期倍率を指定します。つまりこの値が 1.0 の場合は等倍サイズで表示させるという指定になります。iPhone だと縦向きの横幅が 320px、横向きだと横幅 480px なのですが、この記述がないとページを横向きで表示したとき、320px のレイアウトが維持され、それが1.5倍に拡大された状態で表示されてしまいます。

但し、これはページを読み込んだ時点での倍率なので、縦向き→横向き（横幅 480px）にしても、320px × 1.0 の倍率で表示されます。これは画面を指でタップすることによって、480px × 1.0 にフィットしますが、どうしても自動的に画面にフィットさせたい場合は、Vewport を以下のように記述します。

<meta name="viewport" content="width=device-width, maximum-scale=1.0" />

maximum-scale=1.0 と指定します。これは拡大／縮小操作自体を禁止する記述なので、等倍以上は拡大されません。ただ、ユーザによる拡大／縮小操作もできなくなってしまいます。Yahoo! JAPAN などの有名サイトでも、この機能を使っている場合もありますが、ユーザビィリティの観点からは、この指定は避けた方が良いそうです。