@ RWD

RWDの基礎知識

レスポンシブ ウェブ デザイン(以下RWD)はユーザーが閲覧する端末の画面サイズに合わせて、ページのデザインやレイアウトを自在に操るウェブ制作の手法です。この手法を使うとスマホやタブレットだけでなく、大画面テレビで閲覧するような場合でも、ユーザーが使いやすいようにページを柔軟に順応させることが可能です。

RWDは、アメリカの Ethan Marcotte 氏が考案、命名したウェブ制作の手法です。「Web Standards」を広めた Jeffrey Zeldman氏が創設したウェブ制作者向けの「AList Apart」というウェブサイトで、2010年5月25日に「Responsive Web Design」という題名の記事でその詳細が紹介されました。この記事はアメリカのウェブ業界に衝撃を与え、その後、さまざまな議論がなされ賛否両論を乗り越え、今ではウェブ制作の 1つの手法として確立されています。日本では2011年後半から、この手法を取り入れたウェブサイトが登場し始めました。

RWD を構成する技術

RWD は単一の技術で実現される制作手法ではありません。大きく以下の3つの技術的要素で構成されます。

1. フルードグリッド:Fluid Grid

フルードグリッドとは、ページの構成要素を任意のグリッドに沿って配置する「グリッドデザイン」の手法と、ブラウザのウィンドウサイズに応じて各要素の大きさを伸縮させる「リキッドレイアウト」の手法を組み合わせたレイアウト手法です。

RWD では、デザイン制作初期はグリッドデザインで各要素をレイアウトしていき、レイアウトが決まった段階で、px 単位で指定されている箇所を % 単位に変更します。このようにすることでさまざまな画面サイズにフィットするページを作成します。

2. フルードイメージ:Fluid Image

フルードイメージは、ブラウザのウィンドウ幅(レイアウトの大きさ)に合わせて画像のサイズを拡大・縮小する手法です。フルードグリッドと組み合わせることで、画像を含むすべての要素を画面サイズに合わせることができます。

3. ディアクエリ:Media Queries

メディアクエリは、「ウィンドウの幅」「画面解像度」、「デバイスの向き」などを条件にして、HTML に適用するスタイルを切り替えることができる CSS3 の機能です。CSS2 のメディアタイプ(Media Type)を拡張した機能です。

RWD では、メディアをクエリを利用して適用するスタイルをデバイスごと(画面サイズごと)に切り替えます。