Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

[Web Design] Media Queries – a collection of responsive web designs – レスポンシブウェブデザインのサイトコレクション

  • Pocket
  • このエントリーをはてなブックマークに追加

レスポンシブウェブデザイン。なかなか聞き慣れない言葉ですな。これは閲覧するディスプレイのサイズによって、サイトのレイアウトを最適化しようという試みだそうです。リキッド(フルード)レイアウト、ソリッドレイアウト、エラスティックレイアウトに続く、レイアウトの新しい定義とでも言いましょうか。こうしたレイアウト手法が出てきた背景には、サイト閲覧のプロセスの多様化が理由として挙げられると思います。ようするに誰しもがPCからサイトを見ているわけではないヨと。最近じゃスマートフォンとかタブレットデバイスからも見てるヨと。それぞれの解像度に合ったレイアウトを、CSS3のMedia Queriesを使って最適化しましょうネと、まぁそういう事であります。もちろん似たような手法としてJSによるCSS切り替えという方法がより一般的ではありますが、今後CSS3の普及によりこちらの手法の方が主流になっていくような気がします。各リンク先のサイトを見ると、ウィンドウサイズによってリアルタイムにレイアウトが変わるので、なかなか楽しいです。ちなみにこのサイトそのものもレスポンシブ対応されているので、ウィンドウサイズをグリグリしてみましょう。

One thought on “[Web Design] Media Queries – a collection of responsive web designs – レスポンシブウェブデザインのサイトコレクション”

  1. Pingback: Tweets that mention [Web Design] Media Queries – a collection of responsive web designs – レスポンシブウェブデザインのサイトコレクション - mBlog -- Topsy.com
  2. Trackback: Tweets that mention [Web Design] Media Queries – a collection of responsive web designs – レスポンシブウェブデザインのサイトコレクション - mBlog -- Topsy.com

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください