モダン CSS レイアウト：Grid、Flexbox、Container Queries

レイアウト手法の進化

時代	手法	課題
テーブル	<table>	意味論が不適切、柔軟性低い
フロート	float + clearfix	高さ崩れ、複雑
配置	position: absolute	文書フローから外れる
Flexbox	display: flex	一次元 ✅
CSS Grid	display: grid	二次元 ✅
Container Queries	@container	コンポーネント単位 ✅

---

Flexbox：一次元レイアウト

ナビ、ツールカード行、ボタン群など1 行／1 列向き：

.tool-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.tool-card {
  flex: 1 1 280px; /* grow shrink basis */
  min-width: 0;    /* はみ出し防止 */
}

よく使うパターン

/* 水平・垂直中央 */
.center { display: flex; justify-content: center; align-items: center; }

/* 両端揃え */
.navbar { display: flex; justify-content: space-between; align-items: center; }

/* 縦積み */
.sidebar { display: flex; flex-direction: column; gap: 0.5rem; }

ToolsKu トップのツールグリッドは flex-wrap + flex-basis: 280px で列数を自動調整しています。

---

CSS Grid：二次元レイアウト

ページ全体、カテゴリページなど行と列を同時に制御する場面向き：

.page-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.sidebar  { grid-row: 1 / -1; grid-column: 1; }
.header   { grid-column: 2; }
.main     { grid-column: 2; overflow: auto; }
.footer   { grid-column: 2; }

自動フィットグリッド

.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

auto-fill + minmax で列数を自動計算——広いと 4 列、狭いと 2 列、メディアクエリ不要。

---

Container Queries：コンポーネント単位のレスポンシブ

メディアクエリはビューポート幅、Container Queries は親コンテナ幅：

.tool-card-container {
  container-type: inline-size;
}

@container (max-width: 400px) {
  .tool-card {
    flex-direction: column;
    padding: 0.75rem;
  }
  .tool-card .icon { display: none; }
}

@container (min-width: 401px) {
  .tool-card {
    flex-direction: row;
    padding: 1.25rem;
  }
}

利点：同じコンポーネントが狭いサイドバーと広いメインで自動適応。グローバルなメディアクエリが不要です。

---

ToolsKu のレイアウト実践

ツールページ構成

┌──────────────────────────────────┐
│  Header (flex, space-between)    │
├────────┬─────────────────────────┤
│ Side   │  Tool Area (grid)       │
│ nav    │  ┌─────┐ ┌─────┐      │
│ (grid  │  │Input│ │Output│      │
│  1fr)  │  └─────┘ └─────┘      │
│        │  ┌─────────────────┐  │
│        │  │   Action Bar    │  │
│        │  └─────────────────┘  │
├────────┴─────────────────────────┤
│  Footer                          │
└──────────────────────────────────┘

レスポンシブブレークポイント

ブレークポイント	変化
< 640px	1 列、サイドバーはドロワー
640–1024px	2 列ツールグリッド
> 1024px	3 列 + 固定サイドバー

---

便利な CSS ツール

• 単位変換：px ↔ rem ↔ em
• アスペクト比計算：最簡比
• 色コントラスト：WCAG 準拠チェック

---

まとめ

Flexbox は一次元、Grid は二次元、Container Queries はコンポーネント単位のレスポンシブ——この 3 つで現代 Web レイアウトの需要をほぼカバーできます。ToolsKu の UI はその実践例です。