Webのページレイアウトやコンポーネントのレスポンシブ対応のさまざまなアイデア集 -Responsive Patterns

Post on:2015年2月4日

sponsors

29種類のレイアウト、30種類のナビゲーション、画像・動画・地図・テーブル・フォーム・タブ・カルーセルなど、Webページで使用するさまざまなレイアウトやコンポーネントのレスポンシブ対応のパターンをまとめたサイトを紹介します。

デザイン的なアイデアにしてもよし、HTML/CSSの参考にしてもよし、です！

Responsive Web Design Patternsではレイアウトやコンポーネントが7つのカテゴリに分けられており、それぞれオンラインのデモとコードを確認できます。

レスポンシブ対応のレイアウトでは汎用性のあるものをはじめ、フルスクリーン・オフキャンバス・カード型・サムネイル付きのリストなど、最近のWebサイトでよく見かけるものが揃っています。

ナビゲーションも多種多様なものが揃っており、一階層用・多段階層用・フルスクリーンのオーバーレイ・固定表示といったグローバルナビゲーション系から、パンくず・ページネーションなどもあります。

グリッド状に配置した画像、相対指定の画像、ページいっぱいに配置する動画、テーブル、Googleマップなど、ページでよく使うコンポーネント。

ベーシックな入力フォーム、検索フォーム、カルーセル、タブ、アコーディオン、Lightboxなど、モジュール類も充実しています。注釈のレスポンシブはいいアイデアですね。