【CSS】box-sizingの使い方をわかりやすく解説。要素の幅の算出方法をマスターしよう！

box-sizingとは？

box-sizingとは、CSSのプロパティの１つで、HTML要素の表示領域（高さや横幅）の算出方法を指定するプロパティです。

簡単に言うと、どこまでwidthやheightの範囲に含めるかということを決めるためにbox-sizingを指定します。

特に初心者のうちはあまりピンとこないかもしれませんが、実はコーディングをする上でbox-sizingを指定してあげることはとても重要なことになります。

box-sizingの使い方は一度覚えてしまえば、これから先ずっと便利に使用することができるので、ぜひ本記事でbox-sizingについてマスターしてください。

box-sizingの対応ブラウザ

本記事執筆次点でのbox-sizingの対応ブラウザは以下の通りです。

＞Can I use

基本的にどのブラウザでも対応しているため、気兼ねなくbox-sizingを使用することができますね。

box-sizingに指定する値

box-sizingに指定できる値は以下の２つです。

• content-box（初期値）
• border-box

（親の値を引き継ぐinheritも指定できますが、ここでは省きます。）

初期値（何も指定しない場合）は、content-boxを指定した時と同じ挙動になります。

つまり、box-sizingを指定するときはborder-boxを指定したい時のみ、ということになりますね。

box-sizing: content-box;

box-sizingの値がcontent-box（初期値）の場合、paddingとborderを要素の高さや横幅に含めません。

box-sizing: content-box; を指定する場合、borderがなければ、要素の幅（高さ）とpaddingが100%になるように計算すれば表示上問題ありません。

しかし、borderの幅を考えると要素の合計の幅（高さ）を100％にすることが難しく、表示崩れが起きる可能性が高まります。

box-sizing: border-box;

box-sizingの値がborder-boxの場合、paddingとborderを要素の高さや横幅に含めます。

borderとpaddingのサイズに関わらず、paddingやborderを含めた要素の高さや横幅がheightやwidthの値となるため、要素の合計の幅（高さ）を100％にすることが容易で、計算の手間も少なくてすみます。

box-sizing: border-box; が便利！

一般的に、HTMLコーディングを行う上ではbox-sizing: border-box; が便利なので、ほとんどのケースでbox-sizing: border-box; を指定した上でHTMLコーディングを行います。

box-sizing: border-box; を指定してあげることで幅の計算が圧倒的に楽になりますし、レスポンシブに対応しようとするとpaddingを％で指定することも少なくないため、おすすめです。

とりあえず、box-sizing: border-box; を指定する。コーディングをする上で絶対にやるべきことの一つです。

box-sizing: border-box; を全要素に適用しよう

基本的にCSSでは、指定値やデフォルトでの設定がなければ、親要素のCSSを引き継ぐようになっていますが、box-sizingについては親要素の値を引き継がない仕様となっています。

なので、全ての要素にbox-sizing: border-box; を指定するように注意しましょう。

全ての要素に同じCSSを指定したい場合は「*（アスタリスク）」をセレクタにして、CSSを指定してあげると良いです。

念のため、「::before」や「::after」といった擬似要素にもbox-sizing: border-box; を指定してあげると間違いなしです。

コピペ用サンプルコード

*, *::before, *::after {
  box-sizing: border-box;
}

box-sizingが効かない時は

「box-sizingを指定したけど、効かないよ〜。。」

もしかしたら、ブラウザが古くてうまく対応できていないのかもしれません。

そんな時には、ベンダープレフィックスを付けてみましょう。

ベンダープレフィックスとは、「-webkit-」「-moz-」「-o-」「-ms-」などの識別子のことです。

「box-sizing: ~」だけでなく、同時に「-webkit-box-sizing: ~」や「-moz-box-sizing: ~」なども指定することでbox-sizingが効かない問題を解決できるかもしれません。

*, *::before, *::after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
}