箱は、どこにどう並ぶのか
前回のG-06では、すべての要素が content・padding・border・margin の4層でできた四角い箱であることを見ました。では、その箱たちは画面のどこに、どういう順で並ぶのでしょうか。今回はまず基本となる並び方を押さえ、そこから一部の要素だけを流れの外へ浮かせる例外的なやり方へ進みます。配置は見た目の崩れが最も起きやすい領域なので、仕組みから理解しておきます。
このスライドのポイント
- 前回G-06: すべての要素は content・padding・border・margin の4層の箱
- 今回の問い: その箱たちは画面のどこに、どういう順で並ぶのか
- 流れ: まず基本の並び方 → 一部だけを流れの外へ浮かせる例外へ
通常フロー・position・z-indexの定義
通常フローとは、要素が書いた順に上から下へ、行内では左から右へ自然に並ぶ標準の配置です。positionは、この配置方法そのものを変える指定で、absoluteは基準となる要素からの座標で位置を決めて流れから外し、fixedは画面そのものに固定してスクロールしても動かなくします。z-indexは、こうして浮いた要素どうしが重なったときの前後関係で、数が大きいほど手前に表示されます。まず流れがあり、そこから外す例外がpositionだ、と捉えてください。
このスライドのポイント
- 通常フロー: 書いた順に上から下・行内は左から右へ並ぶ標準の配置
- position: 配置方法の指定。absolute=基準要素からの座標で流れから外す／fixed=画面に固定してスクロールしても動かない
- z-index: 浮いた要素どうしの重なり順（数が大きいほど手前）
- 順番: まず流れがあり、そこから外す例外がposition
なぜ配置の仕組みを知る必要があるか
配置の仕組みを知らないと、メニューが他の要素の下に隠れて押せない、画面上部に固定したヘッダーが本文に被って文字が読めない、といった重なりの事故が起きたとき、原因を切り分けられません。また、AIは見た目を合わせるためにpositionを多用したレイアウトを生成することがあります。その構造が壊れやすいものかどうかを見抜けなければ、修正のたびに新しい崩れを招きます。
このスライドのポイント
- 重なりの事故: メニューが他の要素の下に隠れて押せない／固定ヘッダーが本文に被る
- 原因を切り分けられないと、直しようがない
- AIはpositionを多用したレイアウトを生成しがち。壊れやすさを見抜けないと修正のたびに新たな崩れを招く
流れと、そこから浮く要素の構造
図で捉えます。通常フローでは、箱が書いた順に上から積み上がっていきます。positionでabsoluteやfixedを指定した要素は、この流れから抜け出して、別のレイヤーに浮いた状態になります。浮いた要素は元の場所の分の空きを残さないため、下にあった要素が繰り上がったり、他の要素の上に重なったりします。そして浮いた要素が複数あって重なったときだけ、z-indexという数の大小で前後が決まります。
このスライドのポイント
- 通常フロー: 箱が書いた順に上から積み上がる
- position（absolute/fixed）: 流れから抜けて別レイヤーに浮く
- 浮いた要素は元の場所の空きを残さない → 下の要素が繰り上がる／他に重なる
- 浮いた要素が複数重なったときだけ z-index で前後が決まる
固定した通知バーが隠れる例
具体例を見ます。画面上部に固定した通知バーをfixedで置いたところ、あとから開いたメニューの下に隠れてしまいました。原因は、両方とも流れから浮いていて、z-indexの大小でバーが負けたことです。ここで数字を1つずつ増やして勝たせる調整を始めると、あちこちで数の競り合いが起きて収拾がつかなくなります。数字を上げる前に、そもそも浮かせている要素を減らせないかを先に考えるのが定石です。
このスライドのポイント
- 状況: 画面上部にfixedで固定した通知バーが、開いたメニューの下に隠れた
- 原因: 両方が流れから浮いていて、z-indexの大小でバーが負けた
- 数字を1つずつ増やす調整を始めると、数の競り合いで収拾がつかなくなる
- 定石: 数字を上げる前に、浮かせている要素を減らせないか先に考える
技術サンプル: 画面に固定する通知バー
サンプルは、画面上部に固定する通知バーのCSSです。position: fixed を指定すると、この要素は通常フローから外れ、画面をスクロールしても同じ位置に居続けます。top: 0 で上端に張り付け、z-index: 10 で、他に浮いている要素があったときに手前側へ来るようにしています。読み方の要点は、fixedが流れから外す指定であること、z-indexは浮いた要素どうしの前後関係にだけ効くことの2点です。
流れで並べる（基本）と浮かせる（例外）
混同しやすいのは、通常フローで並べることと、positionで浮かせることの違いです。前者はブラウザに並べ方を任せる基本のやり方、後者は流れを無視して特定の位置に置く例外的なやり方です。表で対比すると、基本は要素が互いの場所を尊重して崩れにくく、例外は自由に置ける代わりに重なりやずれの事故が起きやすくなります。何でもpositionで配置するのは、壊れやすい設計の典型です。
このスライドのポイント
- 通常フローで並べる: ブラウザに並べ方を任せる基本。互いの場所を尊重し崩れにくい
- positionで浮かせる: 流れを無視して置く例外。自由な代わりに重なり・ずれの事故が起きやすい
- 何でもpositionで配置するのは、壊れやすい設計の典型
バイブコーディングでの確認点
バイブコーディングで重なりの不具合を相談するときは、どの要素とどの要素が重なったのかを具体的に伝えます。そのうえで、AIがz-indexの数字を増やすだけの対症療法を出してきたら、そこで受け入れず、「浮かせている要素を減らせませんか」と一段戻して聞き直します。質問例としては「この重なりは、positionを使わずに通常フローで解決できませんか」が有効です。原因の側を直すほど、あとの崩れが減ります。
このスライドのポイント
- 重なりの相談では「どの要素とどの要素が重なったか」を具体的に伝える
- AIがz-indexの数字を増やすだけの対症療法を出したら受け入れず、一段戻す
- 質問例: 「この重なりは、positionを使わずに通常フローで解決できませんか」
- 原因の側を直すほど、あとの崩れが減る
まとめと一問一答
最後に一問一答です。スクロールしても画面に居続ける配置の指定は何でしょうか。……答えは position: fixed です。30秒でまとめます。要素はまず通常フローで自然に並び、positionはそこから外して浮かせる例外、z-indexは浮いた要素どうしの重なり順を決める数、という3つの関係でした。浮かせる要素は最小限にとどめるのが崩れにくい設計です。次回は、要素を一列に整えるFlexboxへ進みます。関連資料は「UI改善プロンプト50」「エラー解決プロンプト50」です。
このスライドのポイント
- 一問一答: スクロールしても画面に居続ける配置の指定は？ → position: fixed
- 30秒まとめ: 通常フロー（基本の並び）→ position（流れから外す例外）→ z-index（浮いた者どうしの前後）。浮かせる要素は最小限に
- 次回: 要素を一列に整えるFlexboxへ
- 関連資料: UI改善プロンプト50／エラー解決プロンプト50
