2011/02/01

Responsive Web Design のウェブサイトを集めてみた。

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



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

「Responsive Web Design(レスポンシブ・ウェブデザイン)の作り方」
詳細は別の記事にて説明いたしますが、簡単に3つのポイントを説明します。
  1. fluid image(フルード・イメージ) :
    img,object,iframe{ max-width : 100%; } 
    を指定します。これだけで、画像がウィンドウサイズに合わせて変化します。HTMLにはwidth属性、height属性でサイズは指定しないでください。
  2. レイアウトでは、pxではなく % を利用する。
  3. Media Query(メディア・クエリ)の利用:メディア・クエリを利用してレイアウトをかえるポイントを決めてレイアウト下記のサンプルのようにCSSで変化をさせます。
「Responsive Web Design(レスポンシブ・ウェブデザイン)」に興味のあるかたは、米国の A book Apart から今春に発売される 下記の書籍を購入するといいでしょう。著者の Ethan Marcotte 氏は、W3Cのウェブサイトをレスポンシブ・デザインにリニューアルさせたチームメンバーの一人です。

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


「Responsive Web Design(レスポンシブ・ウェブデザイン)」サンプル



















http://www.tenbytwenty.com/











紹介した  ウェブサイトのCSSソースをよく観察してみよう。特に Media Query に注目してCSSのソースコードをみてましょう。作成者によって Media Query の指定がかなり違います。

宣伝ではありませんが、allWebでは 1年も前から「Responsive Web Design(レスポンシブ・ウェブデザイン)の手法を一貫して教えています。もしご興味がある方は、allWebの講座で勉強してみませんか?

機会があれば、ブログどうして上記のMedia Query の切り替えポイントがこのようになったのかを説明しましょう。



Bookmark and Share