ボックスモデル完全攻略 — margin・padding・display・position
「思った場所に置けない」を卒業する

ボックスモデルとは — 全要素は「箱」でできている

CSSにおける最重要の概念が ボックスモデル(Box Model) です。一言でいうと：

<p>も<div>も<img>も<a>も、画面上ではすべて「四角形のボックス」です。一見、文字や画像にしか見えなくても、実は見えない箱に入っています。CSSとはこの「箱の大きさ・余白・配置」を操る言語とも言えます。

箱を可視化してみる

実際に箱を見てみましょう。下のCSSを当てると、すべてのボックスが赤い線で囲まれます。デバッグのときによく使うテクニックです。

/* 全要素の箱を可視化(デバッグ用) */
* {
    outline: 1px solid red;
}

これをやってからブラウザで開くと、「あ、文字も箱だったのか」「<span>って横幅は文字分しかないんだ」など、ボックスモデルが体感できます。

箱には「大きさ」と「余白」がある

すべてのボックスは、以下の4つの領域でサイズが決まります。

• content(内容): 文字や画像など、実際の中身が入る部分
• padding(内側の余白): 内容と枠線の間のスペース
• border(枠線): 箱の輪郭
• margin(外側の余白): 箱と隣の要素との間のスペース

「箱の中身(content)」を「内側の詰め物(padding)」が囲み、それを「外枠(border)」が囲み、さらにその外側に「他の要素との距離(margin)」がある。これがボックスモデルの4層構造です。

次のセクションで、この4層を1つずつ詳しく見ていきます。

4層構造 — content / padding / border / margin

ボックスモデルを図にすると、以下のように玉ねぎ状に4層が重なっているイメージです。

┌─────────────────────────────────┐  ← margin(外側余白)
│   ┌─────────────────────────┐   │
│   │   border(枠線)          │   │
│   │  ┌───────────────────┐  │   │
│   │  │ padding(内側余白) │  │   │
│   │  │  ┌─────────────┐  │  │   │
│   │  │  │  content    │  │  │   │
│   │  │  │  (中身)     │  │  │   │
│   │  │  └─────────────┘  │  │   │
│   │  └───────────────────┘  │   │
│   └─────────────────────────┘   │
└─────────────────────────────────┘

content(コンテンツ領域)

文字や画像など、実際のコンテンツが入る部分です。widthとheightはデフォルトでこのcontent領域の大きさを指定します(後述のbox-sizingで変えられます)。

.box {
    width: 300px;   /* contentの横幅が300px */
    height: 200px;  /* contentの縦幅が200px */
}

padding(内側の余白)

contentと border の間の内側の余白です。「箱の中で、中身が壁にくっつかないように間を空ける」イメージ。

.box {
    /* 4方向まとめて指定 */
    padding: 20px;

    /* 上下/左右 */
    padding: 20px 30px;

    /* 上/左右/下 */
    padding: 20px 30px 10px;

    /* 上/右/下/左(時計回り) */
    padding: 20px 30px 10px 15px;

    /* 個別に指定 */
    padding-top: 20px;
    padding-right: 30px;
    padding-bottom: 10px;
    padding-left: 15px;
}

paddingは「箱の内側」に効くので、padding を増やすと箱全体が大きくなります(box-sizing がデフォルトの場合)。背景色を付けるとpadding部分にも色が乗ります。

border(枠線)

箱の輪郭を描く線です。3つの値(太さ・スタイル・色)をまとめて書きます。

.box {
    /* まとめ書き: 太さ スタイル 色 */
    border: 2px solid #333;

    /* 一辺だけ */
    border-bottom: 1px dashed #ccc;

    /* スタイルの種類 */
    /* solid(実線), dashed(破線), dotted(点線), double(二重線), none(なし) */

    /* 角を丸める */
    border-radius: 8px;       /* 全角丸8px */
    border-radius: 50%;       /* 円形 */
    border-radius: 8px 0;     /* 上左下右と上右下左を別指定 */
}

border は実装上「線」ですが、太さ分の場所を取るので、要素の見た目サイズに影響します。border: 1pxとborder: 0では、ピクセル単位でレイアウトが変わります。

margin(外側の余白)

border の外側、他の要素との距離を作る余白です。書き方は padding と同じで、4方向指定・まとめ書きが可能です。

.box {
    margin: 20px;
    margin: 20px auto;          /* 上下20px、左右auto(中央寄せ) */
    margin-top: 40px;
    margin-bottom: 0;
}

margin と padding の使い分けで初心者が迷うポイントは 「内側の余白か、外側の余白か」。

• 「中身と枠の間」を空けたい → padding
• 「他の要素との間」を空けたい → margin
• 背景色を入れたいエリアを広げたい → padding(margin は透明)

box-sizing — width が思った大きさにならない謎

ここからが初心者が一番ハマるポイントです。次のCSSを書いたとき、この箱の見た目の幅は何ピクセルでしょう？

.box {
    width: 300px;
    padding: 15px;
    border: 5px solid #333;
}

「300px」と思いますよね。でも答えは 340px です。300 + 15(左padding) + 15(右padding) + 5(左border) + 5(右border) = 340px。

デフォルトの box-sizing は content-box

CSSのデフォルトでは width は content領域の幅だけを指します。padding と border は別途加算されるので、見た目の箱は指定したwidthより大きくなります。これが「width: 300px と書いたのに340pxになる」現象の正体です。

解決策: box-sizing: border-box

box-sizing: border-box を指定すると、width に padding と border が含まれるようになります。つまり「width: 300pxの箱は本当に300px」になります。

.box {
    box-sizing: border-box;
    width: 300px;
    padding: 15px;
    border: 5px solid #333;
    /* ↑ 見た目の幅は300px(content幅は260pxに自動調整される) */
}

この方がレイアウトが圧倒的に直感的になるので、現代のWebサイトはほぼ100%これを使います。

プロのデファクトスタンダード

新規プロジェクトの先頭には、必ずこれを書きます。すべての要素に border-box を当てるテンプレです。

/* リセットCSS の冒頭に書く */
*,
*::before,
*::after {
    box-sizing: border-box;
}

これだけで、レイアウトの計算が圧倒的に楽になります。世界中のCSSフレームワーク(Tailwind, Bootstrap等)もデフォルトでこれを当てています。

margin の相殺 — 上下マージンが合算されない理由

次のCSSを書きました。要素A の下に要素B がある状態です。

.boxA {
    margin-bottom: 30px;
}

.boxB {
    margin-top: 20px;
}

常識的に考えれば、A と B の間は 30 + 20 = 50px 空くはず。でも実際の隙間は 30px です。なぜ？

マージン相殺(margin collapsing)とは

上下に隣接するブロック要素のmarginは、合算されず大きい方だけが採用されるという、CSSの仕様です。これをマージン相殺(またはマージンの折りたたみ)と呼びます。

なぜこんな仕様になっているかというと、初期のWebは「文書」が中心で、段落間の余白が必要以上に広がるのを防ぐためでした。たとえばすべての <p> に margin: 1em 0 を付けても、段落の間が2emになるのではなく1emで一定になります。

相殺が起きる3つのパターン

マージン相殺は以下の3つの場面で発生します。

/* パターン1: 隣接する兄弟要素 */
<p style="margin-bottom: 30px;">A</p>
<p style="margin-top: 20px;">B</p>
/* → 隙間は30px(大きい方) */

/* パターン2: 親と最初/最後の子 */
<div>
    <p style="margin-top: 20px;">最初の段落</p>
</div>
/* → 親の上端から子のmarginが「外に飛び出す」 */

/* パターン3: 空のブロック要素 */
<div style="margin-top: 20px; margin-bottom: 30px;"></div>
/* → 自身のmargin-topとmargin-bottomが相殺される */

相殺を防ぐ方法

意図的に相殺させたくない場合、以下のいずれかを使います。

• 親要素に padding: 1px 0 や border、overflow: hidden を付ける
• display: flex や display: grid を使う(Flex/Gridコンテナ内では相殺が起きない)
• marginを片方向に統一する(例: 「上のmarginは付けない、下のmarginだけで間隔を作る」というルール)

実務でのベストプラクティス

プロは「marginは下方向に統一する」運用を取ることが多いです。

/* 全要素のmargin-topは0、margin-bottomだけで余白を作る */
h1, h2, h3, p, ul {
    margin-top: 0;
    margin-bottom: 1em;
}

こうすれば相殺の挙動を考えなくていいので、設計が圧倒的に楽になります。

display プロパティ — block / inline / inline-block

displayは要素の「どう振る舞うか」を決める最重要プロパティです。同じHTML要素でも、displayの値で見た目が大きく変わります。基本の3値を押さえましょう。

block — 縦に積み重なる箱

display: blockの要素は1行を独占し、横幅は親要素の100%、縦に積み重なります。<div> <p> <h1>〜<h6> <ul> <li> <section> などがデフォルトでblockです。

div {
    display: block;       /* デフォルト */
    /* 横幅は親要素の100%、勝手に改行する */
    /* width / height / margin / padding すべて指定可能 */
}

inline — 文中に流れる要素

display: inlineの要素は文章の一部として横に並び、必要な分だけ横幅を取ります。<span> <a> <strong> <em> <img>(やや特殊)などがデフォルトでinlineです。

span {
    display: inline;      /* デフォルト */
    /* 横幅はコンテンツ分だけ */
    /* width / height は効かない */
    /* margin-top / margin-bottom も効かない */
    /* padding-top / padding-bottom は効くが行送りには影響しない */
}

inline要素にwidthやheightを指定しても効かないのがハマりポイント。サイズを変えたいならinline-blockかblockに変える必要があります。

inline-block — 横に並びつつ、サイズも持てる

display: inline-blockはinline と block の良いとこ取り。横に並びながら、width / height / margin が全方向で効きます。

.btn {
    display: inline-block;
    width: 200px;
    height: 50px;
    padding: 10px 20px;
    margin: 5px;
}

/* HTML側で複数のbtnを書くと、横並びで表示される */
<a class="btn">ボタン1</a>
<a class="btn">ボタン2</a>
<a class="btn">ボタン3</a>

ナビゲーションリンクや、横並びにしたいボタンなどでよく使います。ただし現代では横並びは Flexbox の方が便利なので、inline-block の登場場面は減ってきました。

その他のdisplay値

.example {
    display: none;          /* 完全に非表示(場所も取らない) */
    display: flex;          /* Flexコンテナ(この先の Flexbox 編で詳説) */
    display: grid;          /* Gridコンテナ(この先の Grid 編で詳説) */
    display: table;         /* テーブル風レイアウト(古い) */
}

display: noneとvisibility: hiddenの違いに注意。

• display: none: 要素はレイアウトから完全に消える(場所も取らない)
• visibility: hidden: 要素は見えないが場所は取る(隙間が空く)

position — 要素を自由に配置する5つの値

positionは要素の「画面上の位置」を制御するプロパティです。static(デフォルト) / relative / absolute / fixed / stickyの5値があります。

positionをstatic以外にすると、top / right / bottom / leftプロパティが有効になり、座標で位置を指定できるようになります。

1. static(デフォルト)

HTMLに書いた順に、上から下へ自然に並ぶ通常配置。topなどは効きません。

.box {
    position: static;      /* デフォルト。書かなくても同じ */
}

2. relative — 元の位置からのズレ

元の位置を基準に、top / leftなどで相対的にずらします。元の場所はそのまま空けておかれます。

.box {
    position: relative;
    top: 20px;        /* 元の位置から下に20pxずれる */
    left: 30px;       /* 元の位置から右に30pxずれる */
}

relative の真の使い道は、子要素のposition: absoluteの基準点を作ること(後述)。「ちょっと位置をズラしたい」目的では transform: translate() を使うことが増えています。

3. absolute — 親基準で完全自由配置

もっとも親に近い「position が static 以外」の祖先要素を基準に、座標で配置します。元の場所は詰められて、要素はレイアウトから浮く動きをします。

/* 親に position: relative を付けて基準を作る */
.parent {
    position: relative;     /* 基準点になる */
    width: 400px;
    height: 300px;
}

/* 子を absolute で親の右上に配置 */
.child {
    position: absolute;
    top: 10px;
    right: 10px;
}

「要素の上にバッジを重ねる」「画像の上にキャプションを乗せる」といった重ね配置の基本パターンです。親にposition: relativeを付けるのを忘れると、画面の左上(<html>基準)に飛んでいくのが定番ハマリ。

4. fixed — 画面基準で固定

ブラウザの表示領域(viewport)を基準に配置されます。スクロールしても画面の同じ位置に貼り付いたままです。

/* 画面右下に「トップへ戻る」ボタンを固定表示 */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

/* ヘッダーを画面上部に常時表示 */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

ヘッダーの追従、戻るボタン、モーダルウィンドウの背景レイヤーなどでよく使います。

5. sticky — スクロール途中で貼り付く

通常は relative のように振る舞い、スクロールで指定位置に到達すると fixed のように貼り付くハイブリッド。

.section-heading {
    position: sticky;
    top: 0;          /* 画面上部に到達したら貼り付く */
    background: white;
}

「セクション見出しが画面上部にスクロール追従する」「目次が画面横に貼り付く」といったUIに最適です。比較的新しい値ですが、現代ブラウザはすべて対応しています。

z-index — 重なり順を制御する

positionを static以外にした要素は、z-indexで重なり順(前後関係)を指定できます。

.modal-overlay {
    position: fixed;
    z-index: 100;       /* 数字が大きいほど前面 */
}

.modal-content {
    position: fixed;
    z-index: 101;       /* オーバーレイの上に表示 */
}

z-index は無闇に大きい数字を付けないこと。100, 200, 300 と100単位で管理する、または 1〜10 の小さな範囲で運用するルールを決めると保守が楽になります。

float — 古い技術が今でも使われる理由

floatは「要素を左または右に寄せて、後続のテキストやインライン要素を周り込ませる」プロパティです。元々は「画像の周りに文章が回り込む雑誌風レイアウト」のために生まれました。

floatの基本

img {
    float: left;        /* 画像を左に寄せ、後続の文章は右に回り込む */
    margin-right: 1em;  /* 文章との隙間 */
}

/* float の値 */
/* left, right, none(デフォルト) */

2010年代までは float でレイアウトを組んでいた

Flexbox / Grid が普及する前の時代(〜2015年頃)は、サイト全体のレイアウトを float で組むのが一般的でした。「左サイドバー + メインコンテンツ + 右サイドバー」のような3カラムレイアウトも全部 float でした。

/* 古い時代の3カラムレイアウト */
.sidebar-left  { float: left;  width: 200px; }
.main          { float: left;  width: 600px; }
.sidebar-right { float: right; width: 200px; }

ただし float には「親要素の高さが0になる」という致命的な問題があり(後述の clearfix が必要)、今ではレイアウトには Flexbox / Grid を使うのが常識です。

2026年現在、float が使われる場面

float がレイアウトから外れた今でも、以下の用途では現役です。

• 本来の用途: 文章中の画像の回り込み(雑誌風)
• WordPress の記事内画像配置(.alignleft / .alignright)
• 古いサイトの保守

新規でレイアウトを組むときに float を使うことはほぼありません。「あー、こういうのもあるんだな」程度で覚えておけば十分です。

overflow と clearfix — はみ出した子要素を制御する

子要素が親より大きいとき、overflowプロパティでどう扱うかを指定できます。

overflow の4つの値

.container {
    width: 300px;
    height: 200px;

    overflow: visible;   /* デフォルト: はみ出して表示 */
    overflow: hidden;    /* はみ出した部分を切り取る */
    overflow: scroll;    /* 常にスクロールバー表示 */
    overflow: auto;      /* 必要なときだけスクロールバー */

    /* 縦横別指定 */
    overflow-x: hidden;
    overflow-y: auto;
}

overflow: hidden の隠れた使い道

overflow: hiddenには、「中の子要素のfloatや margin相殺を抑え込む」副作用があります。これがいわゆる「BFC(Block Formatting Context)を作る」テクニックで、レガシー時代の clearfix の代替として使われました。

/* 子がfloatでも、親の高さが正しく取れる */
.parent {
    overflow: hidden;
}

.child {
    float: left;
}

古典: clearfix ハック

float の親が高さ0になる問題を解決する伝統技。覚える必要はないが古いサイトで見かけるのでパターンとして知っておくと良いです。

/* clearfix(2010年代の定番) */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/* 使い方 */
<div class="clearfix">
    <div style="float: left;">A</div>
    <div style="float: left;">B</div>
</div>

繰り返しますが、新規でこれを書くことはありません。Flexbox を使えば自動的に解決するからです。

中央寄せの全パターン — 水平・垂直・両方

CSSで地味に頻出かつハマりやすいのが「要素の中央寄せ」。シチュエーションごとに正解が違うので、4パターンをまとめて押さえましょう。

パターン1: ブロック要素を水平中央寄せ(margin: auto)

幅を持つブロック要素を水平中央に置く一番シンプルな方法。widthを指定してmargin: 0 autoでOK。

.container {
    width: 800px;        /* 幅を指定する必要がある */
    margin: 0 auto;      /* 上下0、左右auto = 中央寄せ */
}

ページ全体を中央に寄せる「コンテナ」でよく使われる定番パターンです。

パターン2: テキストを水平中央寄せ(text-align)

.title {
    text-align: center;   /* 文字や inline 要素を中央寄せ */
}

/* center 以外: left, right, justify(両端揃え) */

text-alignは子要素の inline / inline-block 要素を中央寄せします。block 要素自体には効きません。

パターン3: position + transform で完全中央寄せ

大きさが固定でない要素を、画面や親要素の中央に正確に置きたいときの強力なテクニック。

.parent {
    position: relative;
    height: 400px;
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* ↑ 自身のサイズの半分だけ左上にずらす */
}

モーダルウィンドウや、絶対配置のラベルを中央寄せにする時によく使います。

パターン4: Flexbox で水平・垂直中央(現代の定番)

現在もっとも推奨されるのがFlexbox。3行書くだけで完璧に中央寄せできます。

.parent {
    display: flex;
    justify-content: center;   /* 水平中央 */
    align-items: center;       /* 垂直中央 */
    height: 400px;
}

/* 子要素はサイズもクラスも問わず中央に配置される */

この3行を覚えれば、中央寄せで悩むことは一生ありません。Flexbox の詳細は、この先の Flexbox 編で扱います。

使い分けまとめ

• ページコンテナの水平中央 → width + margin: 0 auto
• テキストや inline 要素の中央 → text-align: center
• サイズ不定の絶対配置要素の中央 → position: absolute + transform: translate(-50%, -50%)
• その他、子要素を水平・垂直中央 → Flexbox(justify-content + align-items)

DevTools でボックスモデルを読む

「思った位置に要素が置けない」を自力で解決できる人と解決できない人の違いは、ほぼDevToolsを使えるかどうかです。今週学んだボックスモデルは、DevToolsで実際に「見る」ことで身に付きます。

F12 で開発者ツールを起動

ブラウザでF12キー(MacはCmd + Option + I)を押すとDevToolsが起動します。「Elements」(要素)タブを開き、左側のHTMLから任意の要素をクリックすると、その要素のCSSが右側に表示されます。

Computed タブのボックスダイアグラム

Elements タブの右下(または「Styles」と並ぶ「Computed」タブ)に、ボックスモデルの図解があります。これがCSSの最強の味方です。

┌─────── margin ───────┐
│  ┌───── border ─────┐ │
│  │ ┌─── padding ───┐│ │
│  │ │   content     ││ │
│  │ │   300 × 200   ││ │
│  │ └───────────────┘│ │
│  └──────────────────┘ │
└──────────────────────┘
※実際のDevTools画面では各層に
 数値(px) が表示される

この図にマウスを乗せると、ブラウザ画面上で対応するエリアがハイライトされます。「あ、この余白は margin だったのか」「padding はここまで効いてたのか」と一目瞭然になります。

レイアウトのデバッグ手順

「要素が思った場所に置けない」と思ったら、以下の順で調べます。

1. F12 を開いて、問題の要素をElements で選択
2. Computed タブのボックスダイアグラムで実寸を確認(width / height / margin / padding / border)
3. display と position の値を確認(static / relative / absolute / flex どれ?)
4. 親要素の display(flex / grid なのか)も確認
5. Styles タブで「打ち消し線」が引かれたCSSを探す(詳細度で負けている)

この手順を体に染み込ませれば、CSSの謎が9割は解決できるようになります。

実演: 数字を直接編集してみる

DevTools の Styles タブで、padding: 20pxの20をクリックすると、その場で数値を編集できます。↑↓キーで1pxずつ増減もできます。「padding を増やしたら箱がどう変わるか」を実体験してみましょう。これだけでボックスモデルの理解度が一気に上がります。

今週のよくある間違い

ミス1: width に padding を含むつもりで書いてしまう

/* ❌ box-sizing が content-box(デフォルト)のとき */
.box {
    width: 300px;
    padding: 20px;
    /* 見た目の幅は340px(意図と違う) */
}

/* ✅ 解決: box-sizing: border-box にする */
*, *::before, *::after {
    box-sizing: border-box;
}
.box {
    width: 300px;
    padding: 20px;
    /* 見た目の幅は本当に300px */
}

ミス2: inline要素に width / height を指定して効かない

/* ❌ a タグ(inline)は width が効かない */
a {
    width: 200px;     /* 効かない! */
    height: 50px;     /* 効かない! */
}

/* ✅ inline-block か block にする */
a {
    display: inline-block;
    width: 200px;
    height: 50px;
}

ミス3: position: absolute で画面の左上に飛ぶ

/* ❌ 親に position: relative がない */
.parent {
    /* relative なし */
}
.child {
    position: absolute;
    top: 10px;
    /* → 画面の左上(html基準)に飛ぶ */
}

/* ✅ 親に必ず relative を付ける */
.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 10px;
    /* 親の上から10pxの位置に正しく配置 */
}

ミス4: margin の相殺を知らずに困惑

/* ❌ 30 + 20 = 50px と思ったら30px */
.boxA { margin-bottom: 30px; }
.boxB { margin-top: 20px; }

/* ✅ marginは下方向に統一すれば悩まない */
.boxA, .boxB {
    margin-top: 0;
    margin-bottom: 30px;
}

ミス5: z-index を 9999 にしてしまう

/* ❌ とりあえずデカい数字 */
.modal { z-index: 9999; }
.tooltip { z-index: 99999; }
.notification { z-index: 999999; }
/* → 後で別のものを前面に出すたびに数字を増やすことに */

/* ✅ 100単位で計画的に */
:root {
    --z-base: 1;
    --z-dropdown: 100;
    --z-modal: 200;
    --z-toast: 300;
}
.modal { z-index: var(--z-modal); }

ミス6: position: fixed のヘッダーで本文が隠れる

/* ❌ ヘッダーが固定でも本文の頭が下から始まらない */
.header {
    position: fixed;
    top: 0;
    height: 60px;
}
/* → ヘッダーの下に本文の最初の60pxが隠れる */

/* ✅ body に padding-top でヘッダー分のスペースを確保 */
body {
    padding-top: 60px;
}

今週の課題

必須要件

1. リセットCSSの先頭で * { box-sizing: border-box; } を当てる
2. ヘッダーを position: fixed で画面上部に固定し、bodyにpadding-topでその高さ分の余白を確保する
3. カード(.card)を作り、内側に画像を入れる
4. カードの右上にバッジ(NEW・SALE等)を position: absolute で重ねる(親 .card に position: relative を忘れずに)
5. カードを3つ作り、横並びにする(現時点ではdisplay: inline-blockでOK。この先 Flexbox を学んだら書き換えられる)
6. 各カードのpaddingとmarginを別の値で指定し、何が変わるかを比較する
7. カード同士の間に意図的に上下マージンを付け、相殺が起きるかを観察する
8. フッターを画面下部にしたい(ただしposition: fixedは使わない。通常配置で並べる)
9. F12 を開いて、各要素のボックスモデル図(Computedタブ)を見ながら数値を確認する
10. すべての要素に背景色を一時的に薄く付け、ボックスの境界を可視化してデバッグする

ボーナス課題

• 「トップへ戻る」ボタンをposition: fixedで画面右下に常時表示する
• セクション見出し(<h2>)にposition: sticky; top: 60px;を当て、スクロール追従させる(60pxは固定ヘッダーの高さ)
• カードの中央寄せを3パターン以上で実装してみる(margin: 0 auto、text-align: center、position + transform)
• z-index を CSS変数で管理する設計に書き換える
• カード上にホバーで詳細情報を「position: absoluteで重ねて」表示するUIを作る

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

• * { box-sizing: border-box; } を冒頭に書いたか
• 固定ヘッダーで本文の頭が隠れていないか(padding-top で逃がしているか)
• position: absolute の子要素の親に position: relative を付けたか
• marginは「上下どちらか片方」に統一しているか
• DevToolsのComputedタブで、各要素のmargin/padding/borderの数値を実際に見たか
• z-index に意味のない 9999 を使っていないか

提出前に、AIが作ったコードでよくある間違いも確認しておきましょう。上で見た「今週のよくある間違い」に加えて、AI特有のクセもあります。

自己診断テスト

1. ボックスモデルの4層を、内側から外側の順に説明できますか？
2. box-sizing: content-boxとbox-sizing: border-boxの違いと、なぜborder-boxが推奨されるかを説明できますか？
3. マージン相殺(margin collapsing)とは何ですか？相殺を防ぐ方法を1つ以上挙げてください
4. display: block / inline / inline-blockの違いを、サイズ指定の可否を含めて説明できますか？
5. position: relativeとposition: absoluteの違い、そしてabsolute使用時に親に必要な準備を説明できますか？
6. position: fixedとposition: stickyの違いと、どんなUIで使い分けるかを説明できますか？
7. 要素を水平・垂直中央に配置する4つのパターンをすべて挙げられますか？
8. z-index を運用するときの「やってはいけない設計」と「推奨される設計」を説明できますか？
9. 「思った場所に要素が置けない」と思ったとき、F12で何を確認しますか？(順番に3つ以上)
10. display: noneとvisibility: hiddenの違いは何ですか？

土台Part 1 完走 — HTML/CSSの読み方が身につきました

Week 06、お疲れ様でした! ボックスモデル・box-sizing・margin相殺・display・position・float・中央寄せという、CSSの「配置」に関わる中核知識をすべて押さえました。これで、AIが出力したCSSを見て「なぜここに余白があるのか」「なぜこの要素は重なっているのか」「なぜ幅がズレているのか」を自分で読み解けるはずです。

Week 01〜06 を通して、HTMLの基本構造からセマンティックタグ・メタ情報・CSSのセレクタと詳細度・ボックスモデルまでを学びました。ここまでで、AIが出力するHTML/CSSを読んで、間違いに気づき、自分で直せる「土台」ができています。これが「バイブコーディングの土台」Part 1(HTML/CSS編)のゴールです。

この先は、要素を横並びにするFlexbox / Gridなどのレイアウト技術、ページに動きを付けるJavaScript、型でミスを防ぐTypeScript、UIを部品化するReactと、土台を広げていく教材を準備中です(Coming)。まずはこのPart 1の6週分を、AIと一緒に何度でも読み返して定着させてください。