Flexboxの基本をマスターしよう！レスポンシブレイアウトの作成方法

2024年9月15日

はじめに

CSSの**グリッドレイアウト（Grid Layout）**は、複雑なウェブページのレイアウトをシンプルに設計できる強力なツールです。従来のフロートやFlexboxよりも多機能で、2次元のレイアウト（行と列）を簡単に実現できます。この記事では、CSSグリッドレイアウトの基本的な使い方を解説し、複雑なレイアウトを効率的に作成する方法を紹介します。

グリッドレイアウトとは？

グリッドレイアウトは、要素を行と列に配置するためのCSSレイアウトモジュールです。これにより、複数のコンテンツを整理しやすくなり、ページ全体を整然としたレイアウトに仕上げることができます。

従来のレイアウト手法では難しかった複雑なレイアウトも、グリッドを使うことで直感的に構築できるのが特徴です。

基本的なグリッドレイアウトの使い方

グリッドレイアウトを使用するには、まず親要素にdisplay: grid;を指定します。その後、列や行のサイズ、要素の配置などを指定していきます。

基本の構造

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: auto;
      gap: 10px;
    }
    .item {
      background-color: lightblue;
      padding: 20px;
      font-size: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
  </div>
</body>
</html>

この例では、.containerがグリッドの親要素として設定され、3列のグリッドレイアウトが作成されます。grid-template-columnsで各列の幅を指定し、gapでアイテム間のスペースを設定しています。

グリッドレイアウトの基本プロパティ

グリッドレイアウトは、多彩なプロパティを使って柔軟にレイアウトを構築することができます。ここでは、代表的なプロパティをいくつか紹介します。

1. grid-template-columnsとgrid-template-rows

grid-template-columnsは、列の数とサイズを指定するプロパティです。同様に、grid-template-rowsは行のサイズを指定します。

CSS

.container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 100px 200px;
}

この例では、1列目は固定幅200px、2列目と3列目は自動的に余ったスペースを均等に割り当てられます。行のサイズもそれぞれ固定されています。

2. gap

gapは、グリッドアイテム間のスペースを設定するプロパティです。以前はgrid-gapと呼ばれていましたが、現在は単にgapで指定します。

CSS

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

この例では、列や行の間に20pxのスペースが設定されます。

3. grid-columnとgrid-row

各グリッドアイテムのサイズや配置をカスタマイズするために、grid-columnとgrid-rowを使います。これらを使うと、アイテムが複数の列や行にまたがるように配置することができます。

CSS

.item1 {
  grid-column: 1 / 3;
}
.item2 {
  grid-row: 1 / 3;
}

この例では、.item1が1列目から3列目までをまたぎ、.item2が1行目から3行目までを占めます。

レスポンシブデザインとグリッドレイアウト

グリッドレイアウトは、レスポンシブデザインにも最適です。fr単位やメディアクエリを使って、画面サイズに応じたレイアウトの変更が容易にできます。

レスポンシブレイアウトの例

以下は、グリッドレイアウトを使ってレスポンシブなデザインを作成する例です。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    @media (max-width: 800px) {
      .container {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 500px) {
      .container {
        grid-template-columns: 1fr;
      }
    }

    .item {
      background-color: lightblue;
      padding: 20px;
      font-size: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
  </div>
</body>
</html>

この例では、画面幅が800px以下になると2列に、500px以下になると1列に自動で調整されます。これにより、さまざまなデバイスに対応したレスポンシブなグリッドレイアウトが実現できます。

グリッドエリアを使ってレイアウトをカスタマイズする

grid-template-areasを使うと、グリッド内のアイテムを名前で指定して、レイアウトを視覚的に構築することができます。

グリッドエリアの例

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <style>
    .container {
      display: grid;
      grid-template-areas: 
        "header header header"
        "sidebar content content"
        "footer footer footer";
      grid-template-columns: 1fr 2fr;
      gap: 10px;
    }
    .header { grid-area: header; background-color: lightcoral; }
    .sidebar { grid-area: sidebar; background-color: lightgreen; }
    .content { grid-area: content; background-color: lightblue; }
    .footer { grid-area: footer; background-color: lightgray; }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
  </div>
</body>
</html>