レスポンシブ デザイン用のレイアウトやナビゲーションなどのパターンのまとめ -This Is Responsive
Post on:2012年9月13日
sponsors
レスポンシブ デザインのレイアウト、ナビゲーション、画像、フォームのパターンをはじめ、有益なリソースなどをコレクションしているサイトを紹介します。
レスポンシブ デザインのパターン
まずは、レイアウトやナビゲーションなど、レスポンシブ デザイン用のパターンから。
下記にいくつかピックアップしました。
レイアウト: 3 equal-width columns
3カラムの可変レイアウトで、小スクリーンでは1カラムになります。
レイアウト: Off Canvas Right
2カラムの可変レイアウトで、小スクリーンでは右カラムがボタンでスライド表示します。
レイアウト: Double Wide Grid Block
ブロック状のグリッドで、ブロックのサイズは一定値をキープしながら数を変更します。
ナビゲーション: Toggle Navigation
水平タイプのナビゲーションで、小スペースでドロップダウン型のリストになります。
ナビゲーション: Left Nav Flyout
水平タイプのナビゲーションで、小スペースで左にリスト型になります。
表示サイズに合わせて、画像のサイズを最適化します。
地図: Fluid Map Maintaining Aspect Ratio
表示サイズに合わせて、アスペクト比を維持したままGoogle Mapsを表示します。
フォーム: Form with Left Labels
ラベルと入力欄を水平に配置し、小スペースで垂直に配置します。
レスポンシブ デザインのリソースとニュース
This Is Responsiveでは、レスポンシブ デザインの有益なリソースやニュースもまとめられています。
当サイトでもレスポンシブ デザインの設計・実装・確認に役立つリソースやツールのまとめがあるので参考にしてください。
sponsors
