CSS Flexboxで、Webページによく使用されるUIコンポーネントを実装するテクニックのまとめ

CSS Flexboxを使用してWebページによく使用されるUIコンポーネント、ヘッダでロゴを左端にナビゲーションを右端に、固定幅のサイドバーと流動幅のメイン、フォームで入力欄とボタンの高さを合わせる、同じHTMLで異なるレイアウトのカードを実装するテクニックを紹介します。

CSS Flexboxで、Webページによく使用されるUIコンポーネントを実装するテクニックのまとめ

CSS Flexbox: 5 Real World Use Cases
by Ahmad Shadeed

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

FlexboxはCSSの中でも最も優れた機能の1つです。要素をコーディングして、さまざまなスクリーンサイズに簡単に適応させるのに非常に便利です。

この記事ではFlexboxの基本的な知識があることを前提としており、Webページによく使用されるコンポーネントをFlexboxで構築するテクニックを解説します。
Flexboxの基本的な知識については、下記をご覧ください。

まず、この記事で紹介するコンポーネントのデザインを見てましょう。

Flexboxで構築するデザイン

Flexboxで構築するデザイン

Flexboxでヘッダを実装する方法

Flexboxで実装したヘッダ

Flexboxで実装したヘッダ

よく見かける通常のヘッダです、ロゴが左にあり、右にナビゲーションとユーザーの2つのセクションがあります。

実装のポイントは、ナビゲーションとユーザーが右端にプッシュされていることです。どのように実装するかそのテクニックを解説します。

ロゴはh1要素で実装し、ナビゲーションとユーザーはdiv要素で内包します。

Flexboxでは子要素のmarginにautoを使用すると、親要素の利用可能なスペースを占有します。この場合は、margin-left: auto;なので右端にプッシュされます。

margin-left: auto;有り・無しでどのように機能するのかは、下記のGIFアニメをご覧ください。

実際の動作はデモページで確認できます。

See the Pen
Practical Flexbox: Header
by Ahmad Shadeed (@shadeed)
on CodePen.

Flexboxでサイドバーとメインを実装する方法

Flexboxで実装したサイドバーとメイン

Flexboxで実装したサイドバーとメイン

通常、サイドバーの幅は固定されており、メインコンテンツの幅は流動的です。Flexboxはそういったレイアウトを簡単に実装できます。

サイドバーをaside要素、メインコンテンツをmain要素で実装し、これら2つの要素をdiv要素で内包します。

親のdiv要素にdisplay: flex;を定義し、Flexboxで実装します。

このレイアウトは、FlexboxよりもCSS Gridが適しています。ただし、Flexboxをベースとして使用し、対応ブラウザにはGridを使用するのがよいでしょう。@supportsで、簡単に実装できます。

実際の動作はデモページで確認できます。

See the Pen
Practical Flexbox: Sidebar and Main
by Ahmad Shadeed (@shadeed)
on CodePen.

Flexboxで「Top Sellers」のグリッドを実装する方法

Flexboxで実装した「Top Sellers」のグリッド

Flexboxで実装した「Top Sellers」のグリッド

このレイアウトでは、Flexboxを2つ使用しています。

  • ユーザーのコンポーネント
  • 各コンポーネントを配置するグリッド

ユーザーのコンポーネントはリスト要素で実装し、img要素とh3要素とp要素で構成されています。

実装のポイントは、3つです。

  • グリッドのラッパーに、<ul>要素を使用する。
  • グリッドのスタイルは<li>要素に適用されます。.c-sellerのコンポーネントは単独で動作します。
  • .top-sellers > *セレクタは、.top-sellersのすべての直接の子要素を選択します。この例ではすべての<li>要素が選択され、すべての幅は25%になります。

十分なスペースがあるときに上記を適用することが重要です。
全部のCSSを見てましょう。

こちらも、CSS Gridで実装することをお勧めします。サイドバーとメインの例と同様に、@supportsを使用してGridに対応しているブラウザのみ適用されるように記述します。

また、Flexboxを使用して、名前と注文の合計数を画像と垂直に揃えました。align-item: center;有り・無しでどのように機能するのかは、下記のGIFアニメをご覧ください。

実際の動作はデモページで確認できます。

See the Pen
Practical Flexbox: Top Sellers Grid
by Ahmad Shadeed (@shadeed)
on CodePen.

Flexboxでカードを実装する方法

Flexboxで実装したカード

Flexboxで実装したカード

上下2つのカードコンポーネントはほぼ同じですが、上は水平で、下は垂直(画像とテキストが積み重なっている)です。

コードを複製せずに、この2つを実装するにはFlexboxを使用すると便利です。そのやり方を見てましょう。

各カードは、img要素とh3要素とp要素で構成されています。

まずは、画像とテキストを水平に配置します。

画像とテキストを水平に配置します。

画像とテキストを水平に配置したカード

画像とテキストを水平に配置したカード

各子アイテムの幅が50%になっていることに注目してください。グリッドのアイテム間のスペースを追加する方法はマージンを使用することもできますが、これは難しくなります。マージンだと下記のようなコードで実装できます。

より簡単な方法は、各子アイテムにpadding-rightを加えて、負のマージンと同じ量をラッパーに追加することです。

次に、垂直に配置する場合を見てましょう。

画像とテキストを垂直に配置したカード

画像とテキストを垂直に配置したカード

HTMLは基本的には同じで、classだけ変えます。

垂直に積み重ねるので、flex-direction: column;を使用します。

実際の動作はデモページで確認できます。

See the Pen
Practical Flexbox: Articles Cards
by Ahmad Shadeed (@shadeed)
on CodePen.

Flexboxで検索フォームを実装する方法

Flexboxで実装した検索フォーム

Flexboxで実装した検索フォーム

Flexboxはこのデザインに最適な実装方法です。ボタンは固定幅で、入力欄は残りのスペースいっぱいに幅を広げます。

HTMLは非常にシンプルです、input要素とbutton要素で実装でします。

入力欄とボタンの高さが同じになっていることに注目してください。デフォルトで、Flexコンテナは子アイテムを引き伸ばし、高さを等しくします。

有り・無しでどのように違うか下記のGIFアニメをご覧ください。

実際の動作はデモページで確認できます。

See the Pen
Practical Flexbox: Search Form
by Ahmad Shadeed (@shadeed)
on CodePen.

ここまで読んでくれて、ありがとうございます。

sponsors

top of page

©2020 coliss