ブラウザ間の差異をなくすCSSリセット
2007年2月08日
私がCSSを触り始めた頃、「これを始めに知っていれば良かったのになー」と思うのが・・・
ブラウザにはそれぞれデフォルトのCSSがある
今でこそあたりまえかもしれないですけど、当時これを知っていればもっと楽だったろーうなぁと思うわけです（笑）
ブラウザのCSSの差異をなくすため、ユニバーサルセレクタ（全称セレクタ）を使ってmarginやpaddingを0にするのは結構やっている方も多いと思います。最初にブラウザのデフォルト設定をリセットしてやれば、ブラウザ間の差異がなくなるわけですから格段にレイアウトもやりやすくなりますよね。
私の場合はmarginとpadding以外にも下記のように指定することが多いです。
*{ margin:0;
padding:0;
border:0;
text-decoration:none;
line-height:1;
font-size:100%;
}
あとはこれにプラスして、フォントの差異をなくすために以下
もちろん、フォントのスタイルとか太さなどは後で上書きします。んー、あとはlist-style-type:none;も指定するかな・・・
他に指定しておくと良いものってなんでしょうね？
この記事に関連するサイト
追記
ユニバーサルセレクタを用いたスタイルリセットには問題もあるようです。フォーム関連のスタイル(inputとか)や、もともとあるデフォルトスタイルの良い部分をも無くしてしまうので、使用する際には良く考えてから使うべきでしょう。
ユニバーサルセレクタを使ったスタイルリセットの弊害について、別途記事を書きました。*{ margin : 0 }はもう古い！？もあわせて読むことをオススメします。
現在、この記事へのトラックバックは受け付けていません。
- Links
