コピペで使えるレスポンシブなデザインパターンを集めたサイト「Responsive Patterns」

これからレスポンシブサイトを作ろうという場合に、参考になる便利なデザインパターンサイトResponsive Patternsの紹介です。

フレームワークを利用しないでサイトやWordpressテーマを作りたい場合にはよさそうです。

スポンサーリンク
レクタングル(大)広告

Responsive Patternsの利用

Responsive Web Design Patterns  This Is Responsive

Responsive Patternsは、レスポンシブデザインのパターンやモジュールコードのコレクションサイトです。

簡単なレスポンシブサイトや、Wordpressテーマなら、ここにあるコードを組み合わせてコピペしていけば、ある程度の骨組みはでき上がるかと思います。

レイアウト

例えば、3カラムのサイトを作成する場合は、レイアウトから3カラムを選択します。

レイアウトから3カラムを選択

CodePen – 3 Column Layout v2

すると、以下のようなでもページが表示されるので、ページ下部にある「Edit this pen」をクリックします。

CodePen - 3 Column Layout v2

すると、以下のようなCodePenページが表示されるので、そこからコードを取得して利用します。(デモページがCodePenでない場合もあります。)

See the Pen 3 Column Layout v2 by Brad Frost (@bradfrost) on CodePen.

ナビゲーション

ナビゲーションメニューも、いろいろあるパターンの中から同様に選択します。

ナビゲーションのパターン

CodePen – Responsive Multi-level Nav (forked)

デモを確認したらコードを取得します。

CodePen - Responsive Multi-level Nav (forked)

あとは、取得したコードをサイトに貼り付けて編集するだけです。

See the Pen Responsive Multi-level Nav (forked) by Micah Godbolt (@micahgodbolt) on CodePen.

まとめ

このようにResponsive Patternsから、必要なパターンを組み合わせていくことによって、サイトの骨格はある程度作成できると思います。

パーツを組み合わせた後は、多少の調整は必要だと思いますが、1から自分でコードを書くよりは、かなり手間を省けるのではないかと思います。

レスポンシブのテーブルパターンもいろいろあって、「こんな方法があったのか」と参考になりました。

レスポンシブのテーブルパターン