他の人が書いたコードに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は要素の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を指定*/
}
border-boxを指定したdiv要素「box」は、width400pxの中にpadding・borderのサイズが含まれて表示されました。
box-sizing: border-box;はレスポンシブ対応に便利
box-sizing: border-box;
は、レスポンシブ対応が必要なサイトの作成時に便利です。スマホのように画面幅の狭い端末で、レイアウト崩れの無いように要素を表示させるには、widthのサイズをpxではなく%で指定する場合が多いです。
サンプルとして3つのボックスが横並びになっているレイアウトを用意しました。
このようにボックスにwidth30%を指定すると、どの端末で見ても画面幅に対して30%の幅で3つ並んで表示されます。
ここでpaddingやborderを要素へ指定してみます。するとcontent-boxとborder-boxでは、以下のようにレイアウトに明確な違いが発生します。
border-boxを要素に指定した場合は、要素のwidth30%の中にpaddingとborderのサイズが含まれるため、レイアウトは崩れません。一方、contant-boxの場合はwidth30%とは別にpaddingとborderの幅が取られるため、レイアウトが崩れることがあります。
このように要素のサイズに対し%指定を使う際にborder-boxを指定すると、paddingやborderのサイズを変更しても要素のサイズは変更されません。
よって要素の%指定が必須のレスポンシブ対応では、border-boxを使うことが多くなります。
用語解説:レスポンシブ対応
パソコン・タブレット・スマホといった画面サイズの異なる端末でサイトを閲覧しても、レイアウト崩れしないようにコーディングすること。
box-sizingは全称セレクタへの指定がおすすめ
box-sizingは、以下のように全称セレクタ(*)への指定がおすすめです。
* {
box-sizing: border-box;
}
全称セレクタに指定したスタイルは、全ての要素に適用されます。要素ごとにbox-sizingのルールが異なるとレイアウトは組みづらくなります。そのため、全称セレクタにbox-sizingを指定する手法が、一般的によく使われます。
まとめ
box-sizingは要素のwidthとheightに、paddingとborderのサイズを含めるかどうかを指定するCSSプロパティです。
- contain-box:widthとheightにpaddingとborderのサイズを含めない
- border-box:widthとheightにpaddingとborderのサイズを含める
- box-sizingは全称セレクタに指定して、全要素に一括で指定するのが一般的
box-sizing: border-box;
を指定すると、レスポンシブ対応の際にレイアウト崩れを起こしづらくなります。現在のWebサイト制作において、スマホの閲覧を想定したレスポンシブ対応はほぼ必須となるため、border-boxを指定してからコーディングをはじめるとよいでしょう。
プログラミング学習でこのような経験はありませんか?
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。