CSSフレックスボックスを使ってデザイン性の高いレイアウトを作成するために すぐに使えるCSSコード例

長年にわたり、コラムのようなデザインはウェブデザイナーにとって難しいレイアウトとして知られてきました。見栄えをよくするためにclearfixesなどがよく使われています。

 

 

ありがたいことに、CSS Flexboxの出現は従来の難しい過程をとてもシンプルにしてくれました。フレックスボックスは複数のコラムや縦列や横列によって作られているので、全ての古いレイアウトの過程とおさらばできるのです。

 

 

 

その結果、私たちは限られたわずかな時間で素晴らしいレイアウトを作ることができるのです。以下に、私たちが今回集めた優良なCSSフレックスボックスの例をご紹介しています。さっそく見ていきましょう！

 

 

レスポンシブルール

フレックスボックスのとても便利な特徴の一つは、各内容に割り当てられたスペースに基づいて適合する能力です。それ自身は素早い反応をすることで知られています。全てのスクリーンに完璧な見た目で現れることができるので、常用することができます。下の例をチェックしてみてください。

See the Pen
SUPER BEST 🙀 FLEXBOX GRID 🌭 MIXIN EVR! 🔥 by Josh (@iamjoshellis)
on CodePen.

 

 

 

フルスクリーンナビ

ナビはフレックスボックスから得られる有用なデザイン要素の一つです。サイズ感を合わすだけでなく、コラムの高さやテキストをそろえることができるのも特徴の一つです。以下の例を見てどのように働くのかを確認してみましょう。

See the Pen
Velocity.js fullscreen flexbox overlay navigation by Mirko Zorić (@fluxus)
on CodePen.

 

 

 

タイムライン

タイムラインはフレックスボックスが作られた理由の一つとも言えるような複雑なレイアウトです。この例はラインのそれぞれのサイドに入口を交互に挿入しています。しかし、ビューポートが縮んでいるように、デザイン要素を保ったまま全ては一つのコラムの中に崩れ落ちるように介入しているのが分かります。

See the Pen
Flexbox Timeline Layout by Paul Barker (@paulhbarker)
on CodePen.

 

 

ネクストページ

基本的なナビゲーションバーのように、paginationメニューはフレックスボックスが持っている素晴らしい長所の一つです。この例の場合は、幅広いビューポートがページナンバーを全て表しています。しかし、これの幅広いビューポートをスマホ用に再構築できるのかというとそうではありません。その代わり、CSSはメニューから現在開いているページナンバー以外を隠すために使われています。これはスペースを節約したり、ユーザーの必要とするような機能を提供したりするための方法です。

See the Pen
Responsive Flexbox Pagination by William H. (@iamjustaman)
on CodePen.

 

 

特徴的なプロダクト

フレックスボックスとCSSセレクターのコラボしたものは商品、投稿、その他のコンテンツのリストを工夫して作ることを手助けしてくれます

下の例では、6つのプロダクトのレイアウトを紹介しています。セレクターの使い方を通して、はじめの2つは大きく目立つコラムとなっているのが分かります。しかし、小さいスクリーンでは、全てを同じ大きさにディスプレイすることができます。

See the Pen
Product Page Layout with flexbox by Angular Material (@AngularMaterial)
on CodePen.

 

 

レンガのようなレイアウトを作る

レンガ風のレイアウトはブログ、ポートフォリオやフォトギャラリーなどに最適なオプションです。見た目は複雑なように見えますが、個々のアイテムがレイアウトされているだけになっています。ここにフレックスボックスを用いたレンガ風レイアウトの作り方をご紹介しています。ランダムにコンテンツがセットされているように見え、スクリーンサイズに基づいて美しく調整されています。

See the Pen
Pure CSS masonry layout w/ Flexbox by Jhey (@jh3y)
on CodePen.

 

 

縦列中心のコンテンツ

縦列中心のテキストはとても簡単で、基本となるコラムの高さを配置してくれます。しかし、どのように様々なスクリーンサイズに適合するのでしょうか?フレックスボックスは簡単にそれをやってのけます。下にどのようにフレックスボックスが活躍するのかを説明しています。

See the Pen
Flexbox Project 3: Banner With Centered Content ii by Envato Tuts+ (@tutsplus)
on CodePen.

 

 

柔軟性のあるフォーム

小さいスクリーンに適応していないフォームはモバイルユーザーには使いにくくなっています。フレックスボックスを通じて、必要に応じて簡単にスクリーンサイズを調節することができます。この機能により、全てのディバイスで簡単に使用できるようになります。

See the Pen
Flexbox Form by Katherine Kato (@kathykato)
on CodePen.

 

 

レイアウトに柔軟性を与える

CSSフレックスボックスは学ぶのに時間がかかります。しかし。基礎を学ぶことに時間をかけることをとてもおすすめします。一度使い始めたら、過去のレイアウトよりも確実に改良された見た目のものを作ることができます。

 

 

つまり、これまでに使われていたサイズ、スペーシング、調節のための創造的な解決策はもはや必要なくなります。なぜなら、フレックスボックスの中にすべて組み込まれているからです。素晴らしいレイアウトを作るための時間を短縮することが可能になるのです！