CSSの初期化作業

忘れないように・・・

最近、CSSで全てのベースデザインを製作するようにしている。
しかし、クロスブラウザ対応にしようとすると、結構感覚が空いたり、ずれたり・・・という現象が発生。
困ったなぁ・・・と頭を抱え、ネットを検索してたら「ブラウザに設定された初期値をクリアする必要がある」との記述。

最初に読み込ませるCSSファイルの頭に

*?{
margin:?0;
padding:?0;
}

と記述するといいらしい。

しかし、これを記述すると、pタグなどの空白も詰まってしまう。
結局、次の方法を採ることに。

/*?
Copyright?(c)?2006,?Yahoo!?Inc.?All?rights?reserved.?
Code?licensed?under?the?BSD?License:
http://developer.yahoo.net/yui/license.txt
version:?0.10.0?
*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}?
table{border-collapse:collapse;border-spacing:0;}?
fieldset,img{border:0;}?
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}?
ol,ul?{list-style:none;}?
caption,th?{text-align:left;}?
1,h2,h3,h4,h5,h6{font-size:100%;}
q:before,q:after{content:'';}?

これ、Yahoo! UI Library : Reset CSS?にて紹介されている方法。
細かく初期化することで、面倒な「再初期化」を防ぐ事が出来ます。
これだけを”reset.css”などという名前で保存しておき、使い回ししましょう。