【手で書いて覚える個人開発 #07】CSS のレイアウト：Flexbox と Grid

この記事は、プログラミングをまったく知らない人が「AI に頼らず、自分の手でアプリやサイトを作れる」ようになるための連載（全85本）の第7回です。毎日1本ずつ公開します。

前の回: #06 CSS 入門：色・文字・余白

この記事でできるようになること

ページの部品を横に並べたり、カードを格子状に並べたりできるようになります。使うのは display: flex（Flexbox）と display: grid（Grid）の2つです。

説明

何もしないと、上から下に積み上がる

HTML のタグは、何も指定しないと上から下へ順番に積まれます。本棚に本を縦に積んでいるようなものです。これを「横に並べる」「3列に並べる」には、並べ方のルールを CSS で渡します。

Flexbox：1列（または1行）に並べる

並べたい部品の親に display: flex; を書くと、中の子が横一列に並びます。段ボール箱（親）に display: flex を書くと、中に入れた物（子）が一列にならぶ、とイメージしてください。

親に書く、よく使う3つのプロパティです。

プロパティ	役目	値の例
justify-content	横方向の寄せ方	space-between（両端に分けて配置）
align-items	縦方向の寄せ方	center（縦の中央）
gap	子と子のすき間	16px

ナビゲーションバー（ロゴが左、メニューが右）は、Flexbox の代表的な使い方です。

Grid：縦と横の格子に並べる

カード一覧のように「3列×2行」に並べたいときは、親に display: grid; を書きます。列の数と幅は grid-template-columns で決めます。

grid-template-columns: repeat(3, 1fr);

• repeat(3, 1fr) は「同じ幅の列を3つ」という意味です
• fr は「残りの幅を何等分するか」の単位です。1fr を3つなら3等分になります

どちらを使う？

並べたいもの	使うもの
1列（または1行）に並べたい。メニュー、ボタンの並び	Flexbox
縦と横の格子に並べたい。カード一覧、写真一覧	Grid

迷ったら「1方向か、2方向か」で決めます。

手を動かす

コピーせず、自分で打ってください。 layout-practice フォルダを作って VS Code で開き、index.html と style.css を作ります。

1. HTML を打つ

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>レイアウトの練習</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="bar">
    <h1>OTOMO</h1>
    <nav class="menu">
      <a href="#">ホーム</a>
      <a href="#">投稿</a>
      <a href="#">設定</a>
    </nav>
  </header>
  <main>
    <h2>おすすめの機材</h2>
    <div class="cards">
      <div class="card">シンセ</div>
      <div class="card">ドラムマシン</div>
      <div class="card">オーディオIF</div>
      <div class="card">MIDIキーボード</div>
      <div class="card">モニタースピーカー</div>
      <div class="card">ヘッドホン</div>
    </div>
  </main>
</body>
</html>

<nav> は「メニューのまとまり」を表すタグ、<div> は意味を持たないただの入れ物です。

2. style.css を打つ

body {
  margin: 0;
  font-family: sans-serif;
}

.bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #1a1a2e;
  color: white;
  padding: 16px 24px;
}

.bar h1 {
  margin: 0;
  font-size: 24px;
}

.menu {
  display: flex;
  gap: 16px;
}

.menu a {
  color: white;
}

main {
  padding: 24px;
}

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

.card {
  background-color: #f5f5f0;
  border: 2px solid #1a1a2e;
  padding: 24px;
  text-align: center;
}

見てほしい所は2つです。

• .bar（ヘッダー）が Flexbox の親で、子の h1 と nav が左右に分かれます。さらに .menu も Flexbox の親になっていて、3つのリンクが横に並びます。Flexbox の中にもう1つ Flexbox を入れるのはよくある使い方です
• .cards が Grid の親で、6枚のカードが3列に並びます

3. ブラウザで開く

open index.html

濃紺の帯の左に「OTOMO」、右に3つのリンク。その下に、カードが3列×2行で並べば成功です。

私の環境で実際に測ったところ、横幅1000pxの画面では、「OTOMO」は左端から24px、メニューのリンクは右端に寄り、カードは3枚とも幅307pxで3列×2行に並びました。

4. 数字を変えて遊ぶ

• repeat(3, 1fr) を repeat(2, 1fr) に変える → 2列×3行になります
• justify-content: space-between を center に変える → ロゴとメニューが中央にまとまります
• gap の数字を変える → すき間が変わります

練習問題

答えを見ずに解いてみてください。

1. カードを4列に並べてください。
2. メニューのリンクの間隔を 32px にしてください。
3. .bar の justify-content を flex-start にして、ロゴとメニューがどう動くか確かめてください。

よくあるエラーと直し方

CSS は間違えてもエラーメッセージが出ません。「並ばない」ときは、次の3つを疑います。

親に display: flex を書き忘れた

.bar から display: flex; を消すと、justify-content や align-items は何も効かなくなります。実際に試すと、ロゴとメニューが上下に積み上がりました（メニューの縦位置が 22px から 52px に下がった）。justify-content などは「display: flex の親」にだけ効きます。

親ではなく子に書いてしまった

display: flex は並べたいものの親に書きます。.card に書いても、カード同士は並びません。

grid-template-columns の綴りを間違えた

columns の s を忘れて grid-template-column と書くと、その行は無視されます。実際に試すと、カードが6枚とも横幅いっぱいで縦に積まれました（display: grid はあるのに、列の数が決まらないため）。display: grid を書いたのに格子にならないときは、綴りを確認します。

display: grid を忘れた

grid-template-columns だけ書いて display: grid; がないときも、カードは縦に積まれます。この場合も6枚とも横幅いっぱい（952px）になりました。

答え

1.

grid-template-columns: repeat(4, 1fr);

6枚は4列＋2列の2行になります。

2.

.menu {
  display: flex;
  gap: 32px;
}

3. ロゴとメニューが両方とも左に寄ります（左から順に詰めて並ぶ）。space-between は「最初と最後を両端に離して間を均等にあける」並べ方でした。

次回予告

次回は「#08 スマホ対応（レスポンシブ）で自己紹介ページを仕上げる」です。今日のレイアウトは画面が狭いスマホだと窮屈になるので、画面の幅に合わせて並べ方を変える方法を学びます。