【CSS】box-sizingとは？レイアウトが崩れる原因と解決方法を解説

CSSで幅を指定しているのに、このような経験はありませんか？

• なぜか要素がはみ出す
• paddingを入れたらレイアウトが崩れた
• 思ったサイズより大きくなる

私もカードレイアウトを作っていたときに、widthを指定しているのに要素が横にはみ出してしまい原因が分からず困ったことがありました。

この原因は box-sizing の設定にあります。この記事では、box-sizing の仕組みと、レイアウト崩れを防ぐ方法を初心者向けに解説します。

box-sizingとは？レイアウトが崩れる原因

box-sizing は「幅や高さの計算方法」を決めるCSSプロパティです。

デフォルトは次の状態です。

box-sizing: content-box;

これは、widthは「中身（content）のサイズだけ」という意味です。つまり padding や border は width に含まれません。

なぜレイアウトが崩れるのか

例えば次のようなコードを見てみます。

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid #000;
}

この場合、実際の見た目の幅はこうなります。

• width：200px（中身）
• padding：左右40px
• border：左右10px

結果として 200px + 40px + 10px = 250px

になり、親要素からはみ出す原因になります。

content-boxとborder-boxの違いを実例で比較

See the Pen Untitled by kotetsu (@zupshihe-the-encoder) on CodePen.

左がデフォルトの content-box、右が border-box です。
ブラウザ幅によっては、左の要素の方が大きく見えることが分かります。
border-box を指定すると、paddingやborderを含めて200pxに収まるため、レイアウト崩れを防ぐことができます。

実務ではどう使う？全体にbox-sizingを指定する理由

この問題を解決するのが border-box です。

.box {
  box-sizing: border-box;
}

これを指定すると、

widthの中に padding と border も含めて計算されるようになります。この設定をすることで、

• スマホ対応が安定する
• 幅計算がシンプルになる
• レイアウト崩れを防げる

というメリットがあります。

便利ですが、知らずに使うと

• 幅の計算方法が変わる
• 古いコードと混在すると混乱する

ことがあります。そのためCSSの基本として理解しておくことが大切です。

まとめ

box-sizing はCSSのレイアウト計算方法を決める重要なプロパティです。

デフォルトの content-box では padding や border が幅に含まれないため、レイアウト崩れの原因になります。

一方で border-box を使うことで、指定した幅の中にすべて収まるようになり、安定したレイアウトが作れます。