ブラウザのスタイルシートを初期化するCSS

現在、InternetExplorer, Firefox, GoogleChrome, Safari, Operaといった様々なWebブラウザが使われていますが、各ブラウザは、それぞれデフォルトのスタイルシートを持っています。ブラウザ毎のデフォルトのスタイルシートには微妙な違いがあり、CSSでレイアウトしていく際に面倒な思いをされた方も多いのではないでしょうか?

そこで、予めブラウザのスタイルシートを初期化し、各ブラウザでの表示の誤差をなくすことで、CSSでのレイアウトがかなり楽になります。今回は、現在私が使用している初期化用のCSSをご紹介したいと思います。

スタイルシートの初期化といっても、人によって考え方の違いや慣れなどがあるので、様々なやり方が存在すると思います。今回紹介するCSSもすべての方にとって、有用であるとは限りませんので、予めご了承下さい。

まず私の手法としては、基本的にすべての要素でmarginとpaddingを0にします。またfont-weightもnormalにしておき、必要な時だけ指定するという手法をとっています。

bodyでtext-alignをcenterにしていますが、これはIE5では両サイドのmarginをautoにしても中央揃えにならないためです。各divの指定をする際にtext-alignでleftを指定します。

a:link, a:visited, a:hoverに関しては、各サイト毎にcolorとtext-decorationを指定するようにしているので、今回は空欄にしています。

初期化用CSS

@charset "UTF-8";

* {
border:0;
vertical-align:baseline;
margin:0px;
padding:0px;
}

body {
text-align:center;
color:#666666;
background-color:#FFFFFF;
line-height:1em;
font-family:"メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", Osaka, sans-serif;
}

h1, h2, h3, h4, h5, h6, dt, th {
font-weight:normal;
}

img {
vertical-align:top;
}

img, a {
border:none;
}

table {
border-collapse:collapse;
border-spacing:0;
}

object {
vertical-align:top;
}

embed {
vertical-align:bottom;
}

ul, ol {
list-style-type:none;
}

del {
text-decoration:line-through;
}

a:link {
}

a:visited {
}

a:hover {
}

/*for IE6*/
html {
_filter:expression(document.execCommand("BackgroundImageCache", false, true));
}

上記の初期化用CSSには、font-sizeの指定は入っていません。これは文字サイズをある程度統一させるには、InternetExplorerとそれ以外のブラウザでCSSファイルを分けた方が良いと考えているからです。font-sizeの指定に関しては、「クロスブラウザでフォントサイズを統一するCSS」をご覧下さい。