レスポンシブデザインに便利！今さらCSS3のbox-sizingについて話してみます

以前「初めてスマートフォン専用ページを作成する際に知っておきたいポイント｜Webpark」という記事を書いたときに、スマホ用サイトを作るときにbox-sizingが便利という内容を書きましたが、スマホ用だけでなくレスポンシブなサイトにも便利です。

box-sizingとは

box-sizingの値には「content-box」「border-box」「inherit」があります。content-boxは初期値で、要素の大きさを、width、padding、borderで計算されます。

今回便利というのborder-boxを使った場合です。border-boxを指定すると、要素全体の大きさが、widthの値となります。paddingやborderの値が何であろうと要素全体の横幅はwidthの値となります。画像で説明するとこんな感じです。

ちなみにinheritだと親要素の値を引き継ぐことになります。

なぜ便利なのか

最近はレスポンシブなウェブサイトが主流になってきていますので、要素の横幅をパーセントで指定することが多いと思います。

例えば幅が60%と40%のボックスを横に並べてコンテンツを横いっぱいに表示するとします。

.left-box { float: left; width: 60%; }
.right-box { float: left; width: 40%; }

これらの要素にpaddingもほしい場合があるとします。

.left-box { float: left; width: 58%; padding: 1%; }
.right-box { float: left;　width: 38%; padding: 1%; }

このようにpaddingをパーセントで指定すれば要素全体の幅は親要素の100%になります。

しかし、パーセントだとブラウザによって数値が大きく変わってくるので、paddingをpxやemで指定したい人の方が多いと思います。

borderの場合も同じです。paddingはともかく、borderをパーセントで指定する人はほとんどないと思います。ということでpaddingをピクセルで指定する場合を考えます。

.left-box { float: left; width: 58%; padding: 15px; }
.right-box { float: left;　width: 38%; padding: 15px; }

この場合、2つの要素全体の横幅は96%+60pxになり、100%を超える可能性があります。超えた場合2つ目の要素は回り込めなくなりますし、2つの要素の合計がぴったり100%になる可能性は限りなくゼロです。

ということで、paddingをピクセルで指定する場合、ボックスを入れ子にして中のボックスでpaddingを取る必要があります。

  
...


  
...

で、CSSはこんな感じにします。

.left-box { float: left; width: 60%; }
.left-box-in { padding: 5px; }
.right-box { float: left; width: 40%; }
.right-box-in { padding: 5px; }

当然これでいいわけですが、ボックスが何重にもなると見にくいしめんどくさいです。そんなときにbox-sizingです。入れ子にしなくても実現することができます。

.left-box { float: left; width: 60%; padding: 15px; box-sizing: border-box; }
.right-box { float: left;　width: 40%; padding: 15px; box-sizing: border-box; }

シンプルですし、計算する手間もいらないので使い勝手がいいですね。

IE6みたい

少し話はそれますが、box-sizing: border-boxによる計算方法はまさにIE6です。

今は昔、IE6を考えてウェブサイトを作る必要があった時代、widthとpaddingやborderを同時に指定するのはご法度でした。ボックスの計算方法がIE6とその他のブラウザでは違う（IE6の解釈がおかしい）ため、カラム落ちを起こしたり問題が多かったからです。

そんなIE6の計算方法が今になって見直されるのは不思議な感じです。

実装方法について

セレクタごとにbox-sizing: border-boxは面倒ですし、使う使わないはサイト全体で統一しておいた方がよいでしょう。ということで、以下のブログでユニバーサルセレクタを使う方法をおすすめしています。

ちなみにFTWはFor The Winの略で「これで決まり」という感じらしいです。といことで、次のように指定する方法で決まりということです。

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

webkit系の最新バージョンだとベンダープレフィックスなしで大丈夫だと思います。

ユニバーサルセレクタを使うと読み込み速度に影響を与えるため抵抗がある方もいると思います。このブログでは「foo > *」のように使うのはよくないですが、* だけだと影響は少ないとのことです。

もちろん影響がないわけでもありません。しかし、CSS、jsなどの外部ファイルや画像を圧縮するなどもっと前にすることがたくさんあります。Page Speedで90点未満であるようならセレクタの高速化を考えるのは時期早々とのことです。

まとめ

とても便利なbox-sizingですが、IE7を考慮するとbox-sizingは使えません。

IE7は気にしなくていいという場合は積極的に使っていきたです。このあたりはサイトによって対応が変わってくるかと思います。ここブログだとIE7は1%を切っていますので気にする必要もないと思いますが、サイトによっては無視できない数である場合もあります。

IE7を考慮した場合の使い方としては、980px以上のPCを対象にする場合はレスポンシブにせず絶対値で横幅を指定し、タブレット以下の小さいディスプレイを対象にした場合にbox-sizing: border-boxを指定してレスポンシブにするというのもいいかもしれません。

ということでbox-sizingについて色々書いてみました。対応については絶対的な答えはないと思いますが、何かの参考になればうれしいです。