5分で分かるレスポンシブWebデザイン：5分で絶対に分かる（2/5 ページ）
流行りのレスポンシブWebデザインを、いくつかのカテゴリに分けて説明する。スマートフォン向けサイト制作を学びたいという方も必読だ。
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つずつご紹介しよう。
Copyright © ITmedia, Inc. All Rights Reserved.