6日でできる 新HTML&CSS入門｜ボックスモデルの基本
Webページの余白やサイズで迷ったら、まず箱の仕組みを見よう。
ボックスモデルを理解して、崩れにくく整ったレイアウトを作ろう。
Webページに表示される要素は、見出し、段落、画像、ボタン、リストなど、見た目はいろいろあります。しかしブラウザは、それらをすべて四角い箱として扱っています。この箱の考え方を理解することが、CSSでレイアウトを整えるための大切な第一歩になります。
たとえば、文章のまわりに余白を入れたい、ボタンに枠線を付けたい、カード型のデザインを作りたい、要素同士の間隔を広げたい、といった場面では、ボックスモデルの考え方が必ず関係します。
ボックスモデルは、内側から順にcontent、padding、border、marginという4つの層でできています。contentは文字や画像などの中身、paddingは内側の余白、borderは枠線、marginは外側の余白です。
CSSでwidthやheightを指定したとき、そのサイズがどこを指しているのかを理解していないと、「思ったより大きくなった」「余白を入れたらレイアウトが崩れた」「隣の要素との間隔が想定と違う」といったことが起こりやすくなります。
この記事では、ボックスモデルの4つの層を順番に確認しながら、実際のHTMLとCSSで見た目を確認できるように解説していきます。
ボックスモデルとは何か
ボックスモデルとは、HTML要素を四角い箱として考えるCSSの基本ルールです。ページ上に表示される多くの要素は、箱のように幅や高さを持ち、その内側や外側に余白を持つことができます。
ボックスモデルは、次の4つの領域で構成されています。
| 領域 | 役割 |
|---|---|
| content | 文字や画像など、要素の中身が表示される部分 |
| padding | contentとborderの間にある内側の余白 |
| border | paddingの外側を囲む枠線 |
| margin | borderの外側にある外側の余白 |
この4つは、内側から外側へ向かって広がっていきます。
contentの外側にpaddingがあり、その外側にborderがあり、さらにその外側にmarginがあります。Webページのレイアウトは、この箱の大きさと余白の組み合わせで作られています。
図1：ボックスモデルの4つの層
この図から分かること
ボックスモデルは、content、padding、border、marginの4つの層で考えます。Webページ上の要素は、単に文字や画像として置かれているのではなく、四角い箱として配置されています。余白や枠線を調整するときは、この4層のどこを変更しているのかを意識することが大切です。
contentは要素の中身が入る領域
contentは、要素の中身が表示される部分です。段落であれば文章、画像であれば画像そのもの、ボタンであればボタン内の文字がcontentにあたります。
CSSでwidthやheightを指定すると、通常はこのcontent部分の幅と高さを指定します。
.box {
width: 260px;
height: 100px;
}この場合、contentの横幅が260px、高さが100pxになります。ただし、ここにpaddingやborderを追加すると、画面上で見える箱全体の大きさは、指定したwidthやheightよりも大きくなります。
たとえば、width: 260px;を指定していても、左右にpaddingが20pxずつ、borderが4pxずつ付いていれば、見た目上の横幅は260pxより大きくなります。この違いを理解しておくと、レイアウトの計算で迷いにくくなります。
paddingは内側の余白
paddingは、contentとborderの間に作る内側の余白です。文字と枠線が近すぎると窮屈に見えるため、カード、ボタン、表のセルなどではpaddingがよく使われます。
.box {
padding: 16px;
}この指定では、上下左右に16pxの内側余白が入ります。contentのまわりに余白ができるため、文字が読みやすくなります。
paddingの特徴として、背景色はpaddingの範囲まで塗られます。つまり、要素にbackground-colorを指定した場合、contentだけでなくpadding部分にも背景色が表示されます。
| 指定 | 意味 |
|---|---|
| padding: 16px; | 上下左右すべてに16pxの余白 |
| padding: 10px 20px; | 上下10px、左右20pxの余白 |
| padding-top: 12px; | 上だけに12pxの余白 |
| padding-left: 24px; | 左だけに24pxの余白 |
paddingを大きくすると、要素の中身がゆったり見えます。ただし、初期状態のbox-sizingでは、paddingの分だけ見た目上のサイズが大きくなるため、横幅をぴったり合わせたいときは注意が必要です。
borderはボックスを囲む枠線
borderは、paddingの外側を囲む枠線です。枠線を付けると、要素の範囲がはっきり分かるようになります。カード型のデザインや入力欄、ボタン、画像の装飾などでよく使われます。
borderは、太さ、線の種類、色をまとめて指定できます。
.box {
border: 4px solid #0077b6;
}この指定では、4pxの太さ、solidの実線、#0077b6の青色で枠線が表示されます。
| 指定部分 | 例 | 内容 |
|---|---|---|
| 太さ | 4px | 枠線の太さ |
| 線の種類 | solid | 実線 |
| 色 | #0077b6 | 枠線の色 |
borderもpaddingと同じように、要素の見た目上のサイズに影響します。contentの幅に加えて、左右のborderの太さも加算されるため、指定したwidthよりも全体が大きく見えることがあります。
marginは外側の余白
marginは、borderの外側に作る余白です。要素と要素の間隔を空けたいときに使います。
.box {
margin: 24px;
}この指定では、上下左右に24pxの外側余白ができます。marginは要素の外側に作られる余白なので、background-colorの色は付きません。
paddingが箱の内側の余白であるのに対して、marginは箱の外側の余白です。この違いはとても大切です。
| 種類 | 位置 | 背景色の影響 | 主な用途 |
|---|---|---|---|
| padding | borderの内側 | 背景色が塗られる | 文字と枠線の間を空ける |
| margin | borderの外側 | 背景色は塗られない | 要素同士の間隔を空ける |
たとえば、カードの中の文字をゆったり見せたいならpaddingを使います。カード同士の間隔を空けたいならmarginを使います。
ボックスの全体サイズを考える
初期状態では、widthとheightはcontentのサイズを指定します。そのため、paddingやborderを追加すると、画面上で見えるボックス全体のサイズは大きくなります。
たとえば、次のような指定があるとします。
.box {
width: 260px;
padding: 16px;
border: 4px solid #0077b6;
}この場合、横方向の見た目上のサイズは次のように考えます。
| 項目 | サイズ |
|---|---|
| contentの幅 | 260px |
| 左padding | 16px |
| 右padding | 16px |
| 左border | 4px |
| 右border | 4px |
| 見た目上の横幅 | 300px |
つまり、width: 260px;と書いていても、実際に見える横幅は300pxになります。
計算式で表すと、次のようになります。
見た目上の横幅 = width + 左padding + 右padding + 左border + 右borderこの考え方を知らないと、横並びレイアウトを作るときに「指定した幅にしたはずなのに、なぜかはみ出す」ということが起こりやすくなります。
図2：widthにpaddingとborderが加わる仕組み
この図から分かること
widthで指定するのは、基本的にはcontentの幅です。paddingやborderを追加すると、その分だけ見た目上のサイズは大きくなります。CSSでレイアウトを作るときは、contentだけでなく、paddingとborderも含めて全体の大きさを考える必要があります。
実践：ボックスモデルを見える形で確認する
ここでは、ボックスモデルを実際のHTMLで確認してみます。content、padding、border、marginがどのように画面上に現れるのかを見やすくするため、背景色と枠線を付けたカード風のボックスを作ります。
ファイル名： lesson28_1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ボックスモデルの確認</title>
<style>
.card {
width: 280px;
height: 90px;
padding: 18px;
border: 5px solid #0077b6;
margin: 30px auto;
background-color: #e0f4ff;
box-sizing: content-box;
}
.next-box {
width: 280px;
height: 48px;
background-color: #ffd166;
margin-top: 30px;
padding: 10px;
}
</style>
</head>
<body>
<h1>ボックスモデルの表示確認</h1>
<div class="card">
content 幅280px 高さ90px<br>
padding 18px<br>
border 5px
</div>
<div class="next-box">
次のボックス
</div>
</body>
</html>ブラウザの表示例
ブラウザで表示すると、青い枠線を持つ水色のボックスが表示されます。水色で塗られている範囲は、contentとpaddingの部分です。青い線がborderです。
.cardには、width: 280px;とheight: 90px;を指定していますが、paddingとborderが加わるため、見た目上のサイズはそれより大きくなります。
また、margin: 30px auto;によって、上下には30pxの外側余白が付き、左右はautoによって中央寄せになります。横幅が決まっているブロック要素では、左右のmarginをautoにすると中央に配置できます。
.next-boxは、.cardの下に表示される別のボックスです。要素同士の間隔を確認するために置いています。外側の余白であるmarginが、ボックス同士の距離を作っていることが分かります。
サンプルコードで使っているCSSの確認
| プロパティ | 指定値 | 効果 |
|---|---|---|
| width | 280px | contentの横幅を280pxにする |
| height | 90px | contentの高さを90pxにする |
| padding | 18px | contentの内側まわりに18pxの余白を作る |
| border | 5px solid #0077b6 | 5pxの青い実線を付ける |
| margin | 30px auto | 上下に30pxの外側余白、左右は中央寄せ |
| background-color | #e0f4ff | contentとpaddingの範囲に背景色を付ける |
| box-sizing | content-box | widthとheightをcontentのサイズとして扱う |
box-sizing: content-box;は、初期状態と同じサイズ計算の方式です。widthとheightがcontent部分だけを指すことを明示しています。
使用タグとCSSの整理
今回のサンプルでは、ボックスモデルを確認するために<div>を使っています。<div>は、特別な意味を持たない汎用的なブロック要素です。CSSを使ってレイアウトやデザインを試すときによく使われます。
| 種類 | 役割 |
|---|---|
| <div> | 汎用的なブロック要素。ボックスの確認に使う |
| <h1> | ページの見出しを表す |
| <style> | HTML内にCSSを書くために使う |
| width | contentの横幅を指定する |
| height | contentの高さを指定する |
| padding | 内側の余白を指定する |
| border | 枠線を指定する |
| margin | 外側の余白を指定する |
| background-color | 背景色を指定する |
| box-sizing | サイズ計算の方法を指定する |
ボックスモデルの学習では、<div>に背景色や枠線を付けると、領域の違いを確認しやすくなります。最初は見た目をはっきりさせて、どこがpaddingで、どこがborderなのかを目で確認するのがおすすめです。
paddingとmarginの違いをしっかり区別する
CSS初心者が混乱しやすいところに、paddingとmarginの違いがあります。どちらも余白を作るCSSですが、余白ができる場所が違います。
paddingは、要素の内側に作る余白です。contentとborderの間に余白が入ります。背景色はpaddingの部分にも表示されます。
marginは、要素の外側に作る余白です。borderの外側に余白が入り、隣の要素との距離を作ります。margin部分には背景色は表示されません。
| 比較項目 | padding | margin |
|---|---|---|
| 余白の位置 | borderの内側 | borderの外側 |
| 背景色 | 表示される | 表示されない |
| 影響するもの | 中身と枠線の距離 | 要素同士の距離 |
| よく使う場面 | ボタン内の余白、カード内の余白 | 見出しと本文の間隔、カード同士の間隔 |
たとえば、ボタンの文字と枠線の間を広げたいならpaddingを使います。ボタンと次の文章の間を広げたいならmarginを使います。この違いを押さえるだけでも、CSSのレイアウトはかなり分かりやすくなります。
marginの相殺とは何か
marginには、少し独特な動きがあります。上下方向のmarginが隣り合うと、2つの値が単純に足し算されず、大きい方の値だけが残ることがあります。これをmarginの相殺といいます。
たとえば、上の要素にmargin-bottom: 30px;、下の要素にmargin-top: 20px;が指定されている場合、間隔は50pxではなく、30pxになることがあります。
| 上の要素 | 下の要素 | 実際の間隔 |
|---|---|---|
| margin-bottom: 30px; | margin-top: 20px; | 30px |
| margin-bottom: 10px; | margin-top: 40px; | 40px |
| margin-bottom: 24px; | margin-top: 24px; | 24px |
このように、上下のmarginは重なって相殺される場合があります。横方向のmarginでは、基本的にこのような相殺は起こりません。
marginの相殺を知らないと、「上下に余白を指定したのに、思ったより広がらない」と感じることがあります。特に、見出しや段落、ブロック要素を縦に並べるときには意識しておくとよいです。
図3：paddingとmargin、そしてmarginの相殺
この図から分かること
paddingはボックスの内側にある余白で、background-colorの範囲に含まれます。marginはボックスの外側にある余白で、隣の要素との距離を作ります。また、上下方向のmarginは、場合によって相殺され、大きい方の値だけが間隔として残ることがあります。
box-sizingでサイズ計算の方法を変える
ボックスモデルでは、box-sizingも重要なCSSです。box-sizingは、widthやheightをどの範囲まで含めて計算するかを指定します。
初期状態では、box-sizing: content-box;になっています。この場合、widthとheightはcontent部分だけのサイズです。paddingやborderは、そこに追加される形になります。
.box {
box-sizing: content-box;
}一方で、box-sizing: border-box;を使うと、widthとheightにpaddingとborderを含めて計算できます。
.box {
box-sizing: border-box;
}たとえば、width: 300px;を指定した要素にpaddingやborderを付けても、border-boxであれば見た目上の横幅は300pxの中に収まります。レイアウトの計算がしやすくなるため、実際のWeb制作ではborder-boxがよく使われます。
| box-sizingの値 | widthとheightが示す範囲 | 特徴 |
|---|---|---|
| content-box | contentのみ | 初期状態。paddingとborderが外側に加わる |
| border-box | content、padding、borderを含む | 見た目上のサイズを管理しやすい |
今回のサンプルでは、ボックスモデルの基本を理解しやすくするためにcontent-boxを使っています。まずはcontent-boxで、width、padding、borderがどのように足し合わされるのかを確認すると、ボックスモデルの仕組みが分かりやすくなります。
ボックスモデルを理解するとレイアウトが作りやすくなる
ボックスモデルは、CSSレイアウトの土台です。要素の大きさ、内側余白、枠線、外側余白を正しく理解していると、ページ全体の配置をコントロールしやすくなります。
たとえば、カード型のデザインを作るときは、contentに文章や画像を入れ、paddingで内側に余白を作り、borderでカードの輪郭を作り、marginでカード同士の間隔を空けます。ボタンを作るときも、文字のまわりにpaddingを入れ、borderやbackground-colorで見た目を整えます。
つまり、ボックスモデルは特別な場面だけで使う知識ではありません。見出し、段落、画像、ボタン、フォーム、カード、ナビゲーションなど、ほとんどすべての部品に関係します。
CSSで思いどおりの余白やサイズにならないときは、まずその要素を1つの箱として見てみると、原因を見つけやすくなります。content、padding、border、marginのどこが大きさや間隔に影響しているのかを確認する習慣を付けると、レイアウト調整がぐっと楽になります。
ボックスモデルを学ぶときの確認ポイント
ボックスモデルを実際に使うときは、次の点を確認すると理解しやすくなります。
| 確認すること | 見るポイント |
|---|---|
| contentのサイズ | widthとheightで指定している部分 |
| 内側の余白 | paddingがどれだけ入っているか |
| 枠線 | borderの太さが全体サイズに影響しているか |
| 外側の余白 | marginで要素同士の距離が作られているか |
| サイズ計算 | box-sizingがcontent-boxかborder-boxか |
| 上下の間隔 | marginの相殺が起きていないか |
最初のうちは、背景色や枠線をあえて付けて確認すると分かりやすいです。慣れてきたら、ブラウザの開発者ツールを使って、要素のcontent、padding、border、marginを確認すると、より実践的に理解できます。
ボックスモデルをしっかり押さえておくと、CSSで余白やサイズを調整するときに迷いにくくなります。見た目が少し崩れたときも、どの層が原因なのかを切り分けやすくなり、安定したWebページを作りやすくなります。