【CSS3】box幅の計算がものすごく楽になる「box-sizing」というプロパティの使い方

CSS3で追加されたbox-sizingというプロパティを使うと、煩わしい横幅の計算がグッと楽になります。 説明するより実際に挙動を見たほうが分かりやすいと思うので、デモを用意しました。

Demo

Sample_1の幅が240pxなのに対し、Sample_2の幅は200pxとなっています。 同じクラスを使い回しているのに、box-sizingの値をborder-boxに変えただけでボックスサイズ変わりましたね！

通常、要素の幅はwidthにpaddingとborderの幅を足したサイズになりますが、box-sizingにborder-box;を指定すると、widthに指定した幅がそのまま要素の幅になります。 つまり、paddingとborderの幅を考えてwidthの値を決める必要がありません。この計算が地味にめんどくさかったので、これは楽チン！

ブラウザの対応状況

CSS3といえば気になるのがブラウザの対応状況ですが、box-sizingに関しては特に心配する必要はありません。あのIE8ですらベンダープレフィックス無しで動作します。
IE7以下だと動かないみたいですが、今時そんな古いブラウザまで考慮するのも馬鹿馬鹿しいので…

とにかく、使いたい人はどんどん使っていきましょう！

追記

どうやらAndroidの場合はベンダープレフィックスを付けないと動かないみたいです。
スマートフォン用のCSSでは、こんな感じでベンダープレフィックス付きの記述も併記したほうが良さそうです。