box-sizingは要素のwidth(幅)とheight(高さ)に、paddingとborderのサイズを含めるかどうかを指定するCSSプロパティです。
CSSでレイアウトを調整する際、paddingやborderの部分だけ要素がはみ出たり、ずれたりするケースがあります。主な原因の一つに挙げられるのが、box-sizingプロパティの指定の仕方です。
この記事では、border-boxとcontent-boxの違いや使い方、効かない時の対処法までをわかりやすく解説します。
- box-sizingの働き
- box-sizingの使い方
無料で30日間、Web制作が学べる『ZeroPlus Gate』
プログラミングに関する質問をエンジニアへ「し放題」のサービス！
- Web制作に特化したカリキュラム
- 自分のペースで50本以上の動画教材で学べる
- あなた専属のメンターと作る、あなただけの学習ロードマップ
- 30日間、回数無制限でエンジニアに質問可
目次
box-sizingの理解に欠かせないボックスモデル
まず押さえておきたいのが、HTML要素がCSSによってどのように表示されるかを決める「ボックスモデル」です。
以下のようにブラウザは、HTMLのすべての要素を「四角い箱」として扱います。
このようにHTMLの要素は4つの領域を持っています。
- 表示領域
- 要素の内側の余白（padding）
- 要素の外側の余白（margin）
- paddingとmarginの境界線（border）
上記のうちmarginについてはbox-sizingとは直接関係がないため、この記事では触れません。
marginとpaddingの使い分けが苦手な方は以下の記事でしっかりと理解しましょう！！
参考記事【CSS】marginとpaddingの違いを初心者向けに丁寧に解説
box-sizingは要素のサイズ計算を制御するプロパティ
box-sizingは、ボックスモデルにおける「どこまでをwidth・heightとして計算するか」を決めるCSSプロパティです。要素のwidth(幅)とheight(高さ)に、paddingやborderを含めるかどうかを指定できます。
値 | 指定内容 |
border-box | paddingとborderを、要素のwidthとheightに含む |
content-box(初期値) | paddingとborderを、要素のwidthとheightに含まない |
inherit | 親要素の指定を引き継ぐ |
それぞれの値についてボックスモデルを使いながら詳しく解説します。
border-box：paddingやborderを含める
box-sizing: border-box;の場合、要素のwidthとheightにpaddingやborderのサイズが含まれます。
要素のwidthとheightの中に、paddingとborderが押し込まれるような形になります。
要は、widthを指定しても、paddingがあると表示領域は小さくなるよということですね！
content-box：要素のwidthとheightにpaddingやborderのサイズを含めない
初期値であるbox-sizing: content-box;の状態では、要素のwidthとheightにpaddingやborderのサイズは含めません。
content-boxとborder-boxを横並びで比較してみましょう。
このようにwidthとheightが同じでも、content-boxよりborder-boxを指定した方が、paddingとborderのサイズだけ要素が小さく表示されます。
content-boxは「widthを指定しても、paddingを増やすと全体の幅も広がる」という挙動です。
inherit：親要素の指定を引き継ぐ
box-sizing: inherit; は、親要素に設定されたbox-sizingをそのまま引き継ぎます。全体で統一したい場合や、部分的に変更を避けたいときに使われます。
box-sizingの使い方
box-sizingの使い方を紹介します。以下のようにwidth400pxのdiv要素を2つ用意しました。
See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
上下のdiv要素には共に、初期値のcontent-boxが効いた状態になっています。
ここでdiv要素「box」にのみ、box-sizing: border-box;を指定します。
See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
border-boxを指定したdiv要素「box」のみ、width400pxの中にpadding・borderのサイズが含まれて表示されました。
box-sizing: border-box;はレスポンシブ対応に便利
box-sizing: border-box;は、レスポンシブ対応が必要なサイトで便利です。事例として3つのボックスが横並びになっているレイアウトを使います。
このようにボックスにwidth30%を指定すると、どの端末で見ても画面幅に対して30％の幅で3つ並んで表示されます。しかし、paddingやborderを要素へ指定すると、content-boxとborder-boxでは表示のされ方に明確な違いが発生します。
content-boxの場合はwidth30%とは別にpaddingとborderの幅が取られるため、画面幅が狭まったときに、要素同士が重なってしまうことがあります。
一方、border-boxを要素に指定した場合は、要素のwidth30％の中にpaddingとborderのサイズが含まれるため、レイアウトは崩れません。よってレスポンシブ対応では、border-boxを使うのが一般的です。
box-sizingは全称セレクタへの指定がおすすめ
現在のWeb制作においては、レスポンシブ対応を求められるケースが大半です。要素ごとにbox-sizingのルールが異なるとレイアウトが組みづらくなるため、以下のように全称セレクタ（*）への指定がよく使われます。
* {
box-sizing: border-box;
}全称セレクタに指定したスタイルは全ての要素に適用されるため、box-sizingが統一されレイアウトが組みやすくなります。
box-sizingが効かないときのチェックポイント4選
box-sizing: border-box;を指定したのに反映されないときは、次の項目を順に確認してみましょう。
- 他のスタイルで上書きされている
- セレクタの詳細度が負けている
- 疑似要素に指定していない
- 古いブラウザを使用している
それぞれの内容を確認していきましょう。
1. 他のスタイルで上書きされている
開発ツールで要素を確認し、box-sizingのプロパティに取り消し線がついていないかチェックしましょう。もし別のCSSで後から同じ要素に指定されている場合、そのスタイルが優先されます。
開発ツールの使い方については以下の記事で詳しく解説しています。
2. セレクタの詳細度が負けている
全称セレクタで box-sizing: border-box; を指定しているのに反映されない場合は、セレクタの詳細度（どのCSSルールが優先されるかを決める強さ）が負けている可能性があります。
たとえば、あとから読み込まれるCSSや、クラス・IDなどより強い指定で box-sizing: content-box; が上書きされていると、全称セレクタの指定は反映されません。
ブラウザの開発ツールで、どのスタイルが優先されているかを確認しましょう。もし不要な上書きが見つかった場合は、該当箇所を削除するか、必要に応じて border-box を再指定すると解決します。
セレクタの詳細度については以下の記事で詳しく解説していますので、合わせてお読みください。
3. 疑似要素に指定していない
::beforeや::afterなどの擬似要素は独立した要素として扱われるため、 親要素にbox-sizingを指定しても継承されません。疑似要素にも含めたい場合は、以下のように全称セレクタで一括指定するのが確実です。
*, *::before, *::after {
box-sizing: border-box;
}
4. 古いブラウザを使用している
主要なブラウザ（Chrome, Edge, Firefox, Safari）はすでにbox-sizingを標準サポートしていますが、古い環境（特にIE7以前）では非対応です。古いブラウザに対応する必要がある場合は、ベンダープレフィックスを併記しておきましょう。
*, *::before, *::after {
-webkit-box-sizing: border-box; /* 古いChrome・Safari用 */
-moz-box-sizing: border-box; /* 古いFirefox用 */
box-sizing: border-box; /* 現在の標準ブラウザ用 */
}ベンダープレフィックスについては以下の記事で詳しく解説していますので、合わせてお読みください。
box-sizingを使いこなしてレイアウト崩れを防ごう
box-sizingは要素のwidthとheightに、paddingとborderのサイズを含めるかどうかを指定するCSSプロパティです。指定する値と内容を以下にまとめます。
- contain-box：widthとheightにpaddingとborderのサイズを含めない
- border-box：widthとheightにpaddingとborderのサイズを含める
box-sizing: border-box;を指定すると、レスポンシブ対応の際にレイアウト崩れを起こしづらくなる。- box-sizingは全称セレクタに指定して、全要素に一括で指定するのが一般的
現在のWebサイト制作において、スマホの閲覧を想定したレスポンシブ対応はほぼ必須のため、border-boxを指定してからコーディングをはじめましょう。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
