ブラウザの設定を初期化させるCSSとチェックツール：いまさら聞けないCSS／スタイルシート入門（3）（2/2 ページ）

» 2008年11月14日 00時00分公開

[喜安亮介，有限会社タグパンダ]

ボックスモデルを理解する

　CSSを理解するための最も重要な概念の1つであるボックスモデルの概念を解説していきたいと思います。

　（X）HTMLのそれぞれの各要素は四角いボックス上の形で、Webブラウザ上にレンダリング（描画）されるようになっています。

　W3C提唱の標準化されたボックスモデルは、下図のような構造になっています。

　ちなみに、具体的なWebブラウザ「Internet Explorer（以下、IE） 7」「Firefox」「Safari」「Opera」といったあたりのモダンWebブラウザにおいては、この正しいボックスモデル解釈により画面にレンダリングします。

W3C標準のボックスモデル（IE 7、Firefox、Safari、Opera）

　上図を見てもらえれば分かるかと思いますが、ボックスモデルの合計幅は次のような要領で計算されます。

Total Width（合計幅）
＝margin（マージン）＋border（ボーダー）＋padding（パディング）＋width（幅）

150 px＝30px＋5px＋15px＋50px＋15px＋5px＋30px

　ここでは、CSSレイアウトの際に最も直面することが多い、IE 5.xとIE 6のWebブラウザによるボックスモデル解釈の違いについて見ていきます。

　CSSを使ったデザインの現場で起こり得る表示ズレの多くは、後方互換モードにおけるIE 5.x、IE 6のボックスモデルの考え方と、標準の正しいボックスモデルの考え方との違いを認識していないことから起こることがあります。

　IE 5.x／IE 6のボックスモデル解釈を説明した下の図をご覧ください。

IE 5.xおよびIE 6.xの後方互換モードでのボックスモデル

　図を例としたボックスモデルにおける計算式は以下のようになっています。

Total Width（合計幅）＝margin（マージン）＋width（幅）

160px＝30px＋30px＋100px

　widthプロパティに100pxと設定した場合、borderやpaddingの幅が100pxの内に含まれている形で計算されてしまいます。

　「width:100px」とCSSを設定しても、borderとpaddingの値を引いた「100px－5px－5px－15px－15px＝60px」の60px分しか実際のテキストなどを入力するための、コンテンツ幅がなくなってしまいます。

　このボックスモデル解釈の違いを頭に入れておくと、まだまだユーザーシェアのあるIE 6における表示ズレの問題の解決につながる、大きな手掛かりになるかと思います。

　それではWebブラウザでレンダリング時に形成されるボックスモデルの幅や色といったプロパティを制御するものを紹介いたします。

●margin……borderの外側にある余白領域のことを指します。

　CSSの記述例

maring: 10px 12px 35px 25px;

　上に10px、右に12px、下に35px、左に25pxのマージンを設定している記述です。

●padding……borderの内側にある余白領域のことを指します。

CSSの記述例

padding：20px 22px 30px 10px;

　上に20px、右に22px、下に30px、左に10px分のパディングを設定している記述です。

●border……marginとpaddingの間にあるけい線を描画する領域のことを指します。

CSSの記述例

border: 1px solid #000;

　幅1pxの黒の実線を表示させる記述です。

●width……ボックスモデルの一番内側に来るコンテンツエリアの幅を指定します。

CSSの記述例

width: 200px;

　ボックスの幅を200pxに設定している記述です。

●　height……ボックスモデルの一番内側にあるコンテンツエリアの高さを指定します。

CSSの記述例

height: 200px;

　ボックスの高さを200pxに設定している記述です。

　それでは百聞は一見にしかずということで、ボックスモデルが実際にどのようにWebブラウザ上に描画されているのかを、第2回の記事で作成した下記のXHTMLファイル使って見ていきましょう。

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">

<head>

  <title>文書のタイトルを記述</title>

</head>

<body>



  <div id="header">

    <h1>文書の大見出し</h1>

    <p>文書の説明文の記述</p>

  </div>



  <div id="main">

    <ul>

      <li>項目の一番目</li>

      <li>項目の二番目</li>

    </ul>

  </div>



  <div id="footer">

    <p>一般的なサイトでは<span>コピーライト表記</span>がきます。</p>

  </div>



</body>

</html>

　下のHTMLファイルをWebブラウザで表示した結果、次のようにWebブラウザに表示されます。

▼index.html

HTMLの状態を確認するツール、Firebugを使ってみる

　今回は（X）HTMLのボックスモデル状態を確認するツールとして、Firebug（ファイヤーバグ）というFirefoxアドオンツールを使って確認していきます。

　このツールは、JavaScriptライブラリ「jQuery」の開発者として知られているJohn Resig氏と、初期Firefox開発者であり現在Facebookに勤務しているJoe Hewitt氏により開発されており、Mozilla Public License 1.1というライセンスにて無料で配布されております。

▼[Firebug] http://getfirebug.com/jp.html