ブラウザのデフォルトスタイルをリセットする
ここまで、body要素のマージンだけを取り上げましたが、当然のことながら、デフォルトスタイルの違いはマージンだけに限ったものではありません。例えば、
- 各ブラウザ、バージョンにより、フォントスタイル（font-family、font-sizeなど）の設定が異なる
- 各ブラウザ、バージョンにより、li要素の配置を制御する方法がpaddingであったり、marginだったりと異なる
- IEやFirefoxなどでは、body要素の余白についてmarginで制御するのに対し、Operaの以前のバージョン（バージョン8.54以下）では、paddingで制御する
というような違いが挙げられます。このような差異は、クロスブラウザな表示を目指す上で、とてもやっかいです。
そこで、あらかじめ制作者スタイルでデフォルトスタイルをリセットしておくという方法があります。これを「リセットCSS」や「リセットスタイル」と言います。
最初にブラウザのデフォルトスタイルをリセットし、ブラウザ間の差異をフラットな状態にしておけば、レイアウトしやすくなるというわけです。
リセット方法としては、ユニバーサルセレクタを使用する方法と、タイプ別セレクタを使用する方法が主な手法となっています。かつては、ユニバーサルセレクタを使用する方法が一般的でしたが、後述するようなデメリットもあり、現在では、タイプ別セレクタを使用する方法が主流となりつつあります。
ユニバーサルセレクタによるデフォルトスタイルのリセット
ユニバーサルセレクタ（*）を使用するリセット方法は、外部スタイルシートの最初に、次のような内容を指定し、まず全要素のデフォルトスタイルを一括してリセットしておいて、後から制作者がスタイルを再定義しなおすという方法です。
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight: normal;
font-style: normal;
}
どのプロパティを含めるかについて決まりはありませんが、特にブロックレベル要素の余白を統一しておいた方がスタイルを作りこみやすいため、最低限、marginやpaddingプロパティの値を0に設定しておくのが一般的です。そのサイトのデザイン上、重要だと思われるプロパティを指定すると良いでしょう。
さて、この方法は、全要素を一括してリセットすることができるため、簡単で手っ取り早くリセットできるという魅力がありますが、次のような問題もあります。
- リセットCSSにて全要素のデフォルトスタイルを一旦リセットした上で、各要素に対し新たにデザイン用のスタイルを再定義する必要があるため、ソースが長くなり、管理がやや面倒になる
- form関連やdel要素の打ち消し線など、慣習的に利用されてきたデフォルトのスタイルまでリセットしてしまう
- ブラウザへの処理負荷がかかる
例えば、form関連の要素に、ユニバーサルセレクタによるリセットスタイルが適用されると、次の画像のような影響が出ることが考えられます。
form関連のデフォルトスタイルは、既にユーザーが慣れているスタイルです。これをリセットしてしまうと、ユーザーがformであることに気が付かないという恐れがあります。この場合、「リセットCSSでデフォルトスタイルをリセットする⇒デザイン用のCSSファイルでもう一度デフォルトスタイルを定義し直す」という対策を取る必要があり、二度手間となるわけです。デフォルトスタイルで良かったものを、わざわざリセットしたうえで、再定義するわけですから、無駄なソースが増え、処理も遅くなります。
要素ごとにブラウザのデフォルトスタイルをリセットする
というわけで、必要な要素ごとにリセットするという手法が現在の主流となっています。
html, body, div,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
ul, ol, li, dl, dt, dd,
table, th, td,
form, fieldset, input, textarea{
margin: 0;
padding: 0;
}
img, fieldset{
border: none;
}
どの要素、プロパティを指定するかについて決まりはありませんが、そのサイトで使用するブロックレベル要素を列挙し、最低限、marginとpaddingを0に設定しておくのが一般的です。その他は、必要に応じて指定すると良いでしょう。要素ごとにスタイルをリセットしていくのは手間がかかりますが、一度作ってしまえば使い回しできるので便利です。
なお、リセットCSSは1つのファイルにまとめ、他の外部スタイルシートとは区別してコンポーネント化しておけば、必要に応じて追記したり削ったりすることができ、管理しやすくなります。
