ユニバーサルリセット
各ブラウザごとに標準のスタイルシート[CSS]があり、これらの違いを消すためにユニバーサルセレクタ（全称セレクタ）を使ってデフォルト設定をリセットして、レイアウトをするというものです。
ユニバーサルセレクタ(全称セレクタ)
* {
padding:0;
margin: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;
}
またユーザビリティを考えると、クリックできるところは指マークにしたいところです。 input[type="submit"]のような指定の仕方はInternet Explorer 6以下には対応していません。 [参考記事] 指マークの例 [参考記事] フォーム要素について input[type="submit"],input[type="reset"], input[type="radio"],input[type="checkbox"], label,button {
cursor:pointer;
}
リンクできる画像に枠線が付くのが普通だと思っている人がいますが、Operaの標準では枠線はありません。 またボーダーがあることでレイアウトが崩れることがありますので、必要な場合のみ指定したほうが良いです。 a img {
border:0;
}
次のようにするのも良いでしょう。 fieldset,img {
border:0;
}
あとは次のように指定する手法もあります。 見出しの文字サイズはブラウザによってまちまちなのでリセット。 h1,h2,h3,h4,h5,h6 {
font-size:100%;
}
文字の装飾についてリセットする場合。 address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal; font-weight:normal;
}
文字の位置についてリセットする場合。 caption,th {
text-align:left;
}
リストマーカーを使用しないのなら、最初から消しておくのもいいでしょう。 ol,ul {
list-style:none;
}
ユニバーサルリセット(全称セレクタ)の弊害 ul リストの先頭に表示するマーカー Firefox,Safari,Opera はpadding IE はmargin にリストマーカーが付きます。 共通にするにはマーカーの位置を調整するなどの手法があります。 list-style-position:inside;
OPTIONの例
レンダリング(ブラウザの表示)が少しですが、遅くなる。
