box-sizingを使用するとレスポンシブ対応が必要なサイト制作において、コーディングがスムーズになります。しかしbox-sizingは、一見どんな働きをしているのか分かりづらいプロパティです。
そこで本記事ではbox-sizingの働きや使い方を解説します。最後までお読みいただきますと、box-sizingの働きを理解して使いこなせるようになるため、ぜひ参考にしてみてくださいね。
- box-sizingの働き
- box-sizingの使い方
無料でプログラミングの質問ができるサービス！30日間無料でWeb制作が学べるZeroPlus Gate
- Web制作に特化
- 50本以上の動画教材で学べる
- 30日間に4回の対面サポートがある
- Slackで質問し放題
目次
box-sizingの理解に欠かせないボックスモデルの概念
box-sizingを学ぶうえでは、先にボックスモデルについて理解する必要があります。ボックスモデルとは「HTMLの全ての要素は四角い箱の中に収められている」という考え方です。
下の図をご覧ください。
このようにHTMLの要素は4つの領域を持っています。
- 表示領域
- 要素の内側の余白（padding）
- 要素の外側の余白（margin）
- paddingとmarginの境界線（border）
4つの領域のうちmarginについてはbox-sizingとは直接関係がないため、この記事では触れません。
参考記事【CSS】marginとpaddingの違いを初心者向けに丁寧に解説
box-sizingは要素の幅・高さにpaddingとborderを含めるかどうかを指定するプロパティ
box-sizingは要素のwidth(幅)とheight(高さ)に、paddingとborderのサイズを含めるかどうかを指定するCSSプロパティです。指定できる値には以下の種類があります。
値 | 指定内容 |
border-box | paddingとborderを、要素のwidthとheightに含む |
content-box(初期値) | paddingとborderを、要素のwidthとheightに含まない |
inherit | 親要素の指定を引き継ぐ |
それぞれの値についてボックスモデルを使いながら詳しく解説します。
border-box：要素のwidthとheightにpaddingやborderのサイズを含む
box-sizing: border-box;の場合、要素のwidthとheightにpaddingやborderのサイズが含まれます。これを、ボックスモデルに当てはめると以下のようになります。
要素のwidthとheightの中に、paddingとborderが押し込まれるような形になります。
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のサイズだけ要素が小さく表示されます。
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;は、レスポンシブ対応が必要なサイトで便利です。
スマホなど画面幅の狭い端末でもレイアウトが崩れないよう、要素のwidthは基本的に%で指定するのが一般的です。サンプルとして3つのボックスが横並びになっているレイアウトを用意しました。
このようにボックスにwidth30%を指定すると、どの端末で見ても画面幅に対して30％の幅で3つ並んで表示されます。しかし、paddingやborderを要素へ指定すると、content-boxとborder-boxでは表示のされ方に明確な違いが発生します。
border-boxを要素に指定した場合は、要素のwidth30％の中にpaddingとborderのサイズが含まれるため、レイアウトは崩れません。一方、content-boxの場合はwidth30%とは別にpaddingとborderの幅が取られるため、画面幅が狭まった時に、要素同士が重なってしまうことがあります。
このように要素のサイズに対し％指定を使う際にborder-boxを指定すると、paddingやborderのサイズを変更しても要素のサイズは変更されません。
よって要素の％指定が必須のレスポンシブ対応では、border-boxを使うことが多くなります。
box-sizingは全称セレクタへの指定がおすすめ
現在Web制作においては、レスポンシブ対応が不可欠です。そのため要素ごとにbox-sizingのルールが異なるとレイアウトは組みづらくなるため、以下のように全称セレクタ（*）への指定がおすすめです。
* {
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だけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
