第5回：CSSでのレイアウト技術 – Grid Layout

2024-08-04

今回はCSSのGrid Layoutを使って、カフェサイトのレイアウトをさらに強化する方法について学びます。
CSSのレイアウト技術にはFlexboxとGrid Layoutがありますが、それぞれの特性を理解し、適切に使い分けることで、魅力的で使いやすいサイトをデザインできます。
本記事ではGrid Layoutの基本からその応用までを解説し、Flexboxとの違いを明確にし、どのような場面でどちらを使うべきかについても触れます。

Grid Layoutの基本

Grid Layoutとは？

Grid LayoutはCSSの強力なレイアウトシステムで、二次元のレイアウトを簡単に作成できるように設計されています。
これによりカフェサイトのように複雑なウェブページのレイアウトもシンプルなコードで実現可能になります。

Flexboxとの違い

Flexbox: 主に一方向（一列または一行）のレイアウトを得意としています。
アイテムを並べる際の柔軟性が高く、要素の順序や揃え方を簡単に変更できます。
Grid Layout: 二次元のレイアウトを扱うために設計されています。
これにより行と列の両方で要素を配置・管理することができ、カフェサイトのような複雑なデザインを効率的に実現できます。

Grid Layoutの基本構成要素

まず以下の2つの言葉が出てきます。
ここもFlexboxと同じです。

アイテム
コンテナ

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

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

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

display: grid: コンテナ要素に指定します。
grid-template-columns: 列の定義を設定します。
例えばrepeat(3, 1fr)は3列を均等な幅で設定します。
grid-template-rows: 行の定義を設定します。
例えばrepeat(2, auto)は2行を自動サイズで設定します。
gap: アイテム間のスペースを設定します。

カフェサイトへの適用例

カフェサイトのメインコンテンツをGrid Layoutでレイアウトしましょう。
以下のCSSをstyle.cssに追加します。
Flexboxの記述がある人はそこを消してから追加してください。

/* Grid Layout */
main {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.section-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

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

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

mainタグにGrid Layoutを適用して2列レイアウトに設定します
.section-containerクラスを使ってアイテムを2列レイアウトに設定します
.section-itemクラスを使って個々のセクションアイテムにスタイルを適用します

HTMLの修正

カフェサイトのHTMLファイルを更新してGrid Layoutを適用します。

<!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 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つのことを設定しています。