CSS ボックスモデル (CSS Box Model)

Volardev 編集部 April 12, 2026

CSSにおける「ボックスモデル（Box Model）」は、デザインやレイアウトを語る上で欠かせない非常に重要な概念です。

すべてのHTML要素は、一つの「ボックス（箱）」として扱われます。CSSのレンダリングにおいて、デザインを構成する各要素はこのボックスとして表現されるのです。

1. ボックスモデルの構成要素 (The CSS Box Model)

ボックスモデルは、要素の周囲に配置される複数の層で構成されています。内側から外側に向かって、以下の4つの領域に分かれます。

ボックスモデルを理解することで、要素にボーダーを付けたり、他の要素との間にスペースを空けたりすることが自由自在になります。

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

CSSで要素の width（幅）や height（高さ）を設定する場合、それはコンテンツ領域の幅と高さのみを指定していることに注意が必要です。

要素の「総幅（Total Width）」を計算するには、パディングとボーダーのサイズも合算する必要があります。

例えば、ある <div> 要素に以下のスタイルを適用したとします。

div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}

この要素がブラウザ上で実際に占有する幅は、以下のように計算されます：

計算式（総幅）:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

計算式（総高）:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

重要: Webサイトを制作する際、ボックスモデルの計算を誤るとレイアウトが崩れる原因になります。特に、複数の要素を横に並べる場合は、パディングやボーダーを含めた総幅が親要素の幅を超えないように注意してください。

モダンなWeb開発では、パディングやボーダーを含めて width とみなす box-sizing: border-box; というプロパティを多用します。

これにより、計算がより直感的になり、レイアウトの管理が容易になります。

/* すべての要素に border-box を適用する一般的な手法 */
* {
  box-sizing: border-box;
}

この設定を行うと、width にパディングやボーダーが含まれるようになり、計算の手間が大幅に削減されます。コーディングの効率化と精度の向上のために、必ず押さえておきたいテクニックです。