CSSのbox-sizingを完全解説！content-boxとborder-boxの違いを初心者向けに徹底解説
生徒
「先生、CSSで要素のサイズを設定したのに、思ったサイズにならないことがあるんですけど…」
先生
「それはbox-sizingの指定方法が原因かもしれませんよ。」
生徒
「box-sizingってなんですか？よく聞くんですけど、よく分からなくて…」
先生
「じゃあ、content-boxとborder-boxの違いを、初心者でも分かるように解説していきましょう。」
1. box-sizingとは？
CSSのbox-sizingは、要素のサイズをどのように計算するかを決める設定です。ウェブページを作るとき、幅（width）や高さ（height）を指定しても、思った通りのサイズにならないことがあります。その原因のひとつが、このbox-sizingです。
CSSのボックスモデルでは、コンテンツ（文字や画像が入る部分）、パディング（余白）、ボーダー（枠線）、マージン（外側の余白）の4つで要素が構成されています。このうち、サイズ計算にパディングやボーダーを含めるかどうかを切り替えるのがbox-sizingです。
2. content-boxの特徴
content-boxは、CSSのデフォルト（初期設定）です。widthやheightで指定したサイズが、コンテンツ部分だけのサイズになります。そのため、パディングやボーダーを追加すると、要素全体のサイズが大きくなります。
<style>
.box-content {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 5px solid blue;
background-color: lightyellow;
}
</style>
<div class="box-content">content-boxのボックス</div>
この例では、コンテンツ部分の幅が200pxですが、パディング20pxが両側に、ボーダー5pxが両側に加わるので、全体の幅は200 + 20×2 + 5×2 = 250pxになります。
3. border-boxの特徴
border-boxでは、widthやheightで指定したサイズにパディングとボーダーも含めるようになります。つまり、見た目のサイズが指定通りになり、余白を追加しても全体サイズが変わりません。
<style>
.box-border {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid green;
background-color: lightcyan;
}
</style>
<div class="box-border">border-boxのボックス</div>
この場合、widthで指定した200pxの中にパディングやボーダーが含まれるので、要素全体の幅はきっちり200pxのままです。レイアウトを整えるときに便利な設定です。
4. content-boxとborder-boxの違いを例で比較
両者の違いを分かりやすくするために、同じサイズ指定で2つのボックスを並べて表示してみます。
<style>
.box-container {
display: flex;
gap: 20px;
}
.box1, .box2 {
width: 200px;
padding: 20px;
border: 5px solid black;
background-color: lightgray;
}
.box1 {
box-sizing: content-box;
}
.box2 {
box-sizing: border-box;
}
</style>
<div class="box-container">
<div class="box1">content-box</div>
<div class="box2">border-box</div>
</div>
左のcontent-boxは全体のサイズが大きくなり、右のborder-boxは幅が200pxに収まっています。レイアウトで「揃えたはずなのにズレてしまう…」というときは、この違いが原因になっている場合が多いです。
5. 実践的な使い方とおすすめ設定
最近のWeb制作では、要素のサイズを直感的に管理しやすいborder-boxが主流です。全体のレイアウトを崩さずにパディングを調整できるので、デザインが安定します。
多くの開発者は、以下のようにCSSの全要素にborder-boxを適用しています。
<style>
* {
box-sizing: border-box;
}
</style>
<div>全ての要素にborder-boxを適用</div>
この方法を使えば、すべての要素がborder-boxで統一されるため、サイズ管理がしやすくなります。特にレスポンシブデザインや複雑なレイアウトを扱うときに便利です。
6. content-boxを選ぶケース
とはいえ、content-boxが役に立つ場面もあります。例えば、正確にコンテンツの幅だけをコントロールしたい場合です。文章や画像の領域をぴったり指定したいときには、content-boxを使うことで余白を自由に追加できます。
7. まとめた違い
最後に、違いを簡単にまとめておきます。
- content-box：widthとheightはコンテンツ部分だけ。パディングやボーダーを足すと全体のサイズが大きくなる。
- border-box：widthとheightにパディングやボーダーも含む。見た目のサイズが指定通りになる。
