最初に指定しておくCSS

/* Reset
----------------------------------*/

body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,textarea,p,
blockquote,table,caption,
tbody,tfoot,thead,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;
}

h1,h2,h3,h4,h5,h6{
font-size:100%;
font-weight:normal;
}

q:before,q:after{
content:'';
}

object,
embed {
vertical-align: top;
}

abbr,acronym{
border:0;
}

/* basic property
----------------------------------*/

html {
overflow:scroll;
overflow:-moz-scrollbars-vertical;
overflow-x:scroll;
}

body{
font-size: 62.5%;
font-family: Arial, Helvetica, Verdana, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

.right{
float: right;
}

.left{
float: left;
}

.clear{
clear: both;
}

img.bottom{
vertical-align: bottom;
}

/* clearfix
----------------------------------*/

.clearfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix{
display: inline-block;
}

/* MacIE begin \*/
*+html .clearfix{height: 1%;}

* html .clearfix{height: 1%;}

.clearfix{display: block;}
/* Mac IE end */

htmlへのoverflow関連の指定はFirefoxやChromeで、デザインが変化しないようにするために最初からブラウザのスクロールバーを出しておくためのものです。実はこれをいれておくとWeb標準から外れてしまうのですが、私は一度Web標準に沿ったコーディングをした後（あるいはWeb標準の基本的な理念を理解し、そこから外れないような形）ならば、必要に応じて標準でなくなってしまっても構わないと考えるタイプなので、敢えて入れておきます。

imgのvertical-alignをbottomの指定をしておくのはInternet Explorer（以下IE）で、縦に画像を並べた時に余分な隙間を作らないためです。

bodyでfont-size:62.5%を指定しておくのは、font-sizeのem計算や、%計算を簡単にするためです。こうしておくと、font-sizeが10pxになるので、12pxにしたければ、font-size:120%(1.2em)とするだけで、12pxになるので、計算が簡単になるからです。

font-familyは以下のサイトを参考にこういう形にしています。

» CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係

上の記事にもありますが、特にMacを意識しないのであれば、"ヒラギノ角ゴPro W3"と"Hiragino Kaku Gothic Pro"は抜いておいた方がいいかもしれません。

最後のclearfixも必ず入れておきます。これは非常に便利です。ちなみに記述の中の* htmlはIE6用のCSSハック、*+htmlはIE7用ですよね。

ただし、私の場合、ほとんどclass="clearfix"というかたちでは使いません。例えば、<div id="content"></div>にclearfixを指定したい場合は以下のように記述し、clearfixを適用したいものはカンマで区切って追加していきます。

div#contetnt:after,
.clearfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

div#contetnt,
.clearfix{
display: inline-block;
}

/* MacIE begin \*/
*+html div#contetnt,
*+html .clearfix{height: 1%;}

* html div#contetnt,
* html .clearfix{height: 1%;}

div#contetnt,
.clearfix{display: block;}
/* Mac IE end */

こうしておくと、後でデザインが変わってclearfixが不要になった場合でも(x)htmlに手を加えなくても済むからです。

このcleafix、色々なものがありますが、おそらく一番簡単なのは以下のものだと思います。

.cleafix{
overflow: hidden;
}

* html .clearfix{
zoom: 1;
}

色々な方が色々なかたちで作成しているリセットCSSですが、何かの参考になればと思って紹介しました。あくまで私の場合はこれが便利というものですので、もっと便利なものとか、これ抜けてるんじゃない？なんていう部分がありましたら教えていただけると嬉しいです。

また、もっと色々なものを見てみたい、という方はコリスさんの以下の記事を参考にするといいかもしれません。

» [CSS]ブラウザのスタイルをリセットするスタイルシート集