CSSのbox-sizingとは？わかりやすく解説

2024年9月5日2024年9月10日

この記事にはPRが含まれます。

CSSでレイアウトを作っているときに、「あれ？設定した幅が思ったより大きいぞ？」なんて経験はありませんか？

原因の一つとしてよくあるのが、box-sizingというプロパティの使い方です。

box-sizingは、要素のサイズをどう計算するかをコントロールする大切なプロパティです。

これを正しく理解することで、デザインが思い通りにいかないイライラから解放されますよ。

この記事では、優しく、丁寧に、box-sizingの基本を一緒に学んでいきましょう！

おねしゃす

box-sizingとは？

まず、box-sizingは、

CSSで指定した要素のサイズ（幅や高さ）をどのように計算するかを指定するためのプロパティです。

要素のサイズは、

コンテンツ
パディング（内側の余白）
ボーダー（枠線）

によって決まります。

box-sizingを使うことで、この要素全体のサイズがどのように決まるかをコントロールできます。

CSSのデフォルト設定では、要素の幅や高さを指定すると、

パディングやボーダーはそのサイズに追加される形で計算されます。

これが、思っていたよりも大きな要素になってしまう原因です。

1. box-sizing: content-box;とは？

CSSのデフォルトの挙動は、box-sizing: content-box;です。

これは、指定した幅や高さはコンテンツ自体のサイズであり、

パディングやボーダーはそのサイズに追加されるという考え方です。

たとえば、次のようなスタイルを考えてみましょう。

HTML

<div class="box">コンテンツ</div>

CSS

.box {
  width: 200px; /* コンテンツの幅 */
  padding: 20px; /* パディング: 20px */
  border: 5px solid black; /* ボーダー: 5px */
}

ここでbox-sizing: content-box;の場合、実際の要素のサイズはどうなるでしょう？

コンテンツの幅：200px
パディング：20pxが左右に追加される（合計40px）
ボーダー：5pxが左右に追加される（合計10px）

つまり、要素の全体の幅は 200px + 40px + 10px = 250px になります。

2. box-sizing: border-box;とは？

一方、box-sizing: border-box;を使うと、

要素のパディングやボーダーも含めて、指定した幅や高さが全体のサイズとして計算されます。

これによって、デザインが思い通りにいかない問題を解消することができます。

先ほどと同じ例をborder-boxで見てみましょう。

.box {
  width: 200px; /* 全体の幅 */
  padding: 20px; /* パディング: 20px */
  border: 5px solid black; /* ボーダー: 5px */
  box-sizing: border-box; /* box-sizingをborder-boxに設定 */
}

今度はどうでしょうか？

コンテンツの幅は、パディングとボーダーを含んで200pxになるので、
- パディングが20pxずつ取られ、
- ボーダーが5pxずつ取られた残りの部分がコンテンツの幅になります。

これで、指定した幅200pxがそのまま要素の全体のサイズとして使われます。

border-boxを使うことで、ボックスのサイズが予想しやすくなり、デザインが崩れにくくなります。

3. どちらを使えばいいの？

box-sizing: content-box;（デフォルト）は、要素の中身（コンテンツ）だけの幅や高さを決めるのに便利です。

しかし、ボーダーやパディングが多く使われるレイアウトでは、

border-boxのほうが使いやすいことが多いです。

なぜなら、パディングやボーダーが含まれるため、サイズの計算がシンプルだからです。

実際、多くのデザイナーや開発者は、border-boxを使うことが多いです。

最近のプロジェクトでは、全体的にbox-sizing: border-box;を指定して、

要素のサイズを管理しやすくしています。

/* すべての要素に対してborder-boxを適用 */
* {
  box-sizing: border-box;
}

ここでは*で全ての要素を指定していますが、

恐らく実際の業務等では*で指定するなんてことはあり得ないと思います。

適切な範囲のクラスやidを指定して、スタイルを当てていくようにしましょう。

4. 実際に試してみよう！

それでは、実際にbox-sizingを使って、どのようにレイアウトが変わるのか試してみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>box-sizingの例</title>
  <style>
    .content-box {
      width: 200px;
      padding: 20px;
      border: 5px solid black;
      box-sizing: content-box;
      background-color: lightblue;
    }

    .border-box {
      width: 200px;
      padding: 20px;
      border: 5px solid black;
      box-sizing: border-box;
      background-color: lightcoral;
    }
  </style>
</head>
<body>
  <div class="content-box">content-boxの要素</div>
  <div class="border-box">border-boxの要素</div>
</body>
</html>

この例では、2つのボックスに異なるbox-sizingを設定しています。

content-boxは幅が実際に大きくなり、border-boxは指定した幅に収まっています。

ブラウザで確認すると、それぞれの違いが一目で分かるはずです。