こんばんは！最近スマホサイトを持つことが当たり前になってきていますが、みなさまいかがですか？
スマホサイトを構築する際、要素を横並びにしたりする場合があると思うのですが、 なんか意図しない感じで隙間ができてしまう。 横幅ピッタリで4個要素を入れたい！ なんていう場合が想定出来ると思います。
そんな時に便利なCSS「box-sizing」についてご紹介したいとおもいます。
box-sizingとは？
box-sizingはボックスサイズの算定方法を指定できるCSS3のプロパティです。比較的新しい要素ですね。
- content-box パディングとボーダーを幅と高さに含めない（初期値）
- border-box パディングとボーダーを幅と高さに含める
- inherit 親要素の値を継承する
例えばどんな感じでつかうか？
具体的にどういうことかというと、 例えば
- リストタグを横に4つ並べたい
- 横幅ピッタリにしたい
- 余白を少し加えたい（1%ほど）
この条件の場合通常だとどのように書くかというと
[html]<ul><li>①</li>
<li>②</li>
<li>③</li>
<li>④</li>
</ul>[/html]
[css] li{
width:23%;
padding:1%;
float:left;
}
[/css]
（CSSの細かい指定は今回省きます。） と書くかと思います。width:23%;、padding:1%;この2つの部分がポイントで、本当は横幅25%で指定したいのですが、余白もつけたいので余白のpadding分を差し引いてwidthを23%とします。 23% + 1% + 1% = 25% これで合計25%となり、うまく横に4つ並べることができます。 まあこの書き方だったら全然問題ないのですが・・・ こうなるとどうでしょう？
boaderをつける
上記要素に1pxのboaderを付けたいとします。 するとboaderの1px（左右で2px）が横幅に加わるようになり、一気にややこしくなります。
[css]li{width:23%;
padding:1%;
float:left;
border:1px solid #ddd;
}
[/css]
25% + 2px ！！ こうなると横のサイズが25％よりも大きくなってしまうので、横に4つ並べることができなくなってしまいます。
そんな時に便利なのがbox-sizing
冒頭でも話したとおり、box-sizingは要素のサイズ構成を指定する要素。具体的にはどのようなことが出来るかというと、
[css]box-sizing :border-box;[/css]
border-boxを記述することによって、パディングとボーダーを幅と高さに含めることができるようになります！ ですので具体的にコードを書くと
[css]li{width:25%;
padding:1%;
float:left;
border:1px solid #ddd;
box-sizing :border-box;
}
[/css]
こんな感じ！boaderの太さを10pxにしようと横に4つ並べることが出来るようになります。
そんなこんなでまとめ
足早にみていきましたが、box-sizing、CSS3の要素となるのですべてのブラウザで使うことはできませんが、スマホサイトなら積極的に使っていけると思いますので、知らなかった方はぜひお試し下さい。
