レッスン8：CSSレイアウトのキホン！ボックスモデルを理解しよう
CSSのボックスモデル（padding、margin、border、box-sizing）について学び、要素のスペース調整をマスターします。
🎯 学習目標
- 「ボックスモデル」の概念を理解する
- padding、margin、border、width、heightの使い方を習得する
- 要素間のスペースや見た目の調整ができるようになる
- box-sizingプロパティの違いを理解する
📚 レッスン
1. ボックスモデルとは？
Webページのすべての要素は「見えない箱（ボックス）」として扱われます。この箱の構造を理解することが、レイアウト作成の基本となります。
2. ボックスの構造を理解しよう
ボックスモデルは、内側から外側へ以下の4つの領域で構成されています。
| 領域 | 説明 | 例え |
|---|---|---|
| content | 文字や画像など、実際の内容が入る部分 | 段ボール箱の中身 |
| padding | 内容と枠線の間のスペース（内側の余白） | 中身を保護するクッション |
| border | ボックスの枠線 | 段ボール箱の壁 |
| margin | 他の要素との間隔（外側の余白） | 箱と箱の間の隙間 |
3. paddingとmarginの違い
初学者が最も混乱しやすいのが、paddingとmarginの違いです。
以下のデモは、２つのボックスにpadding: 20px;とmargin: 20px;を設定した例です。paddingはボックスの内側にスペースができており、marginはボックスの外側にスペースができています。
paddingの指定方法
paddingは以下のように指定することができます。記述方式が何パターンかありますが、使っていくうちに覚えていくでOKです。
/* paddingの指定方法 */
.box {
padding: 20px; /* 上下左右すべて20px */
padding: 10px 20px; /* 上下10px、左右20px */
padding: 10px 20px 15px; /* 上10px、左右20px、下15px */
padding: 10px 20px 15px 5px; /* 上10px、右20px、下15px、左5px */
}
/* 個別指定 */
.box {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 5px;
}marginの指定方法
marginはpaddingと同じ形式で指定します。
/* marginの指定方法（paddingと同じ） */
.box {
margin: 20px; /* 上下左右すべて20px */
margin: 10px 20px; /* 上下10px、左右20px */
margin: 10px 20px 15px; /* 上10px、左右20px、下15px */
margin: 10px 20px 15px 5px; /* 上10px、右20px、下15px、左5px */
}
/* 個別指定 */
.box {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 5px;
}marginの便利なTips
marginはautoを設定することでボックスを中央寄せすることができます。レイアウトでよく使われるテクニックです。
/* ボタンを中央寄せにする例 */
.box {
margin: 0 auto; /* autoを指定することで中央寄せにできる */
}
ポイント：ボタンの親要素にmarginを設定する必要があります
4. borderの指定
border（枠線）
borderでボックスの境界線を指定します。
/* borderの基本構文 */
.box {
border: 太さ 線の種類 色;
}
/* 具体例 */
.box {
border: 2px solid #333; /* 2px、実線、黒色 */
border: 1px dashed #ff0000; /* 1px、破線、赤色 */
border: 3px dotted #00ff00; /* 3px、点線、緑色 */
}
/* 個別指定 */
.box {
border-top: 2px solid #333;
border-right: 1px dashed #666;
border-bottom: 3px dotted #999;
border-left: 1px solid #ccc;
}5. サイズの指定
width / height（幅と高さ）
コンテンツの横幅と高さを指定することができます。
.box {
width: 300px; /* 幅を300pxに指定 */
height: 200px; /* 高さを200pxに指定 */
max-width: 500px; /* 最大幅を500pxに制限 */
min-height: 100px; /* 最小高さを100pxに設定 */
}6. box-sizingプロパティ
box-sizingは、要素のサイズ計算方法を指定するプロパティです。
content-box（デフォルト）
box-sizing: content-box;の場合、width/heightはコンテンツ部分のみのサイズになります。
例：width: 200px; padding: 20px; border: 5px;を指定した場合の横幅は250pxになります。
.content-box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #333;
box-sizing: content-box;
}
/* 実際のサイズ = width + padding + border */
/* 幅 = 200px + 40px + 10px = 250px */
/* 高さ = 100px + 40px + 10px = 150px */border-box（推奨）
box-sizing: content-box;の場合、width/heightはコンテンツとborderとpadding込みのサイズになります。
例：width: 200px; padding: 20px; border: 5px;を指定した場合の横幅は200pxになります。
ポイント：widthがpaddingやborderを含んだサイズで自動計算がされるので、レイアウトのサイズ計算がしやすくなります！
.border-box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #333;
box-sizing: border-box;
}
/* 実際のサイズ = 指定したwidth/height */
/* 幅 = 200px（固定） */
/* 高さ = 100px（固定） */✨ 比較デモ
box-sizingをcontent-boxとborder-boxでそれぞれ指定したボックスを横に並べています。どちらも同じ大きさを設定していますが、大きさが違います。
実際の幅: 250px
実際の幅: 200px
💡 現在は border-box が推奨
サイズ計算が分かりやすく、レスポンシブデザインでも扱いやすいため、現在ではbox-sizing: border-boxが一般的です。
今日のまとめ
✅ 覚えておきたいポイント
| プロパティ | 役割 | 覚え方 |
|---|---|---|
| content | 実際の内容が入る部分 | 箱の中身 |
| padding | 内容と枠線の間のスペース | 詰め物・クッション |
| border | ボックスの枠線 | 箱の壁 |
| margin | 他の要素との間隔 | 箱と箱の隙間 |
- box-sizing: border-box を使うとサイズ計算が楽になる
- margin: 0 auto で左右中央寄せができる
✍️ 演習問題
ここでは学んだ内容を実際に使って、簡単な演習問題に挑戦してみましょう。エディタを使って実際にコードを書いてみてください。
演習1: paddingでレイアウトを調整してみよう
以下のコードを使って、paddingでレイアウトを調整してみましょう。
<style>
.box {
width: 200px;
background-color: #e3f2fd;
border: 5px solid #007bff;
}
</style>
<div class="box">ボックス</div>