CSS Flexboxを使ったレスポンシブなWebデザインレイアウト8選

FLEXBOX
DESIGNER

「凝ったレイアウト設計をしたのに、デバイスによってはデザインが崩れてしまう……」そんな経験はありませんか?

今回ご紹介するのは、フレキシブルなレイアウトができる便利なレイアウトモジュール『CSS Flexbox』。Webデザイナーにつきまとうレイアウト問題を解決してくれる、救世主的な存在です。Flexboxは現在、主要なブラウザのほとんどがサポートしています。

今回は、複雑なプロセスをシンプルにしてくれるCSS Flexboxを使った、魅力的なレイアウトを8つご紹介します。

1. ぴょんぴょん動くフレキシブルなボックス

CSS Flexboxのもっとも便利な機能のひとつは、割り当てられたスペースに基づいて、ボックスがレスポンシブにレイアウトされるというものです。

さらにいくつかのメディアクエリを追加すると、ボックスはどんなスクリーンでも完璧に表示されるようになります。画面の大きさに応じてどのように調整されるか、ぜひ確認してみてください。

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

2. フルスクリーンナビゲーション

ナビゲーションは、もっともCSS Flexboxの恩恵を受けられるエレメントのひとつです。

サイズをレスポンシブに拡大縮小するだけでなく、列の高さやテキストの配置を均等にするという機能も。このスニペットでは、そうした機能が発揮されています。

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

3. フレキシブルなタイムライン

タイムラインのレイアウトにもCSS Flexboxがおすすめです。

画面が大きいときはボックスが左右に配置され、小さいときはデザインを保ったまま、縦一列に配置されます。どちらの場合においても、表示されるタイムラインは正確です。

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

4. フレキシブルなページネーション

ナビゲーションバーと同じく、ページネーションもCSS Flexboxにぴったり。

以下の例では、画面が大きいときは長いリストが表示され、画面が小さいときは現在のページ番号のみが表示されます。スペースを節約しながら、必要な機能をユーザーに提供できるのです。

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

5. フレキシブルなプロダクトリスト

CSS FlexboxとCSSセレクターを組み合わせれば、プロダクトや投稿などのコンテンツの「リスト」を作成できます。

以下の例で再現しているのは、商品リストを紹介するページです。セレクターを使って6つの製品をリスト表示しています。もちろん、画面サイズによってレスポンシブに対応。

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

6. メイソンリーレイアウト

メイソンリー(石積み)は、ブログ、ポートフォリオ、フォトギャラリーなどにおすすめのレイアウトです。複雑そうに見えますが、CSS Flexboxを使えば簡単に実装できます。

以下の例では、CSS Flexboxを使ってメイソンリーレイアウトを実装。スクリーンサイズに合わせてボックスを美しく配置しています。

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

7. テキストの垂直方向中央揃え

コンテナの高さがわかっていれば、テキストを垂直方向に中央揃えするのは簡単です。しかし、画面サイズに応じて高さが変わるヒーローエリアについてはどうでしょうか。

CSS Flexboxを使えば、こうした状況でも簡単にテキストを中央に配置できます。

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

8. フレキシブルなフォーム

大きな画面できちんと表示されるフォームも、小さな画面で表示されなければモバイルユーザーには使えません。

この例ではCSS Flexboxを使って、画面の大きさに合わせてフォームを表示しています。

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

おわりに

CSS Flexboxを使いこなすには、まず学習が必要であることは否定できません。しかし基本の学習に時間を割けば、そのぶんの大きな恩恵が受けられます。

サイズや間隔の設定、コンテンツ配置で悩む必要はもうありません。CSS Flexboxを使って、技術に制限されずに魅力的なレイアウトを作りましょう!

(原文:Asuka Nakajima 翻訳:Eric Karkovack)

 

あわせて読みたい!▼

40,000人以上が使う!日本最大級のフリーランス・副業向けマッチングサービス『Workship』

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」

フリーランス・副業向けマッチングサービス『Workship(ワークシップ)』が、そんな悩みを解決します!

  • 累計40,000人以上のフリーランス・副業ワーカーが登録
  • 東証プライム上場企業からスタートアップまで多数参加
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 公開中の募集のうち66%がリモートOKのお仕事
  • 時給1,500円〜10,000円の高単価案件のみ掲載
  • お仕事成約でお祝い金10,000円プレゼント!

利用料は一切かかりません。一度詳細をのぞいてみませんか?

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。また、本メディア内に掲載されているリンクには、アフィリエイトURLが含まれる可能性があります。

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
デザイナー副業案件
Workship