レスポンシブWebデザインを作る3つのステップ
レスポンシブWebデザインでは、次のような3つのステップで制作する。
- ピクセル単位でデザインしてパーセント単位に変換
- 画像サイズを指定する（Fluid Image）
- respond.js の読み込み
CSS3で新たに定義されたメディアクエリーを利用して、デザインを変更する基準サイズを設定する。以下のような基準が一般的だが、レスポンシブWebデザインは「デバイス」ではなく「ウィンドウサイズ」を基準に判断するので、判断基準はこれ以外にもあり得る。
| 320ピクセル | iPhoneを代表とするスマートフォン |
| 768ピクセル | iPad を代表とするタブレット端末*1 |
| 1024ピクセル | デスクトップPC |
| 1680ピクセル | スマートTVをはじめとする大きなスクリーン |
|
|---|
*1 768ピクセルでは、ネットブックのようなタブレット以外の端末も指定範囲に入ってしまう。しかし、レスポンシブWebデザインのコンセプトはデバイスベースではなく、ウィンドウサイズベースでデザインを調整することだ。あくまでウィンドウサイズを基準に、そのウィンドウサイズに適したレイアウトを提供する。
1. ピクセルでデザインして%に変換する
レスポンシブWebデザインは、width, padding, margin を%単位で指定するリキッドデザインの一種だ。 width, padding, marginを%単位で指定してレイアウトを組めればいいのだが、実際には非常に難しい。そこで、一度ピクセル単位でレイアウトを指定してから、width, padding, margin を % に変更していこう。
たとえば、Webページ全体の幅であるbody要素が960px、その子要素であるheader要素が940pxの場合、
940÷960×100 = 97.916667%
となり、スタイルシートには header {width : 97.916667%} と指定する。同様にすべてのwidth, margin, padding を%に換算していく。
2. 画像サイズを指定する（Fluid Image）
レスポンシブWebデザインでは、ウィンドウサイズが小さくなると画像を縮小させる。画像のサイズを変更するには、スタイルシートへ widthを追加する。このテクニックを「Fluid Image」という。
/*モダンブラウザ用*/
img, iframe, object { max-width : 100%; }
/*IE7用*/
.ie7 img,
.ie7 object/ { width : 100%; }
/*IE8用*/
.ie8 img,
.ie8 object { width:auto\9}
imgsizer.js による画像の調整
Fluid Image を適用すると、Internet Explorer 7（IE7） 以下では画像の縮小時に粗く表示されてしまう。この現象を修正するスクリプトが「imgsizer.js」だ。head要素内にコンディショナル・コメントを利用して記述し、IE7以下の場合にだけimgsizer.jsを有効にする。
<head>
<!--[if lte IE 7.0]>
<script src=”assets/js/imgsizer.js” ></script>
<![endif]-->
</head>
 |  | |
|---|---|---|
| Fluid Imageで画像を縮小すると、IE7では粗く表示される（左）。imgsizer.jsを利用すると滑らかに縮小される（右） | ||
3. respond.jsの読み込み
「respond.js」は、メディアクエリーに対応していないIE8以下のブラウザーでもメディアクエリーを利用できるようにするスクリプトだ。非常に軽量なライブラリーで、古いIEでも簡単にメディアクエリーに対応できる。
- respond.jsのダウンロード
- https://github.com/scottjehl/Respond/archives/master
レスポンシブWebデザインの導入場面
レスポンシブWebデザインは、スマートフォンに限らず、さまざまなモバイルデバイスに対応できる制作手法だ。特にシンプルなアプローチであるがゆえの技術的な導入のしやすさ、運用コストの低さが大きな魅力だ。
一方でデバイスごとに振り分けて対応する旧来の手法は、制作側の手間の増加、複数のHTMLを用意することによる運用・メンテナンスコスト（工数・時間）の増加、将来増加するデバイスへの対応が保証されない といった問題を抱える。
クライアントの予算、人的リソースや運用方法に合わせて、より最適な方法を選択することをおすすめする。
著者：菊池 崇（きくち・たかし）
 |
|---|
Web Directions East LLC代表。allWebクリエイター塾講師。米国にてマーケティングを専攻修了。貿易会社を経て、allWebにてXHTML+CSS基礎講座、XHTML+CSS中級講座、XHTML+CSS上級講座、microformats講座などの講師。オーストラリア、米国、カナダなどで開催されている世界的に有名なカンファレンス「Web Directions」の日本版である「Web Directions East」の発起人。
