cssを記述していると、ボックスのwidthやheightといった値を編集することが必須になってくると思います。色々なプロパティを追加していくうちに、デザインが崩れてしまったり、表示が思い通りにならなくなったりしたことはないでしょうか？
この様な場合、ボックスのサイズを算出する方法が原因に考えられます。
そんな時に、(box-sizing)を使うと、簡単に問題を解決することができるのでご紹介します。
(box-sizing)プロパティの使い方
box-sizingプロパティとは、簡単に言うと、ボックスサイズの算出方法を指定できるプロパティです。
例えば、padding分、ボックスのサイズをマイナス計算するのを忘れ、レイアウトが崩れてしまうような場面でも、box-sizingを使うことで、そのような計算をする必要がなく、直感的にレイアウトを崩さず横幅と高さの指定が可能です。
box-sizingに指定できる算出方法の値
box-sizingに使用できる値は、以下の２つです。
・content-box : paddingとborderを要素の大きさに入れない
・border-box : paddingとborderを要素の大きさに入れる
この２つを利用して、ボックスサイズの計算方法を指定します。
box-sizing用のクラスを作る
一般的な方法としては、別にbox-sizing用のクラスを作ってしまって、box-sizingを使いたい時に、要素に指定するというものです。全ての要素に適用してしまいたい場合は、全称セレクタに対して記述してしまっても良いでしょう。
