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