CSSレイアウトの土台、ボックスモデルを視覚的に理解する。
padding・margin・border・gapの違いが一目でわかります。
ボックスモデル全体図 Box Model
Webページの全ての要素は「箱」。中心のコンテンツを、padding（内側余白）→ border（枠線）→ margin（外側余白）の3層が包んでいます。
外側から: margin → border → padding → content
AIへの指示例
「カードの内側に余白（padding）を24px、カード同士の間隔（margin）を16px空けて」
「ボタンの枠線（border）を1pxの薄いグレーにして」
パディング padding
要素の内側の余白。枠線とコンテンツの間の空間。パディングが大きいほど、中身にゆとりが生まれます。
パディングの大きさ比較
padding: 4px 8px
テキストが枠に近すぎて窮屈
padding: 12px 24px
ボタンやカードの標準的な余白
padding: 24px 48px
セクションやヒーローに使う大きな余白
上下左右を個別に指定
指定順: padding: 上 右 下 左（時計回り）
AIへの指示例
「ボタンのpaddingを上下12px、左右24pxにして」
「セクション全体のpaddingを上下60px、左右は画面幅に応じて調整して」
「カードの中身がぎゅうぎゅうだから、padding増やしてゆとり持たせて」
マージン margin
要素の外側の余白。要素と要素の間隔を空ける。margin: 0 autoで中央揃えもできる。
マージンで要素間の距離を調整
margin-bottom: 8px
少し余裕がある
margin-bottom: 24px
明確にセクション分離
margin: 0 auto で中央揃え
左右のmarginをautoにすると、ブラウザが自動で均等に振り分けて中央に
AIへの指示例
「セクション間のマージンを80pxにして」
「コンテナをmargin: 0 autoで中央揃えにして」
「カード間のマージンを16pxにして詰めすぎないようにして」
ボーダー border
要素の枠線。paddingとmarginの間にある。太さ・スタイル・色を指定。枠線も要素の幅に含まれる（box-sizingによる）。
ボーダーのスタイル
solid（実線）
dashed（破線）
dotted（点線）
bottom only
ボーダーの太さで印象が変わる
1px — 繊細・モダン
2px — はっきり
4px — 強調・レトロ
ギャップ gap
FlexboxやGridで使える、子要素間の間隔を一括指定するプロパティ。marginと違い、最初と最後の要素の外側には余白が付かない。
gap vs margin の違い
gap: 12px（推奨）
要素間だけに等間隔の余白。シンプル。
margin-right: 12px
最後の要素にも余白が付いてしまう
AIへの指示例
「カードグリッドの間隔をgapで20pxにして」
「ナビのリンク同士の間隔をgap: 24pxにして」
「行間のgapと列間のgapを変えて（row-gap: 24px, column-gap: 16px）」
ボックスサイジング box-sizing
widthの計算にpaddingとborderを含めるかどうか。border-box（含める）が現代の標準。content-box（含めない）だとサイズ計算が狂いやすい。
width: 200px を指定した場合
content-box（初期値）
padding・borderが外側に加算
実際の幅: 200 + 32 + 6 = 238px
border-box（推奨）
padding・borderが内側に含まれる
実際の幅: きっちり 200px
AIへの指示例
「box-sizing: border-boxをグローバルに設定して（*, *::before, *::afterに）」
→ ほぼ全てのプロジェクトで最初に書くべきCSS。AIにお任せでOK。
表示モード display
要素の並び方を決めるプロパティ。blockは縦に積む、inlineは文中に並ぶ、inline-blockはその中間。flex/gridはレイアウト用。
block / inline / inline-block の違い
block — 横幅100%、縦に積まれる
block — 次の要素も下に来る
テキストの中に inline 要素は文中に 並ぶ けど、高さ・上下paddingは効きにくい。
テキストの中に inline-block は並びつつ 幅も効く
AIへの指示例
「ボタンをinline-blockにして文中に並ぶようにして」
「divをdisplay:flexにして子要素を横並びにして」
「スマホではdisplay:noneでサイドバーを非表示にして」
はみ出し制御 overflow
コンテンツが要素の枠からはみ出した時の挙動。hiddenで切る、scroll/autoでスクロール、visibleではみ出し表示。
overflow の比較
overflow: hidden
このテキストは枠からはみ出す分量がありますが、hiddenなので見えない部分は切り取られます。スクロールバーも出ません。
overflow: auto
このテキストは枠からはみ出す分量がありますが、autoなのでスクロールバーが表示されて、スクロールして読めます。
overflow: visible
このテキストは枠からはみ出しますが、visibleなのでそのまま表示。レイアウトが崩れる場合あり。
AIへの指示例
「カードの説明文がはみ出したらhiddenで切って」
「テーブルが横に長い場合はoverflow-x: autoで横スクロールさせて」
