第4回：CSSでのレイアウト技術 – Flexbox

2024-08-04

今回はCSSのFlexboxレイアウトを使って、カフェサイトのコンテンツを効率的に配置する方法について学びます。
Flexboxを使うと複雑なレイアウトも簡単に実現できます。
より新しいプロパティのGridを勉強するときに理解しやすくなるので、ここでレイアウトの基礎を固めましょう。

Flexboxの基本

Flexbox（Flexible Box Layout）はCSSのレイアウトモデルの一つで、アイテムを効率よく配置するための強力なツールです。
Flexboxを使うことで縦横の配置やスペースの調整が容易になります。

Flexboxの基本構成要素

まず以下の2つの言葉が出てきます。

アイテム
コンテナ

アイテムとは並べ替えたい要素のこと、コンテナとはアイテムを囲む要素のことです。
下記の例ではliタグがアイテムで、ulタグがコンテナになります。

<ul>
  <li>アイテム1</li>
  <li>アイテム2</li>
  <li>アイテム3</li>
</ul>

主に以下のCSSプロパティを使ってFlexboxレイアウトを設定します。
プロパティはすべてコンテナに設定します。

display: flex

コンテナ要素に指定します。

flex-direction

アイテムの配置方向を設定します。
値にはrow（横並び）やcolumn（縦並び）があります。

flex-wrap

Flexboxレイアウトで要素が一行に収まりきらない場合に、行を折り返すかどうかを指定するためのプロパティです。
値にはnowrap（折り返さない）やwrap（折り返す）があります。

justify-content

アイテムの水平方向の配置方法を指定します。
次に紹介するalign-itemsと合わせて使用すると非常に便利で、私はこのプロパティのためにdisplay: flexをほぼすべての要素に設定するくらいです。
値にはflex-start（左揃え）、center（中央揃え）、space-between（アイテム間を均等に配置）など、他にも非常にたくさんの値があります。

align-items

アイテムの垂直方向の配置方法を指定します。
値にはflex-start（上揃え）、center（中央揃え）などがあります。

このcenterは非常によく使います。
以前はpaddingを微調整して要素を上下中央に配置するのが手間でしたが、今では要素の高さを設定して、コンテナにalign-items: centerを指定するだけで簡単に中央揃えができるようになりました。

カフェサイトへの適用例

カフェサイトのメインコンテンツをFlexboxでレイアウトしましょう。
以下のCSSをstyle.cssに追加します。

/* Flexboxレイアウト */
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.section-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.section-container .section-item {
  flex: 1;
  margin: 10px;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

ここでは以下の3つのことを設定しています。

mainタグにFlexboxを適用しコンテンツを上下左右中央揃えにします
.section-containerクラスを使って子要素を横並びに配置します
.section-itemクラスを使って個々のセクションアイテムにスタイルを適用します

HTMLの修正

カフェサイトのHTMLファイルを更新して、Flexboxレイアウトを適用します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>カフェサイト</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>カフェへようこそ</h1>
    <nav>
      <a href="index.html">ホーム</a>
      <a href="menu.html">メニュー</a>
      <a href="contact.html">お問い合わせ</a>
    </nav>
  </header>
  <main>
    <div class="section-container">
      <div class="section-item">
        <h2>カフェの紹介</h2>
        <p>私たちのカフェは最高のコーヒーと心地よい空間を提供します。</p>
      </div>
      <div class="section-item">
        <h2>おすすめメニュー</h2>
        <p>人気のコーヒーやデザートをお楽しみください。</p>
      </div>
    </div>
  </main>
  <footer>
    <p>© 2024 カフェサイト. All rights reserved.</p>
  </footer>
</body>
</html>

ここでは以下の2つのことを設定しています。