CSSのbox-sizingプロパティの使い方

cssを記述していると、ボックスのwidthやheightといった値を編集することが必須になってくると思います。色々なプロパティを追加していくうちに、デザインが崩れてしまったり、表示が思い通りにならなくなったりしたことはないでしょうか?

この様な場合、ボックスのサイズを算出する方法が原因に考えられます。

そんな時に、(box-sizing)を使うと、簡単に問題を解決することができるのでご紹介します。

(box-sizing)プロパティの使い方

box-sizingプロパティとは、簡単に言うと、ボックスサイズの算出方法を指定できるプロパティです。

例えば、padding分、ボックスのサイズをマイナス計算するのを忘れ、レイアウトが崩れてしまうような場面でも、box-sizingを使うことで、そのような計算をする必要がなく、直感的にレイアウトを崩さず横幅と高さの指定が可能です。

box-sizingに指定できる算出方法の値

box-sizingに使用できる値は、以下の2つです。

・content-box  : paddingとborderを要素の大きさに入れない
・border-box   : paddingとborderを要素の大きさに入れる

この2つを利用して、ボックスサイズの計算方法を指定します。

box-sizing用のクラスを作る

一般的な方法としては、別にbox-sizing用のクラスを作ってしまって、box-sizingを使いたい時に、要素に指定するというものです。全ての要素に適用してしまいたい場合は、全称セレクタに対して記述してしまっても良いでしょう。


イベント