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

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

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

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

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

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

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

全幅100pxの時のCSS例

#box {
width:88px;
border:1px solid #999;
padding:5px;
}

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

border-boxを使用した例

#box {
width:50%;
border:2px solid #999;
padding:2%;
box-sizing:border-box;
}

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

Firefox以外は普通に表示されていたので、ハックを使う場合は-mozだけで良さそうです。
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
テーマのカスタマイズ等のご相談/お問い合わせはこちら
個人の方でもお気軽にご相談ください