はじめに
「余白を設定したのにレイアウトが崩れた」「paddingとmarginの違いがよくわからない」という経験はありませんか？
これらの多くは、CSSのボックスモデルを理解することで解決できます。
前回の記事では、テキストの配置や装飾に関するプロパティを解説しました。
今回はWebレイアウトの根幹となるボックスモデルについて、仕組みからサンプルコードまでわかりやすく解説します。
CSSボックスモデルとは？
CSSでは、すべてのHTML要素は「ボックス（箱）」として扱われます。
このボックスは4つの領域で構成されており、これをボックスモデルと呼びます。
4つの領域
| 領域 | 役割 |
|---|---|
| content | テキストや画像などの実際の内容が表示される領域 |
| padding | contentとborderの間の内側の余白 |
| border | paddingの外側に引かれる枠線 |
| margin | borderの外側の余白。他の要素との間隔を作る |
width / height（コンテンツサイズ）
width と height は、content領域のサイズを指定します。
書式
selector {
width: 値;
height: 値;
}主な値
| 値 | 説明 |
|---|---|
px | ピクセル単位で固定サイズを指定 |
% | 親要素に対する割合で指定 |
auto | 内容に合わせて自動調整（デフォルト） |
em / rem | フォントサイズを基準にした相対値 |
サンプル
/* 固定幅のボックス */
.box {
width: 400px;
height: 200px;
}
/* 親要素の80%の幅 */
.container {
width: 80%;
}
/* 最大幅を設定してレスポンシブに対応 */
.content {
width: 100%;
max-width: 800px;
}max-width を設定すると、画面が広くても一定の幅を超えないようにできます。スマートフォンからPC画面まで対応したレスポンシブなレイアウトを作るときによく使います。
padding（内側の余白）
padding は、content と border の間の内側の余白を指定します。
背景色を設定した場合、padding の領域にも背景色が適用されます。
書式
/* 上下左右すべて同じ値 */
selector {
padding: 値;
}
/* 上下・左右をまとめて指定 */
selector {
padding: 上下の値 左右の値;
}
/* 上・右・下・左の順に指定（時計回り） */
selector {
padding: 上 右 下 左;
}個別指定
selector {
padding-top: 値; /* 上 */
padding-right: 値; /* 右 */
padding-bottom: 値; /* 下 */
padding-left: 値; /* 左 */
}サンプル
/* 上下左右すべて16px */
.box {
padding: 16px;
}
/* 上下24px、左右16px */
.card {
padding: 24px 16px;
}
/* 上12px、右20px、下16px、左20px */
.button {
padding: 12px 20px 16px 20px;
}
/* 上だけ0にする */
.heading {
padding: 0 0 8px 0;
}ボタンや見出しの「文字まわりのゆとり」は padding で作ります。padding を広げると要素全体が大きくなります。
margin（外側の余白）
margin は、border の外側の余白を指定します。
他の要素との間隔を作るために使います。
書式
padding と同様に、上下左右をまとめて指定できます。
/* 上下左右すべて同じ値 */
selector {
margin: 値;
}
/* 上・右・下・左の順に指定（時計回り） */
selector {
margin: 上 右 下 左;
}個別指定
selector {
margin-top: 値;
margin-right: 値;
margin-bottom: 値;
margin-left: 値;
}サンプル
/* 上下左右16px */
.box {
margin: 16px;
}
/* 上下32px、左右は自動（中央揃えに） */
.content {
width: 800px;
margin: 32px auto;
}
/* 上だけ余白を追加 */
h2 {
margin-top: 40px;
margin-bottom: 16px;
}【中央揃えのコツ】margin: 0 auto; は、固定幅の要素を水平方向に中央揃えにする定番の書き方です。width の指定が必要な点に注意してください。
marginの相殺（マージンの折りたたみ）
上下方向のmarginは、隣接した場合に大きい方の値が採用され、足し算にはなりません。
これをマージンの相殺（折りたたみ）と呼びます。
例
.box1 {
margin-bottom: 30px; /* 下マージン30px */
}
.box2 {
margin-top: 20px; /* 上マージン20px */
}この場合、box1 と box2 の間隔は 30px + 20px = 50px にはならず、大きい方の 30px になります。
border（枠線）
border は、要素の周囲に枠線（ボーダー）を引きます。
書式
selector {
border: 太さ スタイル 色;
}主なスタイル値
| 値 | 説明 |
|---|---|
solid | 実線 |
dashed | 破線 |
dotted | 点線 |
double | 二重線 |
none | 枠線なし |
サンプル
/* 黒い実線の枠（1px） */
.box {
border: 1px solid #000;
}
/* 青い破線の枠（2px） */
.dashed-box {
border: 2px dashed #0077cc;
}
/* 枠線を消す */
.no-border {
border: none;
}個別指定
上下左右それぞれに異なる枠線を指定できます。
/* 上だけ枠線を引く（区切り線として使う） */
.divider {
border-top: 1px solid #ccc;
}
/* 下だけ枠線（見出しの下線として） */
h2 {
border-bottom: 2px solid #333;
padding-bottom: 8px;
}border-radius（角丸）
border-radius で角を丸くできます。
/* 8pxの角丸 */
.card {
border: 1px solid #ddd;
border-radius: 8px;
}
/* 完全な円 */
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
}box-sizing（ボックスサイズの計算方法）
CSSのボックスモデルには、width の計算方法に2つのモードがあります。
content-box（デフォルト）
width に content 領域のサイズのみが含まれます。
padding と border は width に加算されます。
.box {
box-sizing: content-box; /* デフォルト */
width: 300px;
padding: 20px;
border: 5px solid #000;
}
/* 実際の表示幅 = 300 + 20×2 + 5×2 = 350px */
border-box（推奨）
width に padding と border が含まれます。
widthで指定した値がそのまま要素の外側のサイズになるため、計算がシンプルです。
.box {
box-sizing: border-box;
width: 300px;
padding: 20px;
border: 5px solid #000;
}
/* 実際の表示幅 = 300px（paddingとborderを含む） */
【ベストプラクティス】
現代のCSS開発では、全要素に box-sizing: border-box を適用するのが一般的です。サイズ計算がシンプルになり、レイアウト崩れを防げます。
全要素への一括適用
/* CSSファイルの先頭に記述する */
*,
*::before,
*::after {
box-sizing: border-box;
}display（表示形式）
display プロパティは、要素のボックスの表示形式を指定します。
ボックスモデルの挙動を理解するうえで重要なプロパティです。
主な値
| 値 | 特徴 |
|---|---|
block | 横幅いっぱいに広がる。上下に改行が入る。width・height・margin・padding が有効 |
inline | 内容の幅だけ。左右に並ぶ。width・height・上下の margin は効かない |
inline-block | 左右に並ぶ。width・height・margin・padding が有効 |
none | 要素を非表示にする（スペースも消える） |
block要素とinline要素の主な違い
■ block要素（例：div、p、h1〜h6）
[ 要素A（幅いっぱい） ]
[ 要素B（幅いっぱい） ]
■ inline要素（例：span、a、strong）
[要素A][要素B][要素C]← 横に並ぶ
サンプル
/* span（inline）をblock要素として扱う */
span {
display: block;
width: 200px;
margin: 10px 0;
}
/* aタグ（inline）をinline-blockにしてボタン風に */
.button {
display: inline-block;
padding: 12px 24px;
background-color: #0077cc;
color: #fff;
border-radius: 4px;
text-decoration: none;
}
/* 要素を非表示 */
.hidden {
display: none;
}overflow（はみ出しの処理）
overflow は、content がボックスからはみ出した場合の処理を指定します。
主な値
| 値 | 説明 |
|---|---|
visible | はみ出して表示（デフォルト） |
hidden | はみ出した部分を非表示 |
scroll | 常にスクロールバーを表示 |
auto | はみ出したときだけスクロールバーを表示 |
サンプル
/* 長いテキストをトリミング */
.thumbnail-caption {
width: 200px;
height: 60px;
overflow: hidden;
}
/* 横スクロール可能なコンテンツ */
.scroll-table {
overflow-x: auto;
width: 100%;
}サンプル（カード型レイアウト）
ボックスモデルのプロパティを組み合わせた、実用的なカード型レイアウトのサンプルです。
HTML
<div class="card-list">
<div class="card">
<h2 class="card-title">記事タイトルが入ります</h2>
<p class="card-text">記事の概要テキストが入ります。カード型レイアウトはブログ記事一覧などによく使われます。</p>
<a href="#" class="card-button">続きを読む</a>
</div>
<div class="card">
<h2 class="card-title">別の記事タイトル</h2>
<p class="card-text">2枚目のカードです。同じスタイルが適用されます。</p>
<a href="#" class="card-button">続きを読む</a>
</div>
</div>CSS
*,
*::before,
*::after {
box-sizing: border-box;
}
/* カードを横並びに */
.card-list {
display: flex;
gap: 24px;
margin: 0 auto;
max-width: 900px;
padding: 0 16px;
}
/* カードのスタイル */
.card {
width: 50%;
border: 1px solid #ddd;
border-radius: 8px;
padding: 24px;
background-color: #fff;
overflow: hidden;
}
/* 見出し */
.card-title {
margin: 0 0 12px 0;
font-size: 1.1rem;
border-bottom: 2px solid #0077cc;
padding-bottom: 8px;
}
/* テキスト */
.card-text {
margin: 0 0 16px 0;
color: #555;
line-height: 1.7;
}
/* ボタン */
.card-button {
display: inline-block;
padding: 8px 20px;
background-color: #0077cc;
color: #fff;
text-decoration: none;
border-radius: 4px;
font-size: 0.9rem;
}よくある質問・トラブル対処
Q. paddingを追加したら要素の幅が変わってしまった
→ box-sizing: border-box を指定していない場合に起こります。CSSファイルの先頭に以下を追記してください。
*,
*::before,
*::after {
box-sizing: border-box;
}Q. marginを指定したのに要素が動かない
→ display: inline の要素は、上下の margin が効きません。display: block または display: inline-block に変更してください。
Q. 上下のmarginが足し算にならない
→ これは仕様通りの動作です。上下に並ぶ要素のmargin は「相殺（折りたたみ）」が発生し、大きい方の値が採用されます。意図的に足し算にしたい場合は、親要素に padding を使う方法があります。
Q. 背景色がpaddingの外まで広がってしまう
→ 背景色（background-color）は content と padding の領域に適用されます。border の外側（margin）には適用されません。これは正常な動作です。
おわりに（まとめ）
CSSボックスモデルは、Webレイアウトのすべての基本となる概念です。
- ✅ HTML要素はすべて content → padding → border → margin の4層構造のボックスとして扱われる
- ✅
paddingは内側の余白、marginは外側の余白 - ✅ 上下のmarginは相殺される（足し算にならない）
- ✅
box-sizing: border-boxを使うとwidthの計算がシンプルになる - ✅
displayで要素のボックス形式（block / inline / inline-block）を変更できる - ✅
overflowでボックスからはみ出したコンテンツを制御できる
まず padding・margin・border・box-sizing の4つを押さえましょう。
この4つを理解するだけで、レイアウト崩れの原因の多くを解決できるようになります。
次回は「CSSのflexboxレイアウト」について勉強・解説します。
この記事が、少しでも誰かのお役に立てれば幸いです。
関連記事
当サイトの記事で使用したVBAなどのサンプルをDLできます
この記事のサンプルはありません！
ダウンロードページへは下のカードをクリックすればジャンプできます。
よろしければご利用ください！
