前回との接続とこの講義の役割
前回のG-08では、親要素に指定して子要素を横一列や縦一列に並べるFlexboxを扱いました。あれは一次元、つまり一方向の整列が得意な道具です。ですが、実際の業務アプリの画面は、上にヘッダー、左にメニュー、右に本文といった、行と列の組み合わせでできています。この行かける列の骨組みを素直に扱うのが、今回学ぶGridです。
このスライドのポイント
- G-08では親要素に指定して子要素を一列に並べるFlexboxを扱った
- Flexboxは一次元（横一列または縦一列）の整列が得意
- 実際の業務アプリの画面は「上にヘッダー・左にメニュー・右に本文」の行×列でできている
- この行×列の骨組みを素直に扱うのが今回のGrid
Gridの定義
Gridとは、親要素に行と列の格子を定義し、子要素を格子のどこに置くかで配置する仕組みです。入口となる指定は、display: grid と、列の並びを決める grid-template-columns の2つです。前回のFlexboxが一方向の整列だったのに対し、Gridは縦と横の二方向の骨組みをまとめて決められます。使い分けの基本は、一次元の整列はFlexbox、二次元の骨組みはGrid、と覚えてください。どちらも親に指定して子を配置する、という役割分担は共通です。
このスライドのポイント
- Grid＝親要素に行と列の格子を定義し、子要素を格子のどこに置くかで配置する仕組み
- 入口の指定は display: grid と grid-template-columns（列の定義）
- 使い分けの基本: 一次元の整列はFlexbox、二次元の骨組みはGrid
- 親に指定して子を配置する役割分担はFlexboxと共通
なぜGridが必要か
Gridを知らないと、管理画面のような行と列を持つレイアウトのコードが読めません。この形は、社内で使う業務アプリの定番の骨組みです。またAIが、本来Gridで一行に書ける構造を、Flexboxの入れ子を何段も重ねた複雑なコードで出してくることがあります。Gridを知っていれば、その複雑な構造に対して、より簡単な代替を提案できます。読めること、そして直せることの両方に、この道具が効いてきます。
このスライドのポイント
- 知らないと: 行と列を持つ管理画面型レイアウトのコードが読めない
- 管理画面の骨組みは、社内で使う業務アプリの定番の形
- AIがGridで一行に書ける構造を、Flexboxの入れ子を何段も重ねて出すことがある
- Gridを知っていれば、複雑な構造に対してより簡単な代替を提案できる
Gridの構造
Gridの考え方の順序は、先に格子を決め、後から子を配置する、というものです。たとえばヘッダーを上段の全幅に置き、その下を左のメニューと右の本文の2列に分ける、という骨組みを最初に引きます。格子さえ決まれば、どの子要素をどのマスに入れるかを指定するだけで配置が決まります。行と列という二次元で全体を捉えられるのが、Flexboxとの一番の違いです。
このスライドのポイント
- 考え方の順序は「先に格子を決め、後から子を配置する」
- 例: ヘッダーを上段の全幅に置き、その下を左メニューと右本文の2列に分ける
- 格子が決まれば、どの子をどのマスに入れるかを指定するだけ
- 行と列の二次元で全体を捉えられるのがFlexboxとの違い
Gridでの具体例
具体例として、経費アプリの管理画面を考えます。左に固定幅のメニュー、右に残り全部の本文、という骨組みは、列の定義をたった一行書くだけで決まります。カード状の一覧を等幅で3列に並べる、といった配置もGridの得意技です。手作業で一つずつ余白を調整する必要がなく、格子の定義が画面の設計図としてそのまま読めます。前回のFlexboxが部品の中の整列を担うのに対し、Gridは画面の大枠を担う、と役割で覚えると混乱しません。
このスライドのポイント
- 経費アプリの管理画面: 左に固定幅メニュー、右に残り全部の本文
- 列の定義をたった一行書くだけで骨組みが決まる
- 等幅3列のカード一覧などもGridの得意技
- Flexboxは部品の中の整列、Gridは画面の大枠、と役割で覚える
技術サンプルカード
サンプルを見てみましょう。種別はcode、目的は二次元の大枠レイアウトを最小の記述で読み解くことです。display: grid で親を格子にし、grid-template-columns で列の並びを定義しています。ここで大切なのが 1fr という単位で、これは残りのスペースを全部という意味です。つまり左を200pxの固定幅、右を残り全部、という骨組みが、たった一行で読み取れます。AIには、この画面の大枠レイアウトはGridとFlexboxのどちらで、なぜその選択ですか、と聞いて、判断の理由を言葉にしてもらいましょう。
混同しやすい概念
混同しやすいのが、FlexboxとGridの使い分けです。Flexboxは一次元、つまり一方向の整列が得意で、Gridは二次元、つまり行と列の骨組みが得意です。どちらでも作れてしまう場面は多いのですが、そこに行と列という意図があるなら、Gridで書くほうが素直で読みやすくなります。ボタンの列のような一方向の並びはFlexbox、画面全体の骨組みはGrid、と対応させて覚えてください。
バイブコーディングでの確認点
バイブコーディングでの確認点です。画面の大枠をAIに作らせるときは、大枠はGrid、部品の中の整列はFlexbox、という役割分担をあらかじめ指定しましょう。この一言を添えるだけで、読みやすい構造のコードが返ってきやすくなります。もしAIが画面全体をFlexboxの入れ子だけで組んできたら、この大枠はGridで書き直せますか、と一度聞いてみてください。構造がすっきりし、後から直すときの負担が大きく減ります。
このスライドのポイント
- 画面の大枠をAIに作らせるときは「大枠はGrid、部品内の整列はFlexbox」と役割分担を指定する
- この一言で読みやすい構造のコードが返ってきやすくなる
- 画面全体がFlexboxの入れ子だけで組まれていたら「Gridで書き直せますか」と聞く
- 構造がすっきりし、後から直すときの負担が減る
一問一答とまとめ
最後に一問一答です。行と列の二次元で配置する仕組みは何でしょうか。……答えはGridです。今回の30秒まとめです。一次元の整列はFlexbox、二次元の骨組みはGrid。先に格子を決め、後から子を配置する。この2点を押さえれば、業務アプリの画面の大枠が読めて、直せるようになります。次回はカテゴリGの最終回、誰でも使える画面をつくるアクセシビリティへ進みます。関連資料は「SaaS画面パターン100」「管理画面UIパーツ集」です。
このスライドのポイント
- 一問一答: 行と列の二次元で配置する仕組みは？ → Grid
- 30秒まとめ: 一次元の整列はFlexbox、二次元の骨組みはGrid／先に格子を決め、後から子を配置する
- 次回: カテゴリG最終回、誰でも使える画面＝アクセシビリティへ
- 関連資料: 「SaaS画面パターン100」「管理画面UIパーツ集」
