CSS Mini Resetについて

大分、浸透して、多くのWebサイトでも仕様されているReset CSSですが、ちょっと前に、 Carrer web logのCSS Mini Resetという記事を読みました。

その記事に Reset CSSのソースコードが記述されているのですが、この記事に書かれているソースコードはこれまでのReset CSSのソースコードとは大きく異なるものです。

下記に示すように、僕のブログにもReset CSSについて書かせていただきました。

その中でも紹介しているのが、 Eric Meyer CSS ResetYUI Resetですが、これらのReset CSSはブラウザが持っているデフォルトスタイルシートを完全にリセットします。(明確に言うと、Eric Meyer CSS Resetは完全ではありませんが・・・)

僕の上記のエントリーでもちょっとだけ述べているのですが、最近思うのは、Reset CSSは本当に必要か?ということです。

それは、「ブラウザが持っているデフォルトスタイルシートって便利だよね!」と、思うようになってきたからです。

例えば、p要素などのブロックレベル要素が持つmarginが、イザという時に便利に使えます。ですので、最近は、YUI ResetやEric Meyer CSS Resetは使わなくなってきました。

しかし、リセットしたほうがマークアップしやすいので、CSS Mini Resetを参考にリセットするCSSを厳選しています。

下記がCSS Mini Resetのソースです。

html, body, div, form, fieldset, legend, label
{
 margin: 0;
 padding: 0; 
}

table
{
 border-collapse: collapse;
 border-spacing: 0;
}

th, td
{
 text-align: left;
 vertical-align: top;
}

h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; }

img { border: 0; }