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

サイト構築 -CSS

Post on:2020年2月26日

はじめに

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

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

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

Flexboxで構築するデザイン

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

Flexboxで実装したヘッダ

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

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

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

<header class="c-header">
  <h1 class="c-logo"><a href="#">iShadeed Store</a></h1>
  <div class="c-header__nav">
    <nav>
      <ul>
        <!-- ナビゲーションのアイテム -->
      </ul>
    </nav>
    <a href="#" class="c-user">
      <span>Ahmad Shadeed</span>
      <img class="c-avatar" src="shadeed.jpg" alt="">
    </a>
  </div>
</header>

<h1 class="c-logo"><a href="#">iShadeed Store</a></h1>

<nav>

<ul>

</ul>

</nav>

<span>Ahmad Shadeed</span>

</a>

</div>

</header>

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

.c-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.c-header__nav {
    margin-left: auto; /* ここに注目！ */
}

.c-header {

display: flex;

align-items: center;

flex-wrap: wrap;

}

.c-header__nav {

margin-left: auto; /* ここに注目！ */

}

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

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

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

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

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

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

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

<div class="wrapper">
  <aside>...</aside>
  <main>...</main>
</div>

</div>

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

.wrapper {
    display: flex;
    flex-wrap: wrap;
}

aside {
    flex-basis: 250px;
}

main {
    flex-grow: 1;
}

.wrapper {

display: flex;

flex-wrap: wrap;

}

aside {

flex-basis: 250px;

}

main {

flex-grow: 1;

}

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

@supports (display: grid) {
    .wrapper {
        display: grid;
        grid-template-columns: 250px 1fr;
        grid-gap: 24px;
    }
}

@supports (display: grid) {

.wrapper {

display: grid;

grid-template-columns: 250px 1fr;

grid-gap: 24px;

}

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

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

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

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

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

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

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

<ul class="top-sellers">
    <li>
      <div class="c-seller">
        <img src="shadeed.jpg" alt="" class="c-avatar">
          <div>
            <h3>John Smith</h3>
            <p>150 orders</p>
          </div>
      </div>
    </li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

<li>

<div>

<h3>John Smith</h3>

<p>150 orders</p>

</div>

</li>

</ul>

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

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

.top-sellers {
  display: flex;
  flex-wrap: wrap;
}

.top-sellers > * {
    flex: 0 0 25%;
}

.top-sellers {

display: flex;

flex-wrap: wrap;

}

.top-sellers > * {

flex: 0 0 25%;

}

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

@media (min-width: 400px) {
  .top-sellers {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: -1rem;
  }

  .top-sellers > * {
    flex: 0 0 50%;
  }
}

@media (min-width: 600px) {
  .top-sellers > * {
    flex: 0 0 33%;
  }
}

@media (min-width: 900px) {
  .top-sellers > * {
    flex: 0 0 25%;
  }
}

@media (min-width: 400px) {

.top-sellers {

display: flex;

flex-wrap: wrap;

margin-bottom: -1rem;

}

.top-sellers > * {

flex: 0 0 50%;

}

@media (min-width: 600px) {

.top-sellers > * {

flex: 0 0 33%;

}

@media (min-width: 900px) {

.top-sellers > * {

flex: 0 0 25%;

}

こちらも、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で実装したカード

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

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

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

<ul class="articles-wrapper">
    <li>
      <article class="c-article">
        <a href="#">
          <img src="image.jpg" alt="">
          <div>
            <h3>How to design in a logo in 5 steps</h3>
            <p>By Ahmad Shadeed</p>
          </div>
        </a>
      </article>
    </li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

<li>

<div>

<h3>How to design in a logo in 5 steps</h3>

<p>By Ahmad Shadeed</p>

</div>

</a>

</article>

</li>

</ul>

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

.articles-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.articles-wrapper > * {
  flex: 0 0 50%;
}

.articles-wrapper {

display: flex;

flex-wrap: wrap;

}

.articles-wrapper > * {

flex: 0 0 50%;

}

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

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

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

.articles-wrapper > * {
  flex: 0 0 calc(50% - 16px);
  margin-right: 16px;
}

.articles-wrapper > * {

flex: 0 0 calc(50% - 16px);

margin-right: 16px;

}

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

.articles-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin-right: -16px;
}

.articles-wrapper > * {
  flex: 0 0 50%;
  padding-right: 16px;
}

.articles-wrapper {

display: flex;

flex-wrap: wrap;

margin-right: -16px;

}

.articles-wrapper > * {

flex: 0 0 50%;

padding-right: 16px;

}

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

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

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

<ul class="articles-wrapper">
    <li>
      <article class="c-article stacked">....</article>
    </li>
    ...
</ul>

<li>

</li>

...

</ul>

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

.c-article.stacked a {
  flex-direction: column;
  align-items: flex-start;
}

.c-article.stacked img {
  width: 100%;
  height: 150px;
  margin-bottom: 0.5rem;
  margin-right: 0; /* 通常のカードにはmargin-rightがあるので、マージンを0にリセット */
}

.c-article.stacked a {

flex-direction: column;

align-items: flex-start;

}

.c-article.stacked img {

width: 100%;

height: 150px;

margin-bottom: 0.5rem;

margin-right: 0; /* 通常のカードにはmargin-rightがあるので、マージンを0にリセット */

}

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

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

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

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

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

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

<form action="">
    <input type="text" name="" id="" placeholder="What are you looking for?">
    <button>Search</button>
</form>

<button>Search</button>

</form>

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

form {
  display: flex;
  flex-wrap: wrap;
}

input {
  flex-grow: 1;
}

form {

display: flex;

flex-wrap: wrap;

}

input {

flex-grow: 1;

}

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

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

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

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

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

はじめに

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

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

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

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

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

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Category

Blog Info

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

はじめに

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

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

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

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

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

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Recommend

Category

Blog Info