前回からの続き——「効かせる」の次は「大きさ」
前回のG-05では、CSSがどの要素に効くか、規則が競合したときどれが勝つかを見ました。今回はその一歩先、選んだ要素の大きさと余白がどう決まるかへ進みます。ボタンが窮屈に見えたり、要素同士がくっついて見えたりする問題は、すべてこの箱の構造で説明できます。見た目の細部ではなく、サイズと配置の仕組みとして捉えていきましょう。
このスライドのポイント
- G-05: CSSがどの要素に効くか、競合したときどの規則が勝つか（セレクタとカスケード）を学んだ
- 今回はその一歩先——選んだ要素の「大きさ」と「余白」がどう決まるか
- ボタンが窮屈／要素同士がくっつく、はすべてこの箱の構造で説明できる
定義——要素を4層の入れ子で捉える
ボックスモデルとは、要素を4層の入れ子として捉える考え方です。内側から順に、中身であるcontent、中身と枠の間の余白であるpadding、枠線であるborder、そして枠の外側で隣の要素との距離を作るmarginの4つです。この4層は、ボタンでも見出しでも入力欄でも、すべての要素に共通して存在します。まずは内から外へ、content、padding、border、marginという順番を、自分の言葉で言えるようにしておいてください。
このスライドのポイント
- ボックスモデル＝要素を4層の入れ子で捉える考え方
- 内→外の順: content（中身）→ padding（中身と枠の間の余白）→ border（枠線）→ margin（枠の外側・隣との距離）
- この4層はすべての要素に共通して存在する
なぜ必要か——「余白を広げて」が曖昧になる
この4層を区別できないと、余白を広げてという指示が曖昧になります。中身と枠の間を広げたいのか、隣の要素との距離を広げたいのかで、直す場所がまったく変わるからです。ボタンが窮屈で押しにくい状態と、要素同士がくっついて読みにくい状態は、原因が別の層にあります。区別しないまま頼むと、AIが違う層を直してしまい、期待した見た目になりません。
このスライドのポイント
- 4層を区別できないと「余白を広げて」の指示が曖昧になる
- 中身と枠の間か、隣の要素との距離か、で直す場所がまったく変わる
- ボタンが窮屈／要素同士がくっつく、は原因の層が別
構造——同心の四角と「自分の中／他人との間」
構造は、4つの同心の四角として描くと分かりやすくなります。いちばん内側にcontent、それを囲むpadding、さらに外側にborder、そして最も外にmarginが並びます。ここで覚えたい対比は、paddingは自分の箱の中の余白、marginは他人の箱との間の距離、という点です。paddingとborderとmarginは、それぞれ上下左右に個別の値を持てます。この同心構造が、あらゆる要素の大きさの内訳になっています。
このスライドのポイント
- 4つの同心の四角: 内側から content → padding → border → margin
- 覚える対比: paddingは「自分の箱の中の余白」、marginは「他人の箱との間の距離」
- padding・border・margin は上下左右に個別の値を持てる
具体例——窮屈はpadding、くっつきはmargin
具体例で見ましょう。ボタンの文字が枠にぴったりくっついて窮屈なときは、中身と枠の間の余白、つまりpaddingを広げます。一方、ボタン同士が接近してくっついて見えるときは、隣との距離であるmarginを広げます。どちらも見た目は同じすき間ですが、直す層は別です。paddingは押しやすさに、marginは並びの間隔に効く、と役割で覚えておくと、指示するときに迷わなくなります。
このスライドのポイント
- ボタンの文字が枠に窮屈 → paddingを広げる（中身と枠の間）
- ボタン同士が接近してくっつく → marginを広げる（隣との距離）
- 見た目はどちらも「すき間」だが、直す層は別
- paddingは押しやすさ、marginは並びの間隔に効く
技術サンプルカード
今回の技術サンプルは、業務アプリの申請ボタンに余白を指定するCSSです。paddingで文字と枠の間を確保し、borderで緑の枠線を引き、marginで隣のボタンとの距離を作っています。読み方の要点は、paddingは押しやすさに、marginは並びの間隔に効く、という違いです。詰まって見えるのが中身側か隣との間かで、触る行が変わります。AIに相談するときは、詰まっているのはpaddingとmarginのどちらの問題か、と内訳を尋ねてみてください。
混同しやすい概念——padding と margin
混同しやすいのが、paddingとmarginです。paddingは内側の余白で、要素の中で中身と枠の間にすき間を作ります。marginは外側の距離で、その要素と隣の要素との間を空けます。見た目はどちらも同じすき間に見えるため、言葉で区別しておくことが大切です。表で並べて、内側か外側か、誰との間の余白か、を対で押さえておきましょう。
バイブコーディングでの確認点
バイブコーディングでは、余白の修正を頼むときに、内側か外側かを言い分けて伝えます。文字が窮屈ならpadding、要素同士が近すぎるならmargin、と具体的に指定します。これは、以前A-07で見た、期待結果を正確に伝える訓練そのものです。AIへの質問としては、この要素の余白の内訳をpaddingとmarginに分けて教えてください、と尋ねると、どちらの層の問題かを切り分けられます。
このスライドのポイント
- 余白の修正は「内側／外側」を言い分けて伝える（文字が窮屈ならpadding、要素同士が近いならmargin）
- これはA-07で見た「期待結果を正確に伝える」訓練そのもの
- AIへの質問例: 「この要素の余白の内訳を、paddingとmarginに分けて教えてください」
まとめと次回
最後に一問一答です。隣の要素との距離を作るのは、4層のうちどれでしょうか。……答えはmarginです。内側の余白はpaddingでしたね。30秒でまとめます。ボックスモデルは、内からcontent、padding、border、marginの4層。paddingは自分の箱の中の余白、marginは他人との距離、この区別が余白の指示を正確にします。次回のG-07では、この箱がどう並ぶか、配置のルールへ進みます。関連資料は「UI改善プロンプト50」と「画面設計チェックリスト100」です。
このスライドのポイント
- 一問一答: 隣の要素との距離を作るのは？ → margin（内側の余白はpadding）
- 30秒まとめ: ボックスモデルは内から content・padding・border・margin の4層。「paddingは自分の中、marginは他人との距離」
- 次回G-07: この箱がどう並ぶか＝配置のルールへ
- 関連資料: 「UI改善プロンプト50」「画面設計チェックリスト100」
