魔法のCSSタグその1 border-box

CSSのプロパティには、まるでドラえもんのポケットから出てきたのではないか!と思うぐらい凄いのがあります。
私が一番魔法のようだと思っているのはclearfix。そう困った時のclearfixなのです。

これも魔法みたいなborder-box

さて、今回はレスポンシブサイト作りでも必須のborder-boxを紹介します。
レスポンシブサイトを作ると こんな多用する魔法のプロパティが増えます。

私がよく使うのは box-sizing:border-box; です!

box-sizingとは要素のサイズを算出する方法を指定する事ができるのです。

例えばボックス要素の全幅が100pxだとして そこにボーダーを1px paddingを5pxとかつけると、計算をしてwidthは88pxに指定しないとなりません。

通常のサイズならばこれでも良いのですが
pxをあまり使わないレスポンシブサイトの場合は大変。そこで登場するのがborder-boxなのです。
border-boxを使うとボーダーを付けようがpaddingをつけようが、勝手に計算してくれるのです。
例えば幅50%に対してpaddinが2% ボーダーが2pxとかの設定でもborder-boxを付ければwidthの指定は50%のままでいいのです。

■ 一応他ブラウザのハック