はじめに
本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。
各ブラウザには標準で実装されているスタイルシートがあるのをご存知でしょうか？ これを「ブラウザのデフォルトスタイル」と言いますが、CSSを利用してクロスブラウザなデザインを目指すとき、まずはこのデフォルトスタイルを初期化しておいたうえで、スタイルを作りこむ、という手順を踏むのが一般的です。そうすることで、各ブラウザのデフォルトスタイルの差異を気にすることなく、スタイルを作りこむ作業に専念することができるからです。また、初期化ファイルを別ファイルにコンポーネント化しておくことで管理しやすくなります。
連載第3回目となる今回は、このブラウザのデフォルトスタイルについて解説し、これを初期化して、各ブラウザのデフォルトスタイルの差異を埋める方法を紹介します。この下ごしらえの手順を踏んだうえで、次回以降、スタイルを作りこむ際のテクニックとして、保守性を念頭においたCSSの書き方を紹介していきます。
対象読者
- XHTMLとCSSの基本を理解している方。
- Web標準に準拠したクロスブラウザなレイアウトデザインに興味のある方。
必要な環境
クロスブラウザなデザインを目指すうえでターゲットとする視覚系ブラウザを一通りご用意ください。本稿では、Web標準を比較的よくサポートしているFirefoxと、ユーザー数が多く表示上の問題の多いWindows Internet Explorer 6を中心に解説していますが、できるだけ多くの種類／バージョンのブラウザで表示確認をするのが望ましいでしょう。
ブラウザのデフォルトスタイルとは
XHTML文書に適用されるスタイルには、Webページの制作者が用意する「制作者スタイル」、Webページを閲覧するユーザーが利用する「ユーザースタイル」、そして、Webブラウザが標準で実装している「ブラウザのデフォルトスタイル」の3つのスタイルがあります。優先順位は、通常、下記の番号順になります（1が最優先）。
- 制作者スタイル
- ユーザースタイル
- ブラウザのデフォルトスタイル
制作者スタイルやユーザースタイルが指定されていない要素には、当然、ブラウザのデフォルトスタイルが適用されるわけですが、困ったことに、ブラウザのデフォルトスタイルはそれぞれのブラウザによって異なり、全ブラウザで共通というわけではありません。
CSSにはユーザースタイルを優先するというルールがあり、CSS2では「!important」宣言を使用した場合、優先順位が「!important宣言つきユーザースタイル＞!important宣言つき制作者スタイル＞制作者スタイル＞ユーザースタイル＞ブラウザスタイル」というように変化します。
ブラウザの種類によるデフォルトスタイルの違い
ブラウザのデフォルトスタイルの違い見るために、例として、IEとFirefoxのデフォルトスタイルのうち、body要素のマージンを比較してみましょう。body要素のマージンは、初心者の方がつまづきやすいポイントでもあります。「あれ？ なぜこんなところに余白が！？ こっちでは大丈夫なのに、こっちのブラウザでは間があいてる！」というような状態に陥るのは、ブラウザのデフォルトスタイルが原因だということも少なくありません。
<body> <p>あいうえお</p> </body>
ここではbody要素のマージンのみ表示結果を得たいのですが、このままではp要素にもデフォルトスタイルが適用されてしまいます。CSS側で、p要素のマージンを0とし、p要素のデフォルトスタイルをリセットしておきましょう。
body {
padding: 0;
}
p {
margin: 0;
background-color: #000;
color: #fff;
}
IE6とFirefox2（共に標準モード）の表示結果は次のようになります。
それぞれのキャプチャ画像の左上の余白に注目してください。赤文字の部分は、画像処理ソフトで実際のピクセル数を計ったものです。IEでは、上マージンが15px、左マージンが10pxであるのに対し、Firefoxでは上マージン、左マージン共に8pxとなっています。IEとFirefoxではbody要素のデフォルトスタイルのmarginの値が違うのです（ちなみに、IEを除くほとんどのブラウザはFirefoxと同じ8pxです）。
表示モードによるブラウザスタイルの違い
また、同じブラウザの同じバージョンであっても、表示モードの違いによって、ブラウザスタイルの適用方法や解釈が異なる場合もあります。
例えば、IEの標準モードと互換モードでは、body要素の最初の内包要素に上マージンがある場合、表示結果が異なってきます。さきほどの例を使用し、p要素の上マージンを20pxに設定して表示結果を比べてみましょう。
body {
padding: 0;
}
p {
margin-top: 20px;
background-color: #000;
color: #fff;
}
表示結果は次のようになります。
CSSの仕様上では、上下マージンは重なり合うと解釈され、いずれも正の値の場合、大きい方の値がマージンとして設定されることになっています。つまり、この例の場合は、20pxのマージンが設定されるのが正しいのですが、IE標準モードはマージンの相殺が行われず、「body要素のデフォルトの上マージン15px」と「p要素の上マージン20px」が合算された35pxがマージンとして設定されています。IEの標準モードではなく、IE互換モード（とFirefox）の解釈が正しいのです。
要素間の上下マージンの相殺は、
- いずれも正の値の場合、大きい方の値をマージンとして設定
- 正の値と負の値の場合、足し引きした値をマージンとして設定
- いずれも負の値の場合、小さい方の値をマージンとして設定
というルールで決定されます。
