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

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

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

サイトのキャプチャ

Responsive Web Design Patterns

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

サイトのキャプチャ

Layout

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

サイトのキャプチャ

Navigation

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

サイトのキャプチャ

Images, Media/Data

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

サイトのキャプチャ

Forms, Text, Modules

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

top of page

©2017 coliss