メモログ

Building a modern grid system | Tutorial | .net magazineにwidthをパーセントで指定したresponsiveなgrid（で、かつネストできてサイズの変更が簡単で…云々）を作成するという話が掲載されている。

このgridが便利かどうかは使ってみないとなんともですが、その中で紹介されているbox-sizingというプロパティが面白い（ずいぶん前からあるみたいですけど）。box-sizingではwidth/heightの数値にどの範囲までを含めるかを設定することができる（参照:box-sizing - MDN）。初期設定は標準モードで使われる「content-box（widthはコンテンツのエリアのみでpadding/border/marginは含まれない）」。これを「border-box」に設定すると、widthにpaddingとborderを含めることができる（IE6の互換モードと同じ）。

たとえば画像にborderで枠をつけつつ、横幅いっぱいに表示したいというときに、便利。content-boxのままだと、borderの1pxとかpaddingの幅をある程度考慮してwidthを調整しないといけなくなるけど、border-boxにしてしておけば

1
2
3
4
5
6
7
8
9

img.image-full{
  -moz-box-sizing: border-box;
  -webkig-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #ddd;
  padding: 5px;
  max-width: 100%;
}

みたいな感じで簡単に指定できる。IE8以降ではないと使用できないけど、IE7/6用のpolyfillが存在するので、IE6にも適用したい場合はそれを使うという手がある（試してないけど）。

responsiveなレイアウトではwidthには%が使われるので、border-boxを使うことでborderとpaddingを気にしなくて良いというのはそうとう便利な気がする（特にborderは%で指定できないのできびしい）。* { box-sizing: border-box } FTW « Paul Irishでは、さらに全称セレクタでborder-boxを指定するというアイデアが紹介されている（box-sizingの指定は継承されない）。