10日で覚えるCSSDay 3: ボックスモデル
books.chapter 310日で覚えるCSS

Day 3: ボックスモデル

今日学ぶこと

  • ボックスモデルの構造（content, padding, border, margin）
  • box-sizingプロパティ
  • displayプロパティ（block, inline, inline-block）
  • 幅と高さの制御
  • マージンの相殺

ボックスモデルとは

CSSではすべてのHTML要素は**ボックス（箱）**として扱われます。ボックスは4つの領域で構成されています。

flowchart TB
    subgraph BoxModel["ボックスモデル"]
        Margin["margin<br>外側の余白"]
        Border["border<br>枠線"]
        Padding["padding<br>内側の余白"]
        Content["content<br>内容"]
    end
    Margin --> Border --> Padding --> Content
    style Margin fill:#ef4444,color:#fff
    style Border fill:#f59e0b,color:#fff
    style Padding fill:#22c55e,color:#fff
    style Content fill:#3b82f6,color:#fff

.box {
    width: 300px;           /* コンテンツの幅 */
    padding: 20px;          /* 内側の余白 */
    border: 2px solid #333; /* 枠線 */
    margin: 16px;           /* 外側の余白 */
}

デフォルトの計算（content-box）

実際の表示幅 = width + padding左右 + border左右

300px + 20px×2 + 2px×2 = 344px

box-sizing

content-box（デフォルト）

widthはコンテンツ領域のみ。paddingとborderは外側に追加されます。

border-box（推奨）

widthにpaddingとborderが含まれます。

* {
    box-sizing: border-box;
}

.box {
    width: 300px;           /* 全体が300px */
    padding: 20px;
    border: 2px solid #333;
    /* コンテンツ幅 = 300 - 40 - 4 = 256px */
}

flowchart LR
    subgraph CB["content-box"]
        C1["width = コンテンツのみ<br>実際の幅 = width + padding + border"]
    end
    subgraph BB["border-box ✅"]
        C2["width = 全体<br>コンテンツが自動調整"]
    end
    style CB fill:#ef4444,color:#fff
    style BB fill:#22c55e,color:#fff

ベストプラクティス: プロジェクトの最初に * { box-sizing: border-box; } を設定しましょう。

padding（内側の余白）

/* 4辺すべて */
padding: 16px;

/* 上下 | 左右 */
padding: 16px 24px;

/* 上 | 左右 | 下 */
padding: 16px 24px 32px;

/* 上 | 右 | 下 | 左（時計回り） */
padding: 16px 24px 32px 8px;

/* 個別指定 */
padding-top: 16px;
padding-right: 24px;
padding-bottom: 32px;
padding-left: 8px;

margin（外側の余白）

/* paddingと同じ記法 */
margin: 16px;
margin: 16px auto;     /* 上下16px、左右は中央寄せ */
margin: 0 auto;        /* ブロック要素の中央寄せ */

/* 個別指定 */
margin-top: 16px;
margin-bottom: 32px;

マージンの相殺（Margin Collapsing）

縦方向に隣接する要素のmarginは重なります（相殺）。

h2 { margin-bottom: 24px; }
p  { margin-top: 16px; }
/* 間隔は 24px + 16px = 40px ではなく、大きい方の 24px */

flowchart TB
    subgraph Collapse["マージンの相殺"]
        H2["h2<br>margin-bottom: 24px"]
        Gap["実際の間隔: 24px<br>（大きい方が採用される）"]
        P["p<br>margin-top: 16px"]
    end
    H2 --> Gap --> P
    style Gap fill:#f59e0b,color:#fff

注意: マージンの相殺は縦方向のみで発生します。横方向では発生しません。FlexboxやGridのコンテナ内でも発生しません。

border（枠線）

/* 一括指定 */
border: 2px solid #3b82f6;

/* 個別指定 */
border-width: 2px;
border-style: solid;    /* solid, dashed, dotted, double, none */
border-color: #3b82f6;

/* 片側だけ */
border-top: 3px solid #3b82f6;
border-bottom: 1px dashed #e2e8f0;

/* 角丸 */
border-radius: 8px;
border-radius: 50%;     /* 円形 */
border-radius: 16px 0;  /* 左上右下 | 右上左下 */
border-style 表示
solid 実線
dashed 破線
dotted 点線
double 二重線
none なし

display プロパティ

block

div, p, h1, section, article { display: block; }
  • 幅いっぱいに広がる
  • 前後に改行が入る
  • width/height を設定可能

inline

span, a, strong, em { display: inline; }
  • 内容に合わせた幅
  • 改行が入らない（横に並ぶ）
  • width/height は設定不可
  • 上下のmargin/paddingは効果が限定的

inline-block

.badge {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid #3b82f6;
    border-radius: 4px;
}
  • 横に並ぶ（inline的）
  • width/height を設定可能（block的）
flowchart TB
    subgraph Display["display の比較"]
        Block["block<br>幅いっぱい、改行あり<br>width/height ✅"]
        Inline["inline<br>内容に合わせた幅<br>width/height ❌"]
        IB["inline-block<br>横並び＋サイズ指定<br>width/height ✅"]
    end
    style Block fill:#3b82f6,color:#fff
    style Inline fill:#22c55e,color:#fff
    style IB fill:#f59e0b,color:#fff

none

.hidden { display: none; }  /* 完全に非表示（スペースも消える） */

幅と高さの制御

.container {
    width: 100%;
    max-width: 1200px;    /* 最大幅 */
    min-width: 320px;     /* 最小幅 */
    min-height: 100vh;    /* 最小高さ：ビューポート全体 */
}

よく使う単位

単位 説明 例
px ピクセル 16px
% 親要素に対する割合 50%
em 親のfont-sizeに対する倍率 1.5em
rem ルートのfont-sizeに対する倍率 1rem
vw ビューポート幅の1% 100vw
vh ビューポート高さの1% 100vh

推奨: font-sizeにはrem、余白にはpxまたはremを使うのが一般的です。

overflow（はみ出し制御）

.box {
    width: 300px;
    height: 200px;
    overflow: hidden;     /* はみ出た部分を隠す */
    overflow: scroll;     /* スクロールバーを表示 */
    overflow: auto;       /* 必要な時だけスクロール */
    overflow-x: hidden;   /* 横方向のみ */
    overflow-y: auto;     /* 縦方向のみ */
}

実践: カードコンポーネント

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f1f5f9;
    padding: 32px;
}

.card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    max-width: 400px;
    margin: 0 auto 24px;
    overflow: hidden;
}

.card-image {
    width: 100%;
    height: 200px;
    display: block;
}

.card-body {
    padding: 24px;
}

.card-body h2 {
    margin-bottom: 8px;
    font-size: 1.25rem;
}

.card-body p {
    color: #64748b;
    margin-bottom: 16px;
}

.card-tag {
    display: inline-block;
    background-color: #eff6ff;
    color: #3b82f6;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: bold;
}

まとめ

概念 説明
ボックスモデル content + padding + border + margin
box-sizing: border-box widthにpadding/borderを含める
margin collapse 縦方向のmarginは相殺される
display: block 幅いっぱい、改行あり
display: inline 内容幅、横並び
display: inline-block 横並び＋サイズ指定可
overflow はみ出しの制御

重要ポイント

  1. box-sizing: border-boxを常に使う
  2. マージンの相殺を理解して活用する
  3. displayの違いを把握する
  4. **max-widthと%**で柔軟なレイアウトを作る

練習問題

問題1: 基本

paddingとmarginを使って、テキストが読みやすいカードコンポーネントを作成してください。

問題2: 応用

display: inline-blockを使って、タグのリストを横に並べてください。

チャレンジ問題

content-boxとborder-boxで同じwidthを指定した場合の実際の表示幅の違いを計算し、ブラウザで確認してください。

参考リンク

次回予告: Day 4では「タイポグラフィ」について学びます。フォント、行間、文字間隔など、テキストの美しい表示方法をマスターしましょう。