CSSレイアウトの基礎（フレックスボックスとグリッド）

keigo_fujiwara

2025年1月17日 00:04

CSSレイアウトとは？

CSSレイアウトは、Webページ上の要素を配置する技術です。適切なレイアウトを設計することで、ユーザーが快適に操作できるページを作成できます。

この記事では、FlexboxとCSS Gridという2つの主要なレイアウト技術について、基本的な使い方と実践例を紹介します。

1. Flexboxの基礎

Flexbox（Flexible Box）は、要素を1次元（行または列）に柔軟に配置するためのレイアウトモデルです。

1.1 主なプロパティ

コンテナの設定

display: flex;

flex-direction: 要素の配置方向を指定
- row（デフォルト）：水平方向
- column：垂直方向

.flex-container {
  display: flex;
  flex-direction: row;
}

アイテムの配置

justify-content: 水平方向の整列
- flex-start：左寄せ
- center：中央寄せ
- space-between：等間隔
align-items: 垂直方向の整列
- stretch（デフォルト）：引き伸ばし
- center：中央揃え

.flex-container {
  justify-content: center;
  align-items: center;
}

1.2 実践例：ナビゲーションバー

HTMLコード

<div class="flex-container">
  <div>Home</div>
  <div>About</div>
  <div>Contact</div>
</div>

CSSコード

.flex-container {
  display: flex;
  justify-content: space-between;
  background-color: #f4f4f4;
  padding: 10px;
}

.flex-container div {
  padding: 10px 20px;
  background-color: #ddd;
}

2. CSS Gridの基礎

CSS Gridは、行と列を使用して2次元のレイアウトを管理するための強力なツールです。

2.1 主なプロパティ

コンテナの設定

display: grid;

grid-template-columns: 列の幅を指定
- repeat(3, 1fr)：3列を均等に配置
grid-template-rows: 行の高さを指定

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

アイテムの配置

justify-items: 水平方向の配置
- start：左寄せ
- center：中央寄せ
align-items: 垂直方向の配置
- start：上寄せ
- center：中央寄せ

.grid-container {
  justify-items: center;
  align-items: center;
}

2.2 実践例：カードレイアウト

HTMLコード

<div class="grid-container">
  <div>カード1</div>
  <div>カード2</div>
  <div>カード3</div>
</div>

CSSコード

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.grid-container div {
  background-color: #f9f9f9;
  padding: 20px;
  border: 1px solid #ddd;
  text-align: center;
}

3. FlexboxとGridの使い分け

Flexboxが適している場合：
- ナビゲーションバー
- 簡単な1行レイアウト
CSS Gridが適している場合：
- 複雑な2次元レイアウト
- カード型デザインやダッシュボード

まとめ

FlexboxとCSS Gridを学ぶことで、効率的かつ美しいレイアウトを構築できます。それぞれの特性を理解し、適切な場面で使い分けましょう。

次回は、レスポンシブデザインの実践テクニックを解説します。お楽しみに！

筆者について

藤原圭吾

BeEngineer梅田校の責任者
プログラミング教室の運営および授業の実施
情報Ⅰの教材作成および映像授業に出演
アプリ「Let's Code Py」を運営
集客用LINEの運営および広報映像の編集