A Web Design Community curated by Chris Coyier.

CSSにおけるボックスモデルの理解はWebページを制作する上で要求される欠かせない能力のひとつ。CSSボックスモデルへの理解が甘いと、崩れた表示になったり、崩れを直すために実施した指定がブラウザの幅の変更時にデザインを崩すという状況を生み出す。

CSSボックスモデルの理解に役立つ記事と、px指定とパーセント指定を組み合わせた場合にデザインを崩すことなく使えるようにするためのCSS3プロパティの話がCSS-TricksにBox Sizingとして掲載されている。基本的なボックスモデルの話から、最新の解決方法までが簡潔にまとまっており参考になる。紹介されている内容は次のとおり。

1. width、padding、borderとCSSボックスモデル

CSSのボックスモデルは、widthがボックスの横幅、paddingとborderはwidthのさらに外側に回り込むように展開される。この場合、見た目のボックスの幅は広がることになる。

2. IE6およびquirksモードのボックスモデル

IE6およびそれ以前のIEで、quirksモードで動作している場合には、CSSのボックスモデルが異なっている。widthがボックスの横幅、paddingとborderはwidthの内側に展開される。この場合、見た目のボックスの幅はそのままのサイズで変わらないことになる。これを回避してCSSのデフォルトのボックスモデルで動作させるには、DOCTYPEを適切なものに設定してquirksモードに入らないようにすればいい。

3. ネストdivと100% width

divの中にdivがあるような場合、内側のdivでpaddingおよびborderを指定すると、widthの幅が自動的に縮まり、width、padding、borderの合計値が外側のdivの幅に合うようになる。ここで内側のdivのwidthに100%を指定すると、内側のdivが外側のdivを超えてはみ出ることになる。ここでの素直な解決方法は、内側のdivのwidthに100%は指定しないようにするというもの。

4. textareaと100% width

textareaではwidthを100%などのパーセント指定にすれば、ブラウザの幅に合わせてサイズが変わるテキストエリアを実現できて便利。しかし、往々にしてうまくいかない。widthを100%にすれば前述したdivと同じ問題が発生する。かといって最終的に幅が揃うように、たとえばpaddingとborderを固定px値にして、widthを94%などの値にする方法もあるが、この方法ではブラウザの幅が変わるとデザインが徐々にずれるという問題がある。

5. box-sizing: border-boxと100% width

こうした問題を解決し、width 100%を指定した場合でもデザインが崩れないようにするためのプロパティがCSS3に導入されている。box-sizingがそれだ。デフォルトではcontent-boxが指定されているが、これをborder-boxに設定すると、IE6におけるquirksモードのようにpaddingとborderが内側に展開されるようになる。このため、デザインを崩さずにpaddingとborderを導入したデザインが可能になる。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>textarea 100% issue demo</title>
  <style type="text/css">
    body { background: #ccc; }
    #area { width: 80%; padding: 20px 20px; background: white; margin: 0 auto; }
    textarea { width: 100%; padding: 10px; border: 3px solid #999; margin-bottom: 20px; }
    textarea#hack { width: 94% }
    textarea#fix {
      -webkit-box-sizing: border-box; /* Chrome, Safari */
      -moz-box-sizing: border-box;    /* Firefox */
      box-sizing: border-box;         /* IE8+, Opera */
    }
  </style>
</head>
<body>
  <div id="area">
    <textarea rows="5" cols="5">widthに100%を指定、パディングとボーダーも指定。はみ出る。</textarea>
    <textarea id="hack" rows="5" cols="5">widthに94%を指定、パディングとボーダーも指定。左右サイズの変更でデザインが崩れる。</textarea>
    <textarea id="fix" rows="5" cols="5">box-sizingにborder-boxを指定、widthに100%を指定、パディングとボーダーも指定。デザインは崩れずに保たれる。</textarea>
  </div>
</body>
</html>

widthを94%に指定したtextareaのデザインは問題がないようにみえるが

ブラウザの幅を変更するとデザインが崩れ始める

box-sizing: border-boxを指定したtextareaはどのサイズでもデザインが崩れない

上に掲載したデモはBox Sizingに掲載されているデモを参考に、必要になる部分だけを簡単にまとめたもの。box-sizing: border-boxを指定したtextareaはデザインが崩れることなく描画されることを確認できる。