レスポンシブ デザイン用のレイアウトやナビゲーションなどのパターンのまとめ -This Is Responsive

レスポンシブ デザインのレイアウト、ナビゲーション、画像、フォームのパターンをはじめ、有益なリソースなどをコレクションしているサイトを紹介します。

サイトのキャプチャ

This Is Responsive

レスポンシブ デザインのパターン

まずは、レイアウトやナビゲーションなど、レスポンシブ デザイン用のパターンから。

下記にいくつかピックアップしました。

デモのキャプチャ

レイアウト: 3 equal-width columns

3カラムの可変レイアウトで、小スクリーンでは1カラムになります。

デモのキャプチャ

レイアウト: Off Canvas Right

2カラムの可変レイアウトで、小スクリーンでは右カラムがボタンでスライド表示します。

デモのキャプチャ

レイアウト: Double Wide Grid Block

ブロック状のグリッドで、ブロックのサイズは一定値をキープしながら数を変更します。

デモのキャプチャ

ナビゲーション: Toggle Navigation

水平タイプのナビゲーションで、小スペースでドロップダウン型のリストになります。

デモのキャプチャ

ナビゲーション: Left Nav Flyout

水平タイプのナビゲーションで、小スペースで左にリスト型になります。

デモのキャプチャ

画像: Basic Fluid Image

表示サイズに合わせて、画像のサイズを最適化します。

デモのキャプチャ

地図: Fluid Map Maintaining Aspect Ratio

表示サイズに合わせて、アスペクト比を維持したままGoogle Mapsを表示します。

デモのキャプチャ

フォーム: Form with Left Labels

ラベルと入力欄を水平に配置し、小スペースで垂直に配置します。

レスポンシブ デザインのリソースとニュース

This Is Responsiveでは、レスポンシブ デザインの有益なリソースやニュースもまとめられています。

当サイトでもレスポンシブ デザインの設計・実装・確認に役立つリソースやツールのまとめがあるので参考にしてください。

top of page

©2017 coliss