web creators特別号

HTML5・スマートフォン・SNS・Webアプリケーション Webサイト制作最新トレンドの傾向と対策

スマートフォン・タブレット 4-02
レスポンシブ・レイアウトの制作手法（後編）

レスポンシブ・レイアウトとは、過去においてはリキッドデザインと呼ばれた、画面幅に応じて横幅が拡大・縮小するレイアウトのことをいう。多様なデバイスの登場により最近大きな注目を集めている。

制作・文／糟谷博陸（株式会社サイズ）
Browser IE 8over　Firefox 3over　Safari 4over　Chrome 10over

レスポンシブ・レイアウトの 用途（２）

レスポンシブ・レイアウト＋スマートフォン専用サイト

レスポンシブ・レイアウトでオールラ ウンドなWebサイトを制作した場合でも 通信速度、マシンパワーの問題がスマー トフォン／タブレットでは残ってしまう。
それを解決すべき方法として、
A： レスポンシブ・レイアウト＋コンテントネゴシエーション【01】
B： レスポンシブ・レイアウト＋スマートフォン専用サイト【02】
の２パターンが考えられる。

A：レスポンシブ・レイアウト＋　コンテントネゴシエーション

レスポンシブ・レイアウトをコンテントネゴシエーションの１テンプレートとして考え、スマートフォン用テンプレートを別に用意することで実現できる。リサイズした画像を用意しておけば通信速度、マシンパワーの問題は解決できる。この場合、サイト構造はレスポンシブ・レイアウトと同じとなり自由度はない。また、設定したデバイスは常にそのテンプレートが呼び出されることになる。


【01】レスポンシブ・レイアウト＋スマートフォン専用サイト

B：レスポンシブ・レイアウト＋スマートフォン専用サイト

レスポンシブ・レイアウトのWebサイトとは別にはスマートフォン専用サイトを制作するものである。スマートフォン専用サイトなのでファイルサイズを意識して制作を行えばよい。

この場合、サイト構造はレスポンシブ・レイアウトと同じである必要はなく自由度がある。また、モバイルファーストのようにモバイルから考えるWebサイト制作も可能である。ユーザはモバイルとしての機能を重視したい時にはスマートフォン専用サイトを、PCと同じ情報を閲覧したい時はレスポンシブ・レイアウトのサイトを閲覧するといったように、ユーザ側での選択可能になる。

この手法の問題点はURLが別になるということとコンテンツ構造に関係なくコンテンツを再利用できるCMSがなければ管理が煩雑になるということである。


【02】レスポンシブ・レイアウトを用いれば、ワンソースで複数のデバイスに対応することができる。

レスポンシブ・レイアウトの 実装方法

レスポンシプ・レイアウトの作り方は、 おおよそ以下の通りになる。

(1)ピクセルでスタイルシートを組む

いわゆる「fixed」デザインをつくることになる。

(2)ピクセルで指定された横幅を全て「%」に変換する

「margin」「padding」の全てを「%」にする。960pxが全体の横幅でheader部分が900pxのウェブサイトの場合、900/960×100=93.758となる。

(3)画像を「FLUID IMAGE」にする

「レスポンシブ・レイアウト」では画像にwidth="" height="" は指定しない。

そのかわり、【03】の指定をする。この指定をすると画像はウィンドウサイズに合わせて自動的に大小する。なお、IE はmax-widthをサポートしていないので、【04】の記述をIE用のスタイルシートに記述する。


【03】


【04】

(4)メディアクエリを指定する

記述場所、スタイルシートをにまとめて記述をする。link要素をつかい head要素に記述もできますが、 httpリクエストを少なくするために スタイルシートに@mediaルールを利用して記述しよう。

(5)レスポンシブ・タイプセッティング

最後に、各ウィンドウサイズでのタイポグラフィのセッテイングをおこなう。画面サイズが小さくになるにつれて、「文字のサイズ」を小さくする必要がある。特に 480px 以下になったら「font-size」をデスクトップの 80%ぐらいのサイズに指定をしよう。

このように、非常に簡単にレスポンシブ・レイアウトを作成することができる。なお、詳細は【05】に記載しているので参考にしてほしい。

また【06】【07】はレスポンシブ・レイアウトを採用したWebサイト集である。こちらもあわせてご覧いただきたい。


【05】レスポンシブ・ウェブデザインって何?
（http://all-web-blog.blogspot.com/2011/03/blog-post_09.html）


【06】レスポンシブ・レイアウトを採用したWebサイト集
Media Queries（http://mediaqueri.es/）


【07】役立つフレームワークやTipsもいろいろある。
（http://kachibito.net/web-design/responsive-web-design-resource.html）


[目次に戻る]

【本記事について】
2012年1月28日発売のweb creators特別号「Webサイト制作最新トレンドの傾向と対策」から、毎週記事をピックアップしてご紹介! HTML5・CSS3によるコーディングから、次々と生まれてくる新しいソーシャルサービス、Webアプリケーション、スマートフォンやタブレット端末への対応など、いまWeb制作で話題になっているトピックを網羅した内容になっています。

※本記事はweb creators特別号『Webサイト制作最新トレンドの傾向と対策』からの転載です。この記事は誌面でも読むことができます。