CSS レイアウトの核心：box-sizing プロパティ

JPKODA 編集部 May 6, 2026

CSSにおける box-sizing プロパティは、ブラウザが要素の総サイズをどのように計算するかを制御するために使用されます。

デフォルトの状態（content-box）では、要素に設定した width と height は「コンテンツ領域」のみに適用されます。そのため、パディング（padding）やボーダー（border）は後からそのサイズの上に追加され、結果として要素が想定よりも大きく表示されてしまうことがあります。

box-sizing プロパティを使用することでこの挙動を変更し、より直感的にサイズをコントロールできるようになります。

このセクションでは、box-sizing の値（content-box と border-box）、それらが要素サイズに与える影響、そしてCSSで効率的に使用する方法について解説します。

1. content-box を理解する (デフォルト値)

box-sizing プロパティのデフォルト値は content-box です。

box-sizing: content-box が要素に適用されている場合、width と height プロパティは要素の「コンテンツ領域」のサイズのみを定義します。パディングとボーダーはこのコンテンツ領域の外側に追加されるため、要素の総サイズが増加します。

1.1 実行例

<!DOCTYPE html>
<html>
<head>
<style>
.content-box-example {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: content-box; /* 明示的にデフォルト値を設定 */
}
</style>
</head>
<body>
  <div class="content-box-example">
    これは content-box のサンプルです。
  </div>
</body>
</html>

計算ロジック：

総幅（Total Width） = 200px (コンテンツ) + 20px (左パディング) + 20px (右パディング) + 5px (左ボーダー) + 5px (右ボーダー) = 250px
総高さ（Total Height） = 100px (コンテンツ) + 20px (上パディング) + 20px (下パディング) + 5px (上ボーダー) + 5px (下ボーダー) = 150px

1.2 なぜ content-box が問題になるのか？

特定のサイズでレイアウトを構築しようとする際、content-box を使用していると予期しない結果を招くことがあります。例えば、ある要素の幅を 200px に設定した後にパディングやボーダーを追加すると、その要素は実際には 200px よりも広くなってしまいます。これにより、サイドバーが次の行に落ちてしまうなどのレイアウト崩れが発生しやすくなります。要素が占有する実際のスペースを計算するのが非常に困難になるのです。

2. border-box を探索する

border-box という値は、要素のサイズを制御するためのより直感的な方法を提供します。

box-sizing: border-box を適用すると、width と height プロパティはコンテンツ、パディング、ボーダーを含む「要素全体のサイズ」を定義します。パディングやボーダーの値が増えても、コンテンツ領域が自動的に縮小して吸収するため、全体のサイズは維持されます。

2.1 実行例

<!DOCTYPE html>
<html>
<head>
<style>
.border-box-example {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: border-box;
}
</style>
</head>
<body>
  <div class="border-box-example">
    これは border-box のサンプルです。
  </div>
</body>
</html>

計算ロジック：

総幅 = 200px（固定）。コンテンツ幅は自動的に：200px - 40px (左右パディング) - 10px (左右ボーダー) = 150px となります。
総高さ = 100px（固定）。コンテンツ高さは自動的に：100px - 40px (上下パディング) - 10px (上下ボーダー) = 50px となります。

2.2 border-box のメリット

border-box はレイアウト計算を大幅に簡素化します。指定した width や height が常に要素の「目に見えるサイズ」を表すからです。これにより、親コンテナに正確にフィットする要素を簡単に作成でき、予期せぬオーバーフローやレイアウト崩れを回避できます。特に、幅をパーセンテージ（%）で指定するレスポンシブデザインにおいて、この特性は極めて重要です。

3. ユニバーサル box-sizing 宣言 (ベストプラクティス)

現在のWeb開発におけるベストプラクティスは、以下のCSSを使用して、ページ上のすべての要素に box-sizing: border-box を適用することです。

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

3.1 コードの解説

html { box-sizing: border-box; }: ルート要素である html の box-sizing を border-box に設定します。これにより、ドキュメント全体のデフォルトとして border-box モデルが確立されます。
*, *:before, *:after { box-sizing: inherit; }: この行はすべての要素 (*) およびその疑似要素 (:before, :after) に適用されます。box-sizing: inherit を設定することで、これらの要素は親要素（最終的には html 要素）から box-sizing の値を継承します。

3.2 なぜユニバーサル宣言を使用するのか？

一貫性 (Consistency): サイト全体で統一されたボックスモデル計算方式が確立され、レイアウトの設計が非常に楽になります。
予測可能性 (Predictability): 要素に設定した幅と高さが、パディングやボーダーを含めた「実際の表示サイズ」であると確信を持つことができます。
開発の効率化 (Simplified Development): デフォルトの content-box モデルに起因する予期せぬレイアウトトラブルの可能性を最小限に抑えられます。

4. 実戦的なサンプル

4.1 例 1：等幅カラムの作成

コンテナ内に3つの等幅カラムを作成したい場合を考えてみましょう。

1. border-box を使用しない場合：

<style>
.container {
  display: flex;
}
.column {
  width: 33.33%;
  padding: 10px;
  border: 1px solid black;
}
</style>
<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>

結果: box-sizing がデフォルトの content-box であるため、パディングとボーダーが 33.33% の幅に追加されます。その結果、各カラムの実際の幅が 33.33% を超えてしまい、カラムが次の行に落ちたり、コンテナからはみ出したりします。

2. border-box を使用する場合：

<style>
html {
  box-sizing: border-box; /* グローバル設定 */
}
*, *:before, *:after {
  box-sizing: inherit;    /* 継承設定 */
}
.container {
  display: flex;
}
.column {
  width: 33.33%;
  padding: 10px;
  border: 1px solid black;
}
</style>

結果: ユニバーサル宣言を適用することで、各カラムはパディングとボーダーを含めて正確に 33.33% を占有します。ブラウザが自動的に内部のコンテンツ領域を調整するため、コンテナ内に完璧に収まります。

4.2 例 2：パディングとボーダーを持つ入力フィールド

フォームの input 要素にスタイルを適用する場合を考えます。

1. border-box を使用しない場合：
入力フィールドに固定幅を設定してパディングやボーダーを追加すると、総幅が指定値を超えてしまいます。これにより、他の要素との位置合わせが困難になります。

2. border-box を使用する場合：

<style>
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
input[type="text"] {
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
}
</style>
<input type="text" placeholder="テキストを入力してください">

結果の解析: border-box を使用すれば、パディングやボーダーの値をどう変えても、入力フィールドの幅は常に 200px のままです。ブラウザが自動的にコンテンツ領域（文字を入力する場所）を収縮させ、レイアウトを壊すことなくコンテナ内に綺麗に配置されます。