allWebクリエイター塾　ブログ: Responsive Web Design のウェブサイトを集めてみた。

スマートフォンウェブサイトの開発を考えると、これだけ、画面サイズが増えてくれば PHPや.htaccess で全てのデバイスに対してユーザーエージェントで細かく振り分けを行い、別々のHTMLやCSSを提供する手法は、ゼロサムゲームみたいなものかもしれません。クライアントにはコストが重くのしかかり、開発者には開発時間が重くのしかかります。ここには win-win のような関係は全くないでしょう。

「Responsive Web Design（レスポンシブ・ウェブデザイン）」
こんな時、少し考え方を変えて Responsive Web Design（レスポンシブウェブデザイン）を採用してはどうでしょう。スクリーンサイズに反応するようにレイアウトが変わるデザイン手法です。allWebクリエイター塾のスマートフォン講座では、一貫して「Responsive Web Design（レスポンシブ・ウェブデザイン）」を教えています。

「Responsive Web Design（レスポンシブ・ウェブデザイン）の作り方」
詳細は別の記事にて説明いたしますが、簡単に３つのポイントを説明します。

fluid image（フルード・イメージ） :
img,object,iframe{ max-width : 100%; }　
を指定します。これだけで、画像がウィンドウサイズに合わせて変化します。HTMLにはwidth属性、height属性でサイズは指定しないでください。
レイアウトでは、pxではなく % を利用する。
Media Query（メディア・クエリ）の利用：メディア・クエリを利用してレイアウトをかえるポイントを決めてレイアウト下記のサンプルのようにCSSで変化をさせます。

「Responsive Web Design（レスポンシブ・ウェブデザイン）」に興味のあるかたは、米国の　A book Apart から今春に発売される下記の書籍を購入するといいでしょう。著者の Ethan Marcotte 氏は、W3Cのウェブサイトをレスポンシブ・デザインにリニューアルさせたチームメンバーの一人です。

まずは世界中の実際の「Responsive Web Design（レスポンシブ・ウェブデザイン）」のウェブサイトを集めてみました。ウィンドウサイズを可変させてレイアウトの変化を楽しんでみてください。