これからレスポンシブサイトを作ろうという場合に、参考になる便利なデザインパターンサイトResponsive Patternsの紹介です。
フレームワークを利用しないでサイトやWordpressテーマを作りたい場合にはよさそうです。
目次
Responsive Patternsの利用
Responsive Patternsは、レスポンシブデザインのパターンやモジュールコードのコレクションサイトです。
簡単なレスポンシブサイトや、Wordpressテーマなら、ここにあるコードを組み合わせてコピペしていけば、ある程度の骨組みはでき上がるかと思います。
レイアウト
例えば、3カラムのサイトを作成する場合は、レイアウトから3カラムを選択します。
すると、以下のようなデモページが表示されるので、ページ下部にある「Edit this pen」をクリックします。
すると、以下のようなCodePenページが表示されるので、そこからコードを取得して利用します。（デモページがCodePenでない場合もあります。）
See the Pen 3 Column Layout v2 by Brad Frost (@bradfrost) on CodePen.
ナビゲーション
ナビゲーションメニューも、いろいろあるパターンの中から同様に選択します。
CodePen – Responsive Multi-level Nav (forked)
デモを確認したらコードを取得します。
あとは、取得したコードをサイトに貼り付けて編集するだけです。
See the Pen Responsive Multi-level Nav (forked) by Micah Godbolt (@micahgodbolt) on CodePen.
まとめ
このようにResponsive Patternsから、必要なパターンを組み合わせていくことによって、サイトの骨格はある程度作成できると思います。
パーツを組み合わせた後は、多少の調整は必要だと思いますが、1から自分でコードを書くよりは、かなり手間を省けるのではないかと思います。
レスポンシブのテーブルパターンもいろいろあって、「こんな方法があったのか」と参考になりました。
