box-sizing は「要素の幅や高さの計算方法を決める CSS プロパティ」です。 特に box-sizing: border-box; を使うと、レイアウトが崩れにくくなるため、今ではほぼ標準として使われています。
この記事では、box-sizing の基本・違い・使いどころ・実践コードまで、初心者でも理解できるように丁寧に解説します。
box-sizing とは？
box-sizing は、CSS で要素の幅・高さをどのように計算するかを指定するプロパティです。
CSS の要素は以下の 4 層で構成されています。
- content（中身）
- padding（内側の余白）
- border（枠線）
- margin（外側の余白）
box-sizing を設定することで、「width に padding や border を含めるかどうか」を決められます。
box-sizing の種類は 2 つだけ
content-box（初期値）
width に padding と border を含めない計算方法。つまり、width = content の幅ということです。
例えば、
width: 200px;
padding: 20px;
border: 2px;とした場合、実際の表示幅は 244px（200 + 20 + 20 + 2 + 2）ということになります。
デメリット：計算が面倒でレイアウトが崩れやすい
border-box
width に padding と border を含める計算方法。width = content + padding + border を含んだ幅ということです。
同じ設定でも、実際の表示幅は 200px のまま。
メリット：レイアウトが崩れにくい・計算が楽
なぜ border-box が推奨されるのか？
★レイアウトが安定する
padding や border を追加しても、要素の幅が変わらないため、デザインが崩れにくい。
★コーディングが圧倒的に楽
width の計算をしなくてよくなる。
★世界中のフレームワークが採用
Bootstrap、Tailwind CSS など、主要フレームワークはすべて border-box を採用。
実践１：全要素に border-box を適用する方法
もっとも一般的な書き方はこれです。
*,
*::before,
*::after {
box-sizing: border-box;
}これを CSS の最初に書くことで、すべての要素が border-box になります。
実例：content-box と border-box の違いを比較
content-box（初期値）
.box1 {
width: 200px;
padding: 20px;
border: 2px solid #333;
box-sizing: content-box;
}→ 実際の幅は 244px
border-box
.box2 {
width: 200px;
padding: 20px;
border: 2px solid #333;
box-sizing: border-box;
}→ 実際の幅は 200px のまま
まとめ：box-sizing は border-box を使うのが基本
box-sizing は「幅の計算方法」を決める CSS プロパティです。
初期値の content-box はレイアウトが崩れやすいのに対して、border-box は padding や border を含めて計算するため安定しています。まずはborder-box（初期設定）のままにして、必要があるときのみcontent-box を使用するようにしましょう。
