魔法のCSSタグその１ border-box
CSSのプロパティには、まるでドラえもんのポケットから出てきたのではないか！と思うぐらい凄いのがあります。
私が一番魔法のようだと思っているのはclearfix。そう困った時のclearfixなのです。
これも魔法みたいなborder-box
さて、今回はレスポンシブサイト作りでも必須のborder-boxを紹介します。
レスポンシブサイトを作ると こんな多用する魔法のプロパティが増えます。
私がよく使うのは box-sizing:border-box; です！
box-sizingとは要素のサイズを算出する方法を指定する事ができるのです。
例えばボックス要素の全幅が１００pxだとして そこにボーダーを１px paddingを５pxとかつけると、計算をしてwidthは88pxに指定しないとなりません。
|
1 2 3 4 5 6 7 |
全幅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%のままでいいのです。
|
1 2 3 4 5 6 7 8 |
border-boxを使用した例 #box { width:50%; border:2px solid #999; padding:2%; box-sizing:border-box; } |
■ 一応他ブラウザのハック
|
1 2 3 4 5 |
Firefox以外は普通に表示されていたので、ハックを使う場合は-mozだけで良さそうです。 -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; |
