レスポンシブWebデザインに使うグリッド・システムには、box-sizing: border-boxがいいんじゃなかろうか？

可変する（リキッド・レイアウト）グリッド・システムを構築する際の悩みは、計算が面倒なことです。たとえば、12カラムでグリッド間の空き（ガッターサイズ）がグリッドの左右それぞれで14pxのグリッド・システムを作るとします。その際、以下のような計算が必要になります。

12カラム・グリッドのパーセント値の計算

グリッドの基本設定を以下のようにするとします：

• 12カラムのグリッド・システム
• 基準となる幅: 1140px
• ガッターサイズ: 左右各14px

まずは1カラムのサイズを計算します。

基準となる幅を12分割

1140px ÷ 12 = 95px

そこからpadding（ガッターサイズ）分を引く

95px – 14px * 2 = 71 67px

幅のパーセント値を計算

71 67px ÷ 1140px = 6.2280702 5.877193%

※MAOさんにご指摘いただき、上記の計算が間違っていたのを修正しました（2014/02/14）

次に、2カラムのサイズを計算します：

190px – 14px * 2 = 162px
162px ÷ 1140px = 14.210526%

次に、3カラム…と、これを12カラムまで計算します。

そして、先日書いた「各ブラウザの小数点以下のピクセル値の扱い」の違いに対応するために、IE向けにこれを12回やり直す…。

かなり面倒ですね。

「システム」を作っているので、そうそうこの計算を変える必要はないと思いたいですが、たとえば違う案件で、デザインのサイズ間が多少ことなり、ガッターサイズを少し大きくしたくなったとします。そうすると、再度この計算をすべてやり直さなくてはならないんですね。他にもプロトタイプを作る際に、何度もガッターサイズを変更することが想定できます。

これ、どうにかできたら嬉しいですよね？

そこで出てきたのがCSSのbox-sizingというプロパティ。

HTML5BoilderplateやModernizrでおなじみ、Paul Irish氏が彼のブログの「* { box-sizing: border-box } FTW （2012年2月1日）」という投稿で、すべての要素にこのbox-sizing: border-boxを指定することを推奨しています。レスポンシブWebデザインでリキッド・レイアウトのより柔軟なグリッド・システムが必要とされるいま、再度見直されるべきプロパティのようにも思えます。

※かつてIE7対応などに使われていたこともあったそうです。
※ちなみにFTWはfor the winの略だそうです。

計算が面倒な理由

さて、Paul氏が彼のブログで言っているように、この計算が面倒な原因の一つはCSSのボックスモデルにあります。CSSボックスモデルだと、たとえば<div>でボックスを作る際の全体幅は以下のような計算になります。

ボックスの幅 = width + padding + border

画像: CSS-Trickより

では、box-sizing: border-boxを使うとどうなるのか？

ボックスの幅 = width

これ、グリッド・システムを作る際にはすごいシンプルでいいですよね？
では、先ほどの計算をbox-sizing: border-boxを使って行ってみます。

1カラムの幅：

100% ÷ 12 = 8.33%

box-sizing: border-boxにすると、widthにはpaddingが含まれないためガッターサイズとは独立します。そのため上記のように計算が至極シンプルになります。

ブラウザの対応は？

box-sizingプロパティのブラウザ対応状況はこちらで紹介されている通りです。

まとめると：

• IE6、IE7ではサポートされていない
• IE8以下では、DOCTYPEの宣言がないと動かない
• Firefoxでは-moz- prefixが必要
• iOS 4以下、Android 2.3以下では-webkit- prefixが必要

IE6、IE7の対応が必要な場合は個別のCSSで対応するとして、昨今のモダン・ブラウザでのサポートは問題なさそうです。

IE6、7対応にDOCTYPEの前にコメントを入れるハック

Paul氏の記事のコメントにDOCTYPEの前にコメントを入れれば互換モードになるため、同じボックスモデルになるというコメントも入っていましたが、予期せぬことが起こりそうなので、あまり使いたくないハックです。

ガッターサイズは中の要素に設定しては？

その他にも、ガッターサイズはグリッド自体に設定するのではなく、中の要素に設定すれば良いというコメントがありましたが、グリッドに入る可能性のあるすべての要素にpaddingを設定するのも面倒な気がしなくもありません（もしかしたら、こっちのほうがクロスブラウザで、シンプルなのかもしれませんが）。

結局、こちらの幅指定のほうが直感的？

Paul氏曰く、この手法は安全に使えるし全要素（*）に指定してもパフォーマンスの問題もないとのこと。実は、このボックスモデルはIE5.5以前での仕様なので、ちょっと皮肉な感じもありますが、リキッドなグリッド・システムを使用するウェブサイトを制作する場合、デフォルトでbox-sizing: border-boxにするのが、メリットありかもしれません。そもそも、こっちの幅指定のほうが直感的な気がしてきましたし。。。

【宣伝】レスポンシブWebデザインについての本を書きました

[追記: 2013/1/4]

レスポンシブWebデザインに関する本「レスポンシブWebデザイン 制作の実践的ワークフローとテクニック」を書きました。1年以上レスポンシブWebデザインで作ったウェブサイトを運営した経験から試行錯誤したことを1冊の本にまとめました。box-sizingの詳しい説明も掲載しています。良かったら立ち読みしてみてください。こちらで第1章の一部を公開しています。あと、本書の見どころ・読みどころをまとめたスライドを作ったので、良かったらあわせてご覧ください。

• 第1章の一部公開中
• 5分でわかる！ 本書の見どころ・読みどころ
• レスポンシブWebデザイン 制作の実践的ワークフローとテクニック （Amazon）

2012年6月10日に公開され、2014年2月14日に更新された記事です。

この記事をシェアする

• ツイート
• シェアする
• ブックマーク
• Pocketに保存