5分で分かるレスポンシブWebデザイン：5分で絶対に分かる（2/5 ページ）

» 2013年01月28日 14時24分公開

[菊池崇，Web Directions East]

2分－RWDの起源

　レスポンシブWebデザインは、2010年5月25日米国マサチューセッツ州のWebデザイナのEthan Marcotte（イーサン・マルコッテ）氏がテックブログの「A List Apart」で紹介したマルチデバイス対応のWebサイト制作手法だ。レスポンシブという言葉は、元は建築用語の「Responsive Design」（変化できる建築デザインの意）から引用され「Responsive Web Design」と命名された。

　先にも少しだけ紹介したように、レスポンシブWebデザインはマルチデバイスに対応できる。方法はCSS3のメディアクエリを利用して、デバイスの幅を検知し、CSSを切り替えるという手法だ。これらの切り替えポイントをブレイクポイントと呼ぶ。

　ブレイクポイントまでは、リキッドレイアウトを利用して変化させる。同時にフルードイメージを用いてサイト幅に応じたサイズに変更させるのだ。Webデザイナの一部では、昔からあるリキッドレイアウトと混同している方もいるらしいが、リキッドレイアウトを採用すればそれがレスポンシブWebデザインかというとそうではない。

　すでに存在した技術と新しい技術を組み合わせて作り出された技術で、レスポンシブWebデザインは誕生した。「メディアクエリ」「フルードグリッド」「フルードイメージ」の3つの根幹技術から構成されている。そして今なおレスポンシブWebデザインは進化し続けているが、レスポンシブWebデザインの起源はここからであることを理解していただきたい。

　では、次のページで「メディアクエリ」「フルードグリッド」「フルードイメージ」技術を1つずつご紹介しよう。