ストーリー

ボックスモデルとは

HTMLのすべての要素は、目に見えない 箱（ボックス） で囲まれています。

この箱は4つの層で構成されています。

graph TD
    subgraph margin["margin（外側の余白）"]
        subgraph border["border（枠線）"]
            subgraph padding["padding（内側の余白）"]
                content["content<br>コンテンツ<br>テキストや画像"]
            end
        end
    end

    style margin fill:#fee2e2,stroke:#dc2626
    style border fill:#fef3c7,stroke:#d97706
    style padding fill:#d1fae5,stroke:#059669
    style content fill:#dbeafe,stroke:#2563eb

4つの層

padding（内側の余白）

コンテンツと枠線の間のスペースです。

.box {
  padding: 20px; /* 上下左右すべて20px */
  padding: 10px 20px; /* 上下10px、左右20px */
  padding: 10px 20px 30px 40px; /* 上、右、下、左 */
}

個別指定

.box {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

先輩「paddingは『箱の中のクッション』だと思えばいいよ。内容が枠にぴったりくっつかないようにする」

margin（外側の余白）

要素と要素の間のスペースです。

.box {
  margin: 20px; /* 上下左右すべて20px */
  margin: 10px 20px; /* 上下10px、左右20px */
  margin: 0 auto; /* 上下0、左右は自動（中央寄せ） */
}

個別指定

.box {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

中央寄せのテクニック

.container {
  width: 800px;
  margin: 0 auto; /* 左右のmarginを自動にすると中央寄せ */
}

border（枠線）

.box {
  border: 1px solid #333; /* 太さ 種類 色 */
}

枠線の種類

個別指定

.box {
  border-bottom: 2px solid #3498db; /* 下線だけ */
}

paddingとmarginの違い

.box {
  background-color: #3498db;
  padding: 20px; /* 背景色の内側にスペース */
  margin: 20px; /* 背景色の外側にスペース */
}

box-sizing: border-box

問題

通常、width は content だけの幅 です。padding と border を足すと、実際の幅が大きくなります。

.box {
  width: 300px;
  padding: 20px;
  border: 1px solid #333;
  /* 実際の幅: 300 + 20*2 + 1*2 = 342px */
}

解決策

box-sizing: border-box を使うと、width に padding と border が 含まれる ようになります。

.box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 1px solid #333;
  /* 実際の幅: 300px（padding と border 込み） */
}

全要素に適用する（推奨）

* {
  box-sizing: border-box;
}

先輩「box-sizing: border-box はほぼ必須。CSSファイルの最初に書いておこう」

開発者ツールで確認

ブラウザの開発者ツール（F12）でボックスモデルを視覚的に確認できます。

1. 要素を選択
2. Computedタブを開く
3. ボックスモデルの図が表示される

graph TD
    subgraph margin2["margin"]
        subgraph border2["border"]
            subgraph padding2["padding"]
                content2["content"]
            end
        end
    end

    style margin2 fill:#fee2e2,stroke:#dc2626
    style border2 fill:#fef3c7,stroke:#d97706
    style padding2 fill:#d1fae5,stroke:#059669
    style content2 fill:#dbeafe,stroke:#2563eb

各層の値がピクセル単位で表示されます。

実践：ボックスモデルを体験しよう

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
}

.container {
  width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.card {
  background-color: white;
  border: 1px solid #ddd;
  padding: 20px;
  margin-bottom: 20px;
}

.card h2 {
  margin-top: 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #3498db;
}

まとめ

チェックリスト

• ボックスモデルの4つの層を説明できる
• padding と margin の違いを理解した
• border の書き方を覚えた
• box-sizing: border-box の効果を理解した
• 開発者ツールでボックスモデルを確認した

次のステップへ

ボックスモデルが理解できました。次の演習では、ここまで学んだCSSを使って自己紹介ページをデザインしましょう。

推定読了時間: 30分