以前，
CSSの初期化 というエントリを書きました。あれからいろいろと試行錯誤し，初期化ファイルがずいぶん変わってきましたので，改めて今ぼくが使っている最新のファイルを紹介したいと思います。
]]>
default.css
以下からご覧いただけます。
このファイルは次のような目的で作っています。
- 各ブラウザが持つデフォルトのCSSをリセットして，レンダリングの違いを解消する。
- サイトやページによって書き換えることがほとんどない，基本的な設定を行う。
- コーディングが分かりやすくなる初期値を指定しておく。
このファイルをあらゆるサイトで使い回せるようにしておくわけです。
リセット
/* Reset */
body, div, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ul, ol, li,
brockquote, pre, table, caption, th, td, address,
form, fieldset, legend, object {
margin: 0;
padding: 0;
}
h5, h6, pre, table, code, kbd, samp, acronym, input, textarea {
font-size: 100%;
}
a, ins {
text-decoration: none;
}
address, em, cite, dfn, var {
font-style: normal;
}
input, textarea {
font-family: sans-serif;
font-weight: normal;
}
img {
vertical-align: baseline;
}
a img {
border: none;
}
まず，ブロックレベル要素は margin と padding が 0 の状態にし，見出しを除くテキストはフォントサイズ・スタイルが同じになるようにします。
各ブラウザのデフォルトCSSでどのように表示されるかは，以下のページで確かめてみてください。
ブラウザによって違いが出てくるもののほかに，次のようなものもリセットしています。
- 斜体になる。（日本語フォントの斜体は読みづらい）
- フォントサイズ・スタイルが通常のものと違う。（table, input など。IEのpre, codeなど， Firefoxのinput, textarea，Oreraのacronym，などブラウザによっていくつか）
この初期化ファイルをあてると，次のようになります。
基本的な設定
以下の設定は，サイトによって値を若干変える場合もあります。
/* Setting */
body {
background: #FFF;
font-family: sans-serif;
font-size: 13px;
color: #333;
}
* html body { /* for IE6 */
font-size: small;
}
*:first-child+html body { /* for IE7 */
font-size: small;
}
ul {
list-style-position: outside;
list-style-type: none;
}
ol {
list-style-position: outside;
}
table {
border-collapse: collapse;
}
legend {
color: #333;
}
div#main p,
div#main ul,
div#main ol,
div#main dl,
div#main blockquote,
div#main pre,
div#main table {
margin: 1em 0;
}
まず，フォントサイズを13px相当に合わせています。ul, ol, table の設定は好みによるところも多分にありますが...。
legend はIEで青文字になります。他のフォント色と合わせています。
メインコンテンツの部分だけは，よく使うブロックレベル要素にあらかじめ margin を指定しています。他の部分は，デザインによって margin がまちまちになる場合が多いので，ここでは指定していません。
初期化ファイルで指定しないほうがよいもの
初期化ファイルであまり細かく指定しまうと，サイトによって後から書き換える部分がふえてしまいます。あらゆるサイトで使い回せるようなファイルになりません。初期化ファイルにはあくまで基本的（不変）なところだけ。
line-height は，メインコンテンツの部分では 1.5 前後にするとよいのですが，他のところでは 1.2 くらいがよかったり，1 にしておくのが便利だったりと様々なので，ここでは指定せず，サイトごとに作る別ファイルで。
h1, h2, h3 あたりの見出しも，サイトによってデザインも様々，しかもわりと詳細に指定することが多いので，別ファイルで。
form 内の各コントロールは，基本的にブラウザがあらかじめ持っているものを使うようにしています。padding や border. outline などをリセットしてしまうと，ひとつひとつ再設定していくのがかなり面倒です。
オプションで
/* Option *//*
* html .smallFont {
font-family: 'メイリオ', 'ＭＳ Ｐゴシック', sans-serif;
}
*:first-child+html .smallFont {
font-family: 'メイリオ', 'ＭＳ Ｐゴシック', sans-serif;
}
* html ul li dl,
* html ol li dl {
display: inline;
}
*:first-child+html ul li dl,
*:first-child+html ol li dl {
display: inline;
}
*/
バグ対策です。すべてのサイトで使うというものではないので，必要に応じて使うようにしています。詳細は関連するエントリを参考にしてください。
以前は clearfix の記述も入れていたのですが，最近ほとんど使わなくなりました。今は入れていません。
font-sizeに関するメモ
/*---------------------------------------------
Font Size
20px : 154%
18px : 139%
16px : 124%
15px : 116% 125%
14px : 108% 117%
13px : 100% 108%
12px : 93% 100%
11px : 85% 92%
---------------------------------------------*/
13pxを基準とした場合の，font-size の指定値をまとめてあります。基準値が違いますが，以下のエントリに書いた算出方法を使っています。
補足
CSSファイルの分割 で書いたように，サイトのすべてのページに適用されるCSSを，default.css と common.css の2枚に書いています。
以前は，default.css で初期化したものを，common.css で再設定する部分が相当ありました。が，この二重の指定ははっきり言って無駄です。必要なものだけを残し，この重複をできるだけ省くようにしてきました。
また，「default.css はあらゆるサイトで使い回せるように」という視点で，default.css から common.css に移したものもあります。
参考
]]>
画像の解像度にちょっと問題はありますが，用途が内部資料という位置づけなら十分な出来映えです。
