各ブラウザの表示の差異をリセットするCSS

2007.06.07 Author: たく

Webサイトのコーディングの際の各ブラウザごとの表示の違いは
マークアップエンジニアにとって 最大の悩みの種であります。

そもそも、その原因は

  1. ブラウザごとのデフォルトのスタイルシートの違い
  2. 各ブラウザのバグ
  3. 各ブラウザの仕様

全称セレクタ*によるものも少し前までは、もてはやされてましたが、
レンダリングが遅くなったり、妥当なデフォルト設定もリセットしてしまうなど
欠点も見出されてきているので最近は、推奨されていません。

多くの場合はブラウザが持っているデフォルトのスタイルシートの違いによってもたらされますが、
その違いを最小限にするためにデフォルトスタイルシート(ぬかみそCSSとか最近は言われてるそうです。)を作成することが、最近の流行ってます。

その中でも有名なのがYahoo UI libraryのReset CSS でしょうか。 私はこれをベースに製作するサイトによって
line-hieghtを加えたり
font-sizeを変更したり
追加、削除などして使いまわしてます。

自分用デフォルトCSSは以下です。
これで私の場合は事足ります。

body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,pre,form,fieldset,
input,textarea,p,blockquote,th,td {  
    margin:0; 
    padding:0; 
} 
table { 
    border-collapse:collapse; 
    border-spacing:0; 
} 
img {  
    border:0; 
} 
address,caption,cite,code,
dfn,em,strong,th,var { 
    font-style:normal; 
    font-weight:normal; 
}  
caption,th { 
    text-align:left; 
} 
h1,h2,h3,h4,h5,h6 { 
    font-size:100%; 
    font-weight:normal; 
} 

マークアップエンジニアだったら
自分のデフォルトCSSは持ってることは必須といっても
いいかもしれませんね

名古屋のWebシステム開発・ネットワーク構築会社 コネクティボへ