[CSS]最近のレスポンシブ対応サイトで使われているレイアウトのアイデア・実装方法のまとめ
Post on:2017年7月3日
sponsors
レスポンシブ対応のレイアウトはどのように拡大・縮小させるのか、また縦・横に積み重ねるのかに大別されます。
ブラウザいっぱいに表示する1カラム、サイドバーを備えた2カラム、2カラムを均等に分割したスプリットスクリーン、カードやパネルを使ったレイアウトなど、最近のレスポンシブ対応サイトで使われているレイアウトのアイデアと実装方法を紹介します。
ひと昔前まではJavaScriptを使用しないと実装できなかったレイアウトも、flexboxなどを使うことでスタイルシートのみで実装できるようになりました。
Split Screenは、デスクトップでは左右に分割されたレイアウト、スマホでは上下に積み重なったレイアウトです。去年くらいから国内でもこのレイアウトは増えてきました。
Masonryは、カードやパネルをレンガ状に敷き詰めて配置するレイアウト。以前はjQueryのプラグインなどで実装していていましたが、「display: inline-block;」を使用することで実装できます。
上記と同じMasonryレイアウトで、こちらはflexboxを使って実装されています。カスタマイズが簡単で、拡張性も豊富です。キャプチャはフリップで、ほかにもフォーカス・パルスなど、さまざまなインタラクションが用意されています。
一見、Masonryのようですが、flexboxで実装されたマンガのコマ割り風にデザインされたカード型レイアウト。レスポンシブ対応で、表示サイズによってレイアウトが変化しますが、各コマの吹き出しとかは位置を保持したまま変化します。
Mostly Fluidは拡大縮小する流体グリッドを使い、デスクトップでは両端にマージンを持ち、スマホでは画面いっぱいに表示されるシンプルなレイアウトです。
シンプルで汎用性が高く、多くのサイトで利用されているテクニックです。
デスクトップで複数のカラムを使った時は、Column Dropを採用しているサイトが多いです。3カラムであれば、2カラムに、そして1カラムに積み重なります。
Layout Shifterは、さまざまな画面サイズに適応するために最も効果的なレイアウトです。デスクトップやスマホなど、それぞれのスクリーンサイズごとに適したレイアウトを実装するため、作業量が増えます。
Tiny Tweaksはすべてのサイズにおいて、1カラムで提供するレイアウトです。最近ではフルスクリーンで見せるコンテンツが増えており、プロダクトをより魅力的に見せることができます。
レイアウトをレスポンシブ対応にする場合、大きく分けて2つのパターンがあります。1つは縦に積み重ねるパターン。そしてもう一つがこのOff Canvasで、横に積み重ねるパターンです。一般的には、メニューなどのアイテムが配置されます。
上記を含め、さまざまなレスポンシブ対応レイアウトのパターンが掲載されています。
sponsors
