スマホサイト作ってるとき、幅を画面いっぱいにしたいのにpaddingやmarginの数値がディスプレイ幅を超えちゃってはみでることがありますよね。
最近まではきっちり計算してやってたんですが、box-sizingを使うだけでそんなことは何も考えないでも済むようになりますよ。
box-sizingを使えばborderやpaddingを含めることができる
スマホサイトを見ると横にずれるサイトたまにありますよね？
パソコン用のサイトで言うと、2カラムで作っていてCSSいじったらサイドバーが急に落ちたり。
こういうときはだいたい幅の計算が間違ってます。
つまりwidth + padding + borderの合計値がでかすぎるわけです。
分かりやすいのはiPhoneのブラウザで見たとき。横にぐいっと指で押してみて少しでもずれたら計算が間違ってます。
僕もよく計算間違うんですよ。しかも原因がどこにあるのか探すのが大変で復旧に時間かかるんですよね。
で、めんどうすぎるのでbox-sizingを使うようになりました。
box-sizingの使い方
box-sizingを使う時、下記の3パターンのいずれかになると思います。
- box-sizing 用のクラスをつくる
- div などの主要なブロック要素のみ指定する
- ユニバーサルセレクタで全指定する
ユニバーサルセレクタで全指定してもさほど問題はなさそうですが、心配な方は主要なブロック要素のみ指定、さらに心配ならid, class指定して局所的に適応すればおっけーですね。
まぁこの辺はお好みで。
記述例はこんな感じです。
* {
box-sizing: border-box;
}
【追記：2017/07/29】ベンダープレフィクスはもう使わなくて良いと思います。
最後に
これで計算が楽になりました。
いまのところbox-sizingを使わない理由は見つかってないんですけど、もしデメリットがあれば教えてください。