[CSS]最近のレスポンシブ対応サイトで使われているレイアウトのアイデア・実装方法のまとめ

レスポンシブ対応のレイアウトはどのように拡大・縮小させるのか、また縦・横に積み重ねるのかに大別されます。
ブラウザいっぱいに表示する1カラム、サイドバーを備えた2カラム、2カラムを均等に分割したスプリットスクリーン、カードやパネルを使ったレイアウトなど、最近のレスポンシブ対応サイトで使われているレイアウトのアイデアと実装方法を紹介します。

ひと昔前まではJavaScriptを使用しないと実装できなかったレイアウトも、flexboxなどを使うことでスタイルシートのみで実装できるようになりました。

レスポンシブ対応サイトで使われているレイアウトのアイデア・実装方法のまとめ

デモのキャプチャ

Split Screen

Split Screenは、デスクトップでは左右に分割されたレイアウト、スマホでは上下に積み重なったレイアウトです。去年くらいから国内でもこのレイアウトは増えてきました。

デモのキャプチャ

Pure CSS Masonry Layout

Masonryは、カードやパネルをレンガ状に敷き詰めて配置するレイアウト。以前はjQueryのプラグインなどで実装していていましたが、「display: inline-block;」を使用することで実装できます。

デモのキャプチャ

driveway -GitHub

上記と同じMasonryレイアウトで、こちらはflexboxを使って実装されています。カスタマイズが簡単で、拡張性も豊富です。キャプチャはフリップで、ほかにもフォーカス・パルスなど、さまざまなインタラクションが用意されています。

デモのキャプチャ

Responsive Comic Book Layout

一見、Masonryのようですが、flexboxで実装されたマンガのコマ割り風にデザインされたカード型レイアウト。レスポンシブ対応で、表示サイズによってレイアウトが変化しますが、各コマの吹き出しとかは位置を保持したまま変化します。

デモのキャプチャ

Mostly Fluid

Mostly Fluidは拡大縮小する流体グリッドを使い、デスクトップでは両端にマージンを持ち、スマホでは画面いっぱいに表示されるシンプルなレイアウトです。
シンプルで汎用性が高く、多くのサイトで利用されているテクニックです。

デモのキャプチャ

Column Drop

デスクトップで複数のカラムを使った時は、Column Dropを採用しているサイトが多いです。3カラムであれば、2カラムに、そして1カラムに積み重なります。

デモのキャプチャ

Layout Shifter

Layout Shifterは、さまざまな画面サイズに適応するために最も効果的なレイアウトです。デスクトップやスマホなど、それぞれのスクリーンサイズごとに適したレイアウトを実装するため、作業量が増えます。

デモのキャプチャ

Tiny Tweaks

Tiny Tweaksはすべてのサイズにおいて、1カラムで提供するレイアウトです。最近ではフルスクリーンで見せるコンテンツが増えており、プロダクトをより魅力的に見せることができます。

デモのキャプチャ

Off Canvas

レイアウトをレスポンシブ対応にする場合、大きく分けて2つのパターンがあります。1つは縦に積み重ねるパターン。そしてもう一つがこのOff Canvasで、横に積み重ねるパターンです。一般的には、メニューなどのアイテムが配置されます。

デモのキャプチャ

Responsive Patterns

上記を含め、さまざまなレスポンシブ対応レイアウトのパターンが掲載されています。

sponsors

top of page

©2018 coliss