2017/10/23スマホサイト作ってるとき、幅を画面いっぱいにしたいのにpaddingやmarginの数値がディスプレイ幅を超えちゃってはみでることがありますよね。最近まではきっちり計算してやってたんですが、box-sizingを使うだけでそんなことは何も考えないでも済むようになりますよ。LINKbox-sizingを使えばborderやpaddingを含めることができるスマホサイトを見ると横にずれるサイトたまにありますよね?パソコン用のサイトで言うと、2カラムで作っていてCSSいじったらサイドバーが急に落ちたり。いうときはだいたい幅の計算が間違ってます。borderの合計値がでかすぎるわけです。分かりやすいのはiPhoneのブラウザで見たとき。横にぐいっと指で押してみて少しでもずれたら計算が間違ってます。僕もよく計算間違うんですよ。原因がどこにあるのか探すのが大変で復旧に時間かかるんですよね。めんどうすぎるのでbox-sizingを使うようになりました。box-sizingの使い方box-sizingを使う時、下記の3パターンのいずれかになると思います。class指定して局所的に適応すればおっけーですね。記述例はこんな感じです。border-box;}【追記:2017/07/29】ベンダープレフィクスはもう使わなくて良いと思います。最後にこれで計算が楽になりました。いまのところbox-sizingを使わない理由は見つかってないんですけど、もしデメリットがあれば教えてください。WEBサイトの制作や管理、WEBサービスの運営、iPhoneアプリ開発などをやってます。chord」のギタリストで曲も作ったりしてます。青春高校3年C組がついにメジャーデビュー!「君のことをまだ何にも知らない」は3Cの生徒のことを知らない人に聴いてほしい曲!音楽モーニング娘。Macなどのコンピューター系の話題など、WEBデザイナーの管理人が気になった情報を発信しているブログです。株式会社ondoホームカテゴリ。