[使える CSS テクニック] ブラウザのデフォルトスタイルをリセットする

使えるCSSテクニック Vol.01

2008.05.26

現場でバリバリコーディングをしている当ブログの執筆陣が、ちょっと使える CSS のテクニックをご紹介する短期集中連載企画。全 10 回の予定でお送りします。
第 1 回目は「ブラウザのデフォルトスタイルをリセットする」です。

ほんの 1～2 年前までは「*（ユニバーサルセレクタ）」を使って以下のようにブラウザのデフォルトスタイルをリセットするのが主流でした。

* {
        margin: 0;
        padding: 0;
        border: none;
        list-style-type: none;
        font-style: normal;
        font-weight: normal;
        font-size: 100%;
        text-align: left;
}

ただ、全要素のスタイルを無条件でリセットしてしまうと、input 要素や button 要素などフォーム周りの要素の表示にまで影響が及ぶ事から、既にユニバーサルセレクタを使ったリセットの手法はあまり使われなくなっています。
※フォーム周りはブラウザのデフォルト表示のままのほうがユーザも使い慣れているので使いやすいというメリットがあります。

参考
border を none にすることで以下のような影響があります。

そこで、安易にユニバーサルセレクタでリセットしてしまうのではなく、制作しているサイトで使用している要素それぞれをリセットする、というのが現時点での主流となっている手法です。

以下は、弊社が主に使用しているリセット用の CSS です。

/* よく登場する要素のリセット */
h1, h2, h3, h4, h5, h6, p, address,
ul, ol, li, dl, dt, dd,
table, caption, th, td, img, form {
        margin: 0;
        padding: 0;
        border: none;
        font-style: normal;
        font-weight: normal;
        font-size: 100%;
        text-align: left;
        list-style-type: none;
}

/* テキストエリア内文字サイズのブラウザ間での差異をなくす */
textarea { font-size: 100%; }

/* 画像の下にできる隙間をなくす */
img { vertical-align: bottom; }

/* hr 要素は不可視で使う */
hr { display: none; }

上記だけでは当然過不足がありますので、制作するサイトに合わせて追記したり削ったり、という感じで使用しています。

最近では Yahoo! UI Library で YUI Reset CSS が公開されたことにより、猫も杓子も YUI といった様相です。（確かに、かゆい所に手が届く使いやすいコードです）

ただ、一番良いのは他人が作ったリセット CSS を闇雲に導入するのではなく、まずは自分が使いやすいリセット CSS を自分で作ってコツコツとカスタマイズしていくことでしょう。
地道な作業ですが、どの要素にどのようなデフォルトスタイルが適用されているかを把握しながら一つ一つの要素を自覚的にリセットしていくことで、いつの間にか自分専用のリセット CSS が出来上がっていると思います。
結局、それが一番使いやすい！