Week 07: FlexboxとCSS Gridを読む｜フロントエンドレッスン

AIの出力で最初に見る3行

「カードを3枚横並びにして」とAIに頼むと、返ってくるCSSはだいたい20〜40行あります。全部を上から読む必要はありません。レイアウトの構造は、たった3行を順番に見れば掴めます。

レイアウトCSSを読む3ステップ

① 親の display は何か(flex? grid? それ以外?)
② 主軸はどっち向きか(flex-directionが書かれていなければ横 = row)
③ 子に伸縮の指定があるか(flex: 1 や width が付いているか)

実際のAI出力で試す

これは「カードを3枚横並びに」と頼んだときにAIが返してくる、ごく典型的なコードです。まずHTML。

<div class="card-list">
    <div class="card">
        <h3>プランA</h3>
        <p>個人向けの入門プランです。</p>
    </div>
    <div class="card">
        <h3>プランB</h3>
        <p>チームでの利用に。</p>
    </div>
    <div class="card">
        <h3>プランC</h3>
        <p>大規模導入向け。</p>
    </div>
</div>

続いてCSS。ここに3ステップを当てていきます。

.card-list {
    display: flex;          /* ← ① 親の display */
    gap: 24px;
}

.card {
    flex: 1;                /* ← ③ 子の伸縮指定 */
    padding: 24px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
}

.card h3 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.125rem;
}

.card p {
    margin: 0;
    color: #475569;
}

① 親の display: .card-list に display: flex があります。この時点で「.card-list が並べる親、その直接の子である .card が並ぶ子」と確定します。ここが一番大事で、並べる指定は必ず親側に書かれます。子の .card をいくら読んでも「なぜ横に並ぶのか」は書いてありません。

② 主軸の向き: flex-direction がどこにも書かれていません。書かれていない場合の初期値は row、つまり横方向です。だから3枚が横に並びます。この「書いていない = 横」を知らないと、「横並びにする指定はどこ?」と探し続けることになります。

③ 子の伸縮指定: .card に flex: 1 があります。詳しくは後のセクションで扱いますが、ここでは「3枚が等しい幅に伸びる」と読めれば十分です。もし flex: 1 が無ければ、カードは中身の文字数分の幅になり、3枚がバラバラの幅で左に寄ります。

3行を見終わった時点で、このCSSは「card-list が横方向に、3枚のカードを等幅で並べている。間隔は24px」と要約できます。残りの padding や border-radius は見た目の装飾で、レイアウトの構造には関係ありません。装飾とレイアウトを切り分けて読むのが、AI出力を早く読むコツです。

display が flex でも grid でもないとき

①で display が見つからない、あるいは block のままなのに横に並んでいる場合、Week 06 で扱った inline-block か float が使われている可能性があります。AIに「モダンな書き方で」と伝えていないと、古い書き方が混ざることがあります。

Week 06 の DevTools でボックスモデルを読むで、デバッグ手順の4番目に「親要素の display(flex / grid なのか)も確認」を挙げました。今週はその1行を、確認したあとに何を読み取るかまで広げる回だと思ってください。

Flexbox — 主軸と交差軸だけ押さえる

Flexbox には十数個のプロパティがありますが、AI出力を読むために最初に必要なのは「2本の軸」の概念だけです。ここさえ押さえれば、残りのプロパティは必要になったときに調べれば足ります。

2本の軸とは

主軸(main axis): 子要素が並んでいく方向。flex-direction で決まる
交差軸(cross axis): 主軸に直交する方向。主軸が横なら縦、主軸が縦なら横

そして、この2本にはそれぞれ担当プロパティが1つずつ割り当てられています。

.container {
    display: flex;

    justify-content: center;   /* 主軸方向の配置 */
    align-items: center;       /* 交差軸方向の配置 */
}

justify-content は主軸、align-items は交差軸。この対応を覚えるのが今週の山場です。名前からは向きが読み取れないので、ここは丸暗記して構いません。

flex-direction を変えると、2つの意味が入れ替わる

ここが最大のハマりどころです。プロパティ名は同じままで、効く向きだけがひっくり返ります。

/* ケースA: 初期値(横並び) */
.row {
    display: flex;
    /* flex-direction: row; ← 書かなくてもこれ */
    justify-content: center;   /* 横方向に中央 */
    align-items: center;       /* 縦方向に中央 */
}

/* ケースB: 縦並びに変えた */
.column {
    display: flex;
    flex-direction: column;
    justify-content: center;   /* 縦方向に中央(!) */
    align-items: center;       /* 横方向に中央(!) */
}

ケースAとケースBで、書いてあるプロパティは同じなのに意味が逆になっています。flex-direction: column を足しただけで、justify-content の担当が横から縦へ、align-items の担当が縦から横へ移ります。

「justify-content: center にしたのに横中央にならない」という相談の9割は、その親のどこかに flex-direction: column が書かれています。効かないと思ったら、まず flex-direction を探す。これが読み方の要点です。

Week 06 で書いた3行と同じもの

Week 06 の中央寄せの全パターンで、パターン4として次の3行を使いました。

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

あのときは「中央寄せのレシピ」として丸ごと覚えてもらいました。あれと今週の flex は同じものです。子が1つだけなら中央寄せに見え、子が複数あれば横並びに見える。道具は1つで、使われ方が違うだけでした。今週で、レシピの中身が読めるようになります。

align-items を書かなかったときの計算値は normal

交差軸の指定を省略すると、子は交差軸いっぱいに伸びます。ただしDevTools の計算値は stretch ではなく normal と表示されます(Flex アイテムに対しては normal が stretch として振る舞う、という仕様のため)。見た目が同じでも表示が違うのは、むしろ都合が良い点です。計算値が normal ならそのCSSには指定が無い、stretch なら誰かが明示的に書いたと見分けられます。後の「AIが間違えやすい点」で、この見分けをそのまま使います。

覚え方: justify-content = 並んでいる方向(主軸)の配置。align-items = それと直角の方向(交差軸)の配置。flex-direction: column が出てきたら、この2つの意味が入れ替わっていると考える。

flex: 1 の正体

AIが等幅のカラムやカードを作るとき、ほぼ確実に登場するのが flex: 1 です。短いので装飾のように見えますが、これは3つのプロパティをまとめた省略形で、レイアウトの挙動を決定づけています。

/* この1行は…… */
.card {
    flex: 1;
}

/* …… この3行と同じ意味 */
.card {
    flex-grow: 1;      /* 余った幅があれば、受け取って伸びる */
    flex-shrink: 1;    /* 幅が足りなければ、縮む */
    flex-basis: 0%;    /* 伸び縮みを計算する前の「基準の幅」をゼロにする */
}

3つのうち結果を左右しているのは flex-basis: 0% です。ここが理解の分かれ目なので、順を追います。

なぜ「文字数が違っても等幅」になるのか

flex-basis は「伸縮を始める前の基準サイズ」です。初期値は auto、つまり中身の分だけの幅。flex: 1 はこれを 0% に上書きします。

/* 基準幅を0にしてから、余った幅を1:1:1で分ける */
.card { flex: 1; }

/* → 3枚とも基準が0なので、gap を除いた残り幅を3等分した幅になる。
      中身が「A」でも200文字でも、幅は同じ */

全員の基準幅が 0 なら、残りは「余った幅をどう分けるか」だけの話になります。flex-grow: 1 が3枚に付いているので、余りは1:1:1で分配され、結果として3枚は完全に同じ幅になります。文字数は一切影響しません。

flex: 1 が無いとどうなるか

/* 子に flex の指定なし = flex-basis は auto のまま */
.card-list { display: flex; gap: 24px; }
.card      { /* flex 指定なし */ }

/* → 各カードは中身の文字数分の幅になる。
      3枚の幅はバラバラ、余った幅は右側に空白として残る */

「AIが作ったカードの幅がバラバラで揃わない」という症状は、たいていこれです。子に flex: 1 が付いているかどうかを見れば、等幅になる設計かどうかが読み分けられます。

読むときのチェックポイント

flex: 1 が全部の子に付いている → 等幅で並ぶ設計
flex: 1 が一部の子にだけ付いている → 付いていない子は中身の幅、付いている子が残りを全部取る(サイドバー + メインの型)
子に flex が一切ない → 中身の幅のまま並ぶ。揃わなくて当然

なお、解説記事によっては flex: 1 の展開を flex: 1 1 0 と書くことがあります。0 と 0% はここでは同じ意味なので、どちらの表記を見ても同じものだと思って構いません。

覚え方: flex: 1 は「基準幅をゼロにしてから、余りを山分けする」宣言。基準がゼロだから中身の量に左右されず、きれいに等分される。

CSS Grid — grid-template-columns を読む

Grid にもプロパティは大量にありますが、AI出力を読むうえで圧倒的に登場頻度が高いのは grid-template-columns 1つです。しかも実務で見る値はほぼ2パターンしかありません。この2つを読めれば、当面は困りません。

パターン1: repeat(3, 1fr) — 3列で固定

.card-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

repeat(3, 1fr) は「1fr という列を3回繰り返す」という意味です。省略せずに書くと 1fr 1fr 1fr とまったく同じで、値の個数がそのまま列数になります。

fr は Grid 専用の単位で、「余っている幅を何等分するか」の取り分を表します。1fr 1fr 1fr なら取り分が1:1:1なので3等分。2fr 1fr なら2:1で、左の列が右の2倍の幅になります。

/* 書き方の例(実際に使うのはこのうちどれか1つ) */
grid-template-columns: repeat(3, 1fr);   /* 3等分の3列 */
grid-template-columns: 1fr 1fr 1fr;      /* ↑と完全に同じ */
grid-template-columns: 2fr 1fr;          /* 2:1 の2列 */
grid-template-columns: 240px 1fr;        /* 左は240px固定、右が残り全部 */

読み方は単純です。値をスペースで区切って数えれば、それが列数。repeat(N, ...) が出てきたら N が列数です。ただし repeat() や minmax() はカッコの中にもスペースが入るので、機械的に空白で切ると数を間違えます。repeat(auto-fit, minmax(240px, 1fr)) にはスペースが2つありますが、列指定は1つです。カッコで囲まれた部分は、中身がいくつに見えても1つの塊として数えてください。

ただしこの書き方には弱点があります。repeat(3, 1fr) はスマホでも3列のままです。列数が変わる仕組みがどこにも無いので、375px の画面では1列あたり100px程度まで潰れて読めなくなります。だからAIは、レスポンシブを意識すると次のパターン2を出してきます。

なお「必ず潰れる」わけではありません。1fr は正確には minmax(auto, 1fr) で、中身が縮められる限界を下回らない性質があります。日本語は好きな位置で折り返せるので今回の例では素直に潰れますが、長い英単語やURLが入っていると、そこで縮むのをやめて親から溢れます。同じ repeat(3, 1fr) でも、潰れるか溢れるかは中身次第です。

パターン2: repeat(auto-fit, minmax(240px, 1fr))

.card-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

見た目は複雑ですが、意味は一言です。「1列が240pxを下回らない範囲で、入るだけ入れる」。内側から分解します。

minmax(240px, 1fr) = 1列の幅は最小240px、最大は取り分1つ分。240pxより狭くはならない
auto-fit = 繰り返す回数を固定せず、入るだけ入れる(上の条件を満たす限り列を増やす)。ただしアイテム数を超える列は作られないので、カードが3枚なら画面をどれだけ広げても3列が上限です

結果として、列数が画面幅で自動的に変わります。gap: 24px がある場合の目安はこうです。

/* repeat(auto-fit, minmax(240px, 1fr)) + gap: 24px のとき */

コンテナ幅 1000px → 3列(240×3 + 24×2 = 768px なので3列入る)
コンテナ幅  700px → 2列(3列だと 768px 必要で足りない)
コンテナ幅  400px → 1列(2列だと 504px 必要で足りない)

メディアクエリを1行も書かずにレスポンシブになるのがこの書き方の利点で、だからAIはカード一覧でこれを多用します。「なぜ画面を狭めると勝手に2列になるのか」の答えは、ここに書いてあります。

読むときは minmax() の第1引数(この例なら240px)だけ見れば十分です。それが「1列の最低幅」であり、列数が切り替わる境目を決めている数字です。カードが窮屈だと感じたらこの数字を大きく、もっと詰めたければ小さくします。

gap — 間隔は margin ではなく gap で取る

上のコードに毎回出てくる gap は、子要素どうしの間隔を指定するプロパティです。Flex コンテナと Grid コンテナの両方で使えます。

gap の良いところは、間だけに効いて、外側の端には付かないことです。子に margin で間隔を付けると、両端にも余白が出て「最初のカードだけ左が空く」といったズレが起きます。gap はそれが起きません。

重要なのは、gap は親のプロパティだという点です。子に書いても効きません。効かないときの確認方法は、後の「AIが間違えやすい点」で扱います。

覚え方: repeat(3, 1fr) は「3列で固定」、repeat(auto-fit, minmax(240px, 1fr)) は「240pxを切らない範囲で入るだけ」。列数を知りたければ、前者は数字を、後者は minmax() の1つ目を見る。

FlexかGridか — AIの選択を評価する

ここまでで、Flex の出力も Grid の出力も読めるようになりました。最後に「AIがそちらを選んだのは妥当か」を判断する軸を持ちます。ここが読める人と読めない人の差が一番出るところです。

判断の基準は1つだけ

1方向に並べるだけなら Flex。行と列の両方を揃える必要があるなら Grid。

「揃える」がポイントです。カードが折り返して2行になったとき、2行目のカードの左端が1行目の左端と縦に揃っていてほしいかを考えます。揃っていてほしいなら Grid の仕事です。Flex は行ごとに独立して配置を決めるので、行をまたいだ縦の整列は保証されません。

ケース1: 妥当な選択

/* ヘッダー: ロゴとナビを左右に離す = 1方向 → Flex が妥当 */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* カード一覧: 折り返して格子になる = 2方向 → Grid が妥当 */
.card-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

ケース2: 理由なく Grid が使われている

/* ボタンを2つ横に並べたいだけなのに Grid */
.button-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

動きますが、ボタンの数が変わった瞬間に破綻します。1fr 1fr は「2列」と決め打ちなので、ボタンを3つに増やすと3つ目が2行目に落ちます。また、ボタンの文字数が違っても強制的に等幅になるため、「キャンセル」と「この内容で申し込む」が同じ幅になって不自然に見えます。

/* 素直に Flex にすれば、数が増えても文字数が違っても崩れない */
.button-row {
    display: flex;
    gap: 8px;
}

指摘の仕方: 「ボタンは1方向に並べるだけなので Flex にしてください。数が増えたときに崩れないようにしたいです」とAIに返せば直ります。

ケース3: カード一覧を Flex + width: 33% で組んでいる

/* AIがたまに出してくる、崩れやすい書き方 */
.card-list {
    display: flex;
    flex-wrap: wrap;   /* 1行に収まらない子を次の行へ折り返す */
    gap: 24px;
}

.card {
    width: 33%;      /* ← ここが問題 */
}

先に flex-wrap: wrap について触れておきます。Flex は既定では折り返しません(nowrap)。1行に収まらないときは子を縮めて無理に押し込みます。flex-wrap: wrap を付けると、収まらない子が次の行へ送られるようになります。この1行があるかどうかで、幅が足りないときの挙動が「潰れる」か「折り返す」かに分かれます。

そのうえで、この書き方はほぼ確実に崩れます。33% が3つで99%、そこに gap: 24px が2つ分(48px)加わるので、合計がコンテナ幅を超えます。flex-wrap: wrap があるため3枚目は縮まずに2行目へ落ちます。「なぜか2列しか並ばない」の典型パターンです。

さらに悪いことに、カード1枚の幅は画面をどれだけ狭めてもコンテナの33%のままです。パーセント指定は「画面幅が変わっても割合が変わらない」ので、スマホでは1枚あたり100px前後まで一緒に細くなります。列数が切り替わる仕組みがどこにも無いのが、この書き方の根本的な弱点です。

直し方は2つあります。カードが格子状に並ぶなら Grid の auto-fit に置き換えるのが素直で、Flex のままでいくなら width をやめて flex: 1 1 240px(基準240pxで伸縮)にします。どちらにせよ「パーセント固定幅 + gap」の組み合わせを見たら、崩れる前提で疑ってよいです。

評価するときのチェックリスト

そのレイアウトは1方向か2方向か。2方向なのに Flex なら、行をまたいだ整列が崩れないか確認する
Grid なのに子が1行にしか並ばないなら、Flex で足りていないか疑う
パーセント指定の幅と gap が同居していないか。合計が100%を超えて折り返す
要素の数があとから増減する箇所を、列数固定の repeat(3, 1fr) で組んでいないか
画面を狭めたときに列数が変わる仕組みがあるか。無ければスマホで潰れる

なお Week 06 で「中央寄せは迷ったら Flexbox」と書きました。あれは1つの要素を中央に置く話で、今週の「複数の要素をどう並べるか」とは別の判断です。中央寄せの場面では、今も迷わず Flex で構いません。

各プロパティの網羅的な一覧と細かい挙動は、それぞれの解説ページにまとめてあります。今週の「読み方」で当たりを付けてから、必要な箇所だけ引くのが速いです。

AIで試す

カード3枚を横並びにさせて、出力を読む

まずAIに作らせて、返ってきたCSSを今週の「最初に見る3行」で読み解きます。自分で書けるかどうかは今は問いません。

HTMLとCSSで、カードを3枚横並びにするコードを書いてください。カードには見出しと本文が入ります。CSSはFlexboxとGridの両方のパターンを出して、それぞれの違いをコメントで書いてください。

出力を見るときのポイント

親要素の display が flex か grid か / flex なら子に flex: 1 が付いているか / grid なら grid-template-columns の値が何列を意味しているか / gap で間隔を取っているか margin で取っているか。この4点を順に確認してください。

AIが間違えやすい・よく詰まる点

カードの高さがバラバラになる、または意図せず全部同じ高さに引き伸ばされる

なぜ: Flexコンテナの align-items は初期値が stretch で、指定しないと子が交差軸いっぱいに伸びる。AIは高さの意図を聞かずに書くため、どちらが欲しいかは指定されていない

直し方: 高さを揃えたいならそのまま（stretch）、中身の高さに合わせたいなら align-items: flex-start を足す。DevToolsで親の align-items の計算値を見て、指定が無いのか stretch が明示されているのかを確かめる
子要素が親からはみ出す、横スクロールバーが出る

なぜ: Flexアイテムの min-width は初期値が auto で、中身より小さくならない。長い単語やはみ出す画像があると縮まずに溢れる

直し方: 縮めたい子に min-width: 0 を足す。画像なら max-width: 100% も併せる。AIはこの初期値を前提にしないコードを書きがちなので、溢れたらまずここを疑う
gap を書いたのに間隔が空かない

なぜ: gap は Flex/Grid コンテナのプロパティで、親が display: flex か grid でないと効かない。AIが display の指定を別のセレクタに書いていて、gap だけ別の要素に乗っていることがある

直し方: gap を書いた要素の display を DevTools で確認する。block のままなら、gap ではなく親の display 指定が抜けている

今週の課題

Week 07 課題

Week 06 で display: inline-block を使って横並びにした3枚のカードを、(1) Flexbox版と (2) Grid版の2通りに書き換えるのが今週のゴールです。同じ見た目を2つの道具で作り、ウィンドウ幅を狭めたときの崩れ方の違いを自分の目で確認します。

必須要件

Week 06 のカード3枚のHTMLはそのまま使い、CSSだけを書き換える(HTMLを変えずに済むことを体感するのが目的)
Flexbox版: 親に display: flex、子に flex: 1 を付けて等幅で横並びにする
Grid版: 親に display: grid と grid-template-columns: repeat(3, 1fr) を付けて3列にする
どちらの版も、カード同士の間隔は margin ではなく gap: 24px で取る
Week 06 で付けたカードの上下マージンと、inline-block 由来のタグ間の改行による横の隙間が、gap と二重になっていないか確認する(横並びの隙間は margin ではなくインライン空白が作っていたので、flex / grid にすると消えます)
ウィンドウ幅を1200px → 400px までゆっくり狭め、Flex版とGrid版で崩れ方がどう違うかを観察する(どちらも折り返さず潰れていくはず)
Grid版の repeat(3, 1fr) を repeat(auto-fit, minmax(240px, 1fr)) に差し替え、もう一度幅を狭めて列数が3→2→1と変わることを確認する
DevTools で親要素を選択し、Computed タブで display と gap の計算値を確認する(自分が書いた値が本当に効いているかを見る)
Flex版で flex: 1 を一時的に消し、カードの幅が中身の文字数分に変わることを確認してから戻す
Flex版の親に flex-direction: column を一時的に足し、justify-content と align-items の効く向きが入れ替わることを確認してから戻す

ボーナス課題

3枚のカードの本文の文字数を大きく変え(1行 / 5行 / 10行)、align-items の指定あり・なしで高さの揃い方がどう変わるかを比較する
カードの1枚だけ flex: 2 にして、その1枚だけが2倍の幅になることを確認する
ヘッダーを display: flex + justify-content: space-between で「左にサイト名・右にナビ」の形に組む
Grid版で minmax() の第1引数を 240px → 320px に変え、列数が切り替わる画面幅がどう動くかを確かめる
Flexbox版の親に flex-wrap: wrap を足したうえで、わざと .card { width: 33%; } と gap: 24px を併用して3枚目が2行目に折り返すのを再現し、本文のケース3と同じ現象であることを確認する(flex-wrap: wrap を付けないと折り返さず、3枚が縮んで1行に残ります)

自己チェック項目(提出前に確認)

並べる指定(display: flex / grid)を親に書いたか(子に書いていないか)
間隔は gap で取り、子の margin と二重になっていないか
Flex版で、子に flex: 1 が付いているか
Grid版の grid-template-columns の値を見て、何列になるか説明できるか
DevTools の Computed タブで、display と gap の計算値を実際に見たか
幅を狭めたときの挙動を、Flex版・Grid版の両方で確認したか

自己診断テスト

justify-content はどちらの軸に効きますか。flex-direction: column にすると答えは変わりますか？
flex: 1 を展開すると3つのプロパティになります。何ですか。またそのうち「文字数に関係なく等幅になる」ことを決めているのはどれですか？
repeat(auto-fit, minmax(240px, 1fr)) は何列になりますか。列数を決めているのは何ですか？
gap が効かないとき、最初に確認する場所はどこですか？
AI出力のレイアウトCSSを読むとき、最初に見る3行は何と何と何ですか？
flex-direction が書かれていないFlexコンテナは、子が縦横どちらに並びますか？
カード一覧を display: flex + width: 33% + gap: 24px で組むと何が起きますか。理由も説明できますか？

← Week 06: ボックスモデル完全攻略 | カリキュラム全体に戻る | Week 08: 画面幅で変わるCSSを読む →