ZeroPlus Media > Web制作 > HTML/CSS > 【CSS】box-sizingの意味は？スマホ対応に必須の理由を解説

【CSS】box-sizingの意味は？スマホ対応に必須の理由を解説

2022/09/14

2023/09/29

他の人が書いたコードにbox-sizingが指定されているけど、実はどんな働きをしているかよくわからない場合があるかと思います。結論、box-sizingを使用するとレスポンシブ対応が必要なサイト制作において、コーディングがスムーズになります。

この記事で紹介するのはbox-sizingの働きや使い方です。最後までお読みいただきますと、box-sizingの働きを理解して使いこなせるようになります。

この記事で身につく内容

box-sizingの働き
box-sizingの使い方

無料でプログラミングの質問ができるサービス！

30日間無料でWeb制作が学べるZeroPlus Gate

Web制作に特化
50本以上の動画教材で学べる
30日間に4回の対面サポートがある
Slackで質問し放題

公式サイトを見る

ZeroPlus Gate(ゼロプラスゲート)の評判は？運営がエゴサーチして声を集めてみた

box-sizingとは？
- box-sizingの理解に欠かせないボックスモデルの概念
- ボックスモデルを使ってbox-sizingを解説
box-sizingの使い方
- box-sizing: border-box;はレスポンシブ対応に便利
box-sizingは全称セレクタへの指定がおすすめ
まとめ

box-sizingとは？

box-sizingは要素のwidth(幅)とheight(高さ)に、paddingとborderのサイズを含めるかどうかを指定するCSSプロパティです。

指定する値には以下のものがあります。

値	指定内容
content-box(初期値)	paddingとborderを要素のwidthとheightに含まない
border-box	paddingとborderを要素のwidthとheightに含む
inherit	親要素の指定を引き継ぐ

box-sizingを指定していない初期状態ではcontent-boxが指定されているため、paddingとborderは要素のwidthやheightに含まれません。一方、border-boxを要素に指定すると、paddingとborderは要素のwidthとheightに含まれます。

ここまでの解説で、box-sizingについてなんとなく理解していただけたのではないでしょうか。ただしbox-sizingの理解をより深めるためには、ボックスモデルの概念を学ぶ必要があります。

box-sizingの理解に欠かせないボックスモデルの概念

box-sizingの理解を深めるためには、ボックスモデルの概念を知る必要があります。ボックスモデルとは「HTMLにおける全ての要素は四角い箱の中に収められている」という考え方です。

下の図をご覧ください。

HTMLの要素は4つの領域を持っています。

表示領域
要素の内側の余白（padding）
要素の外側の余白（margin）
paddingとmarginの境界線（border）

4つの領域のうちmarginについてはbox-sizingとは直接関わりがないため、この記事では触れません。しかし、margin・paddingの違いも押さえると、ボックスモデルの理解もより深まります。

margin・paddingの違いを知りたい方はこちらの記事をご覧ください。

【CSS】marginとpaddingの違いを初心者向けに丁寧に解説

この記事を読むとボックスモデルの概念が正確につかめるため、box-sizingも理解しやすくなります。

ボックスモデルを使ってbox-sizingを解説

ボックスモデルを使って、box-sizingをもう少し深掘りして解説します。

content-box

box-sizing: content-box;の状態では、要素のwidthとheightにpaddingやborderのサイズは含まれません。

ボックスモデルに当てはめると以下のようになります。

border-box

box-sizing: border-box;の場合、要素のwidthとheightにpaddingやborderのサイズが含まれます。

ボックスモデルに当てはめると以下のようになります。

要素のwidthとheightの中に、paddingとborderが押し込まれるような形になります。

content-boxとborder-boxを横並びで比較してみましょう。

このように要素のwidthとheightを同じにしても、content-boxよりborder-boxを指定した方がpaddingとborderのサイズ分だけ小さく見えます。

box-sizingの使い方

box-sizingの使い方を紹介します。

以下のように、width400pxのdiv要素を2つ用意しました。

<div class="container">
  <p class="container-text">content-box</p>
</div>
<div class="box">
  <p class="box-text">content-box</p>
</div>

.container, .box　{
  width: 400px;
  margin: 20px;
  padding: 20px;
  border: #ffbb1E 10px solid;
}

.container-text, .box-text　{
  font-size: 24px;
  text-align: center;
  font-weight: bold; 
}

上下のdiv要素には共に初期値のcontent-boxが効いた状態になっています。ここでdiv要素「box」のみ、box-sizing: border-box;を指定します。

<div class="container">
  <p class="container-text">content-box</p>
</div>
<div class="box">
  <p class="box-text">border-box</p>
</div>

.container, .box {
  width: 400px;
  margin: 20px;
  padding: 20px;
  border: #ffbb1E 10px solid;
}

.container-text, .box-text {
  font-size: 24px;
  text-align: center;
  font-weight: bold; 
}

.box {
  box-sizing: border-box; /*div要素boxのみborder-boxを指定*/
}