今日は定番テクニックとなったリセットCSSについてまとめてみます。

リセットCSSとは、ブラウザのデフォルトスタイルをリセットするためのCSS設定をまとめたものです。スタイルシートのデフォルト値はブラウザによって違うため、同じスタイルを設定しても表示が異なることがあります。それを解消するために、マージンやフォントサイズなどの指定をリセットするテクニック、リセットCSSが多くのサイトで利用されるようになりました。現在ではすべての要素をリセットするということは少なくなってきていますが、ブラウザ間の差異を簡単に緩和するには有効なテクニックです。

リセットCSSの利用方法
YUI Reset CSS
http://developer.yahoo.com/yui/reset/

Yahoo! UI Library（YUI）でYUI Reset CSSというリセットCSSが公開されているので、それを使えば簡単に利用できるようになっています。

何も考えず、HEAD要素に次の行を追加すれば完了です。

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css">

もちろん、上記CSSをダウンロードし、必要な項目だけ使うことも可能です。

参考

• YUI Fonts CSS

YUIではYUI Reset CSSのほかにYUI Fonts CSSも用意されています。YUI Fonts CSSはフォント関連のCSS設定を行うスタイルシートで、これを使うとほとんどのブラウザ間で文字サイズの違いがなくなります。推奨する文字サイズ指定は、パーセンテージ指定です。

基準サイズは13px、line-heightが16px、書体はarialです。

ピクセルサイズをパーセンテージ早見表