CSSボックスモデルとは？4つの構成要素と使い方を徹底解説

ブラウザはCSSボックスモデルを使用して、Webページ上に要素がどのように表示されるかを決定します。ボックスモデルは、要素のサイズと、そのボーダー（枠線）・パディング（内側の余白）・マージン（外側の余白）を表すものであり、それぞれを個別にスタイリングすることが可能です。

Webページ上のすべての要素は「ボックス」で囲まれています。このボックスの仕組みを理解することは、要素を思い通りの位置に配置するために欠かせないスキルです。

CSSボックスモデルは、ボックスがWebページ上でどのように表示され、どこに配置されるかを決定するために使われます。このモデルは、CSSにおけるボックスを構成する4つの要素——コンテンツ（content）・パディング（padding）・ボーダー（border）・マージン（margin）——を指します。本記事では、CSSボックスモデルの基礎と、その主要な構成要素について解説します。

CSSボックスモデルの基本

CSSボックスモデルは、CSSにおけるすべてのボックスに適用される構造です。このモデルは、ボックスの各部分がどのように組み合わさって1つの要素としてWebページに表示されるかを、ブラウザに指示します。

それでは、ボックスモデルを構成する各要素を見ていきましょう。

コンテンツ（content）：ボックスの中身であり、テキスト・フォーム・画像などのWeb要素が表示される部分です。
パディング（padding）：ボックスのコンテンツとボーダーの間にある余白です。パディングは透明です。
ボーダー（border）：ボックスのコンテンツを囲む枠線です。パディングが指定されている場合は、その外側に表示されます。
マージン（margin）：ボーダーの外側の端と、ページ上の他の要素との間にある余白です。こちらも透明です。

次に、これらの各構成要素について、ひとつずつ詳しく見ていきます。

コンテンツ領域（Content）

コンテンツ領域はボックスモデルの中心に位置し、テキストや画像などの要素が実際に表示される部分です。コンテンツ領域のサイズは、CSSのheightプロパティとwidthプロパティを使って指定します。

デフォルトでは、コンテンツ領域のサイズはその中身のサイズと同じになります。たとえば1行のテキストがあれば、ボックスはそのテキストと同じ長さ・高さになります。

ここで、高さ200px・幅200pxのボックスを作りたいとしましょう。その場合は、次のようなコードを使用します。

<html>
<p>これはボックスです。</p>
</html>

<style>
p {
	height: 200px;
	width: 200px;
}
</style>

HTMLの<p>タグを使ってテキストの段落を作成しました。Webデザインではすべての要素がボックスに含まれるため、ボックスモデルはこの<p>タグにも適用されます。CSSコードでは、すべての<p>タグの高さを200pxに設定するルールを作成し、同時に幅も200pxに設定しています。

widthとheight、そしてCSSのコンテンツ領域についてさらに詳しく知りたい方は、CSSの高さと幅に関する初心者向けガイドもあわせてご覧ください。

パディング領域（Padding）

パディング領域はコンテンツ領域を外側へ広げるもので、ボックスのコンテンツとボーダーの間に隙間を作ります。パディングは、Webページ上のバナーやお知らせ要素などを作成する際によく活用されます。

ボックスにパディングを適用するには、CSSのpaddingプロパティを使用します。先ほどのボックスに20pxのパディングを適用したい場合は、次のようなコードになります。

<html>
<p>これはボックスです。</p>
</html>

<style>
p {
	height: 200px;
	width: 200px;
	padding: 20px;
}
</style>

paddingプロパティを指定し、その値を20pxに設定しました。これにより、ボックスのコンテンツ領域とボーダーの間に20pxの余白が生まれます。

その結果、ボックスとページの端との間にも隙間ができていることが確認できます。

ボーダー領域（Border）

ボーダー領域は、ボックスの枠線が表示される部分です。ボーダーはパディングの外側に描かれる色付きの輪郭線で、任意の色でスタイリングできます。また、実線（solid）や点線（dashed）など、いくつかの組み込みスタイルも用意されています。

ボックスの周囲に5px幅の水色のボーダーを追加したい場合は、次のようなコードを使用します。

<html>
<p>これはボックスです。</p>
</html>

<style>
p {
	height: 200px;
	width: 200px;
	padding: 20px;
	border: 5px solid lightblue;
}
</style>

CSSのborderプロパティを使って、5px幅の水色のボーダーを定義しました。このボーダーは「solid（実線）」スタイルを使用しており、1本の線で描画されます。ボーダーがボックスのコンテンツから離れた位置に表示されている点に注目してください。これは、ボックスの周囲に20pxのパディングを指定しているためです。

マージン領域（Margin）

マージン領域はボックスモデルの最も外側の層です。この領域は、要素とページ上の他の要素とを隔てる空の余白を作ります。

たとえば、ページ上の2つのボックスの間に10pxのスペースを作りたい場合は、次のようなコードを使用します。

<html>
<p>これはボックスです。</p>
<p>これは別のボックスです。</p>
</html>

<style>
p {
	height: 200px;
	width: 200px;
	padding: 20px;
	border: 5px solid lightblue;
	margin: 10px;
}
</style>

今回は、HTMLファイル内に2つのボックスを用意し、marginプロパティを使って10pxのマージンを適用しました。

ご覧のとおり、2つのボックスの間に10pxの隙間ができました。これはボックスにマージンを適用した結果です。マージンによって、ボックスのボーダーとページ上の他の要素との間に余白が作られます。

マージン領域についてさらに詳しく知りたい方は、CSSマージンに関するチュートリアルも参考にしてください。

幅と高さの計算方法

初心者が陥りやすい間違いのひとつに、「要素のheightとwidthにはパディング・マージン・ボーダーも含まれている」と思い込むことがあります。しかし、これは誤りです。

heightプロパティとwidthプロパティで設定できるのは、Web要素のコンテンツ領域の高さと幅だけです。それ以外の領域は含まれません。

先ほどのボックス全体がどれだけのスペースを占めるのかを知りたい場合は、簡単な計算が必要です。以下は、前のセクションの「マージン領域」の例で指定した値です。

高さ：200px
幅：200px
パディング：20px
マージン：10px
ボーダー：5px

幅を計算するには、次の式を使用します。

200px（幅）＋
40px（左右のパディング）＋
10px（左右のボーダー）＋
20px（左右のマージン）

この合計は270pxになります。

高さを計算する場合も同様に、ボックスの高さに加えて、上下のパディング・ボーダー・マージンの値を足し合わせます。

まとめ

CSSボックスモデルは、Webページ上に要素を描画するために使用される構造です。HTMLのすべての要素は長方形のボックスであり、ボックスモデルはそのコンテンツ・パディング・ボーダー・マージンがどのように表示されるかを定義します。

CSSを使ったWebページデザインについてさらに学びたい方は、CSS学習ガイドもぜひチェックしてみてください。CSSの知識を深めるためのおすすめ学習リソースを多数紹介しています。

JavaScript不要！CSSだけで作るタブナビゲーションの実装方法

CSSの:focus疑似クラス完全ガイド！使い方と実例を初心者向けに解説

CSSのボックスモデルとは？4つの構成要素と実装例をわかりやすく解説
CSSボックスモデルの基本概念HTMLドキュメント内のすべての要素は、ブラウザによって長方形のボックスとして描画されます。このボックスの幅（width）、高さ（height）、パディング（padding）、マージン（margin）によって、要素そのものとその周囲に確保されるスペースが決定します。以下の図は、ボックスモデルの概念を示したものです。出典：w3.orgコンテンツ（Content）テキスト、画像、その他のメディアといった実際のデータが格納される領域です。widthプロパティとheightプロパティによって、このボックスの寸法を変更できます。パディング（Padding）コンテンツの外側の
CSSのマージン（margin）とパディング（padding）の使い方を徹底解説
マージンとパディングとは？CSSにおけるマージン（margin）とは、HTML要素の外側にある余白のことです。マージンを設定するには、CSSのmarginプロパティを使用します。このプロパティにより、要素の周囲にどれだけのスペースを空けるかを定義できます。一方、パディング（padding）とは、要素の内側にある余白のことです。paddingプロパティを使用すると、要素のコンテンツとその境界線（ボーダー）との間に、どれだけのスペースを設けるかを指定できます。marginとpaddingの違いmarginは要素の「外側」に適用されるため、隣接する他の要素との距離を作ります。対してpaddingは要