最もシンプルなオリジナルのリセットCSSを考えてみた【Webデザイン】

1年以上前の記事です。内容が古い可能性があります。

そろそろHTML5が正式に勧告される昨今に今更感漂いますが、個人的にそろそろ積み重ねをかたちにしてやる頃だなぁというのもあって、オリジナルのリセットCSSを考えてみました。
考えるにあたり、とにかくシンプルに最低限のところのみ記述することを心がけました。
結果として非常に短いCSSになってしまいましたが、そのあたりはご了承下さい。

もうね。ぶっちゃけると「*」のところだけでもいいんじゃないかと考えていたのですがさすがにそれだとちょっとというのもあってちょこちょこ書き加えています。

といったところで解説したいと思います。

まず、「*」に対してマージン（外マージン）、パディング（内マージン）を0にしています。
「*（アスタリスク）」は全てのタグが対象になるという意味です。
これは、下記の状況に対する対策というのが一つ。
□ 内包されたDIVにmarginを設定すると親要素にも同じマージンが設定されることがある
つまり、<div>のマージンを0にしていても、内包されている<h1>や<p>等のマージンの影響で<div>にマージンが設定されてしまうことがあってそれを回避するため。
それと、単純にレイアウトしやすいようにブロックレベル要素のマージン、パディングを全て0に統一してしまっているというのもあります。

次に「body」に対してフォントの指定や行送りの指定、フォントサイズの指定をしている部分。
ここは特に<p>や<div>で囲まれている一般的な文章の部分の可読性を、フォントや行送りを統一することで上げるという意味が大きいです。
だったら<*>にフォントの指定も書いちゃえばいいのにと思うかもしれませんが、そうすると<h1>等、見出しのフォントサイズも<p>等と同じサイズに統一されてしまうのでダメです。
ちなみに、fontプロパティを使ったまとめ書きを使っています。
□ CSS2.1まとめ書き－font編（HTML・CSSリファレンス） – ちほちゅう

次の「li,dd」の部分はリストタグに対するフォローです。
「*」でマージン、パディングを全て0にしてしまうとリストの表記がちょっとおかしくなってしまいます。
そこで、 <li>、<dd>の時だけ左マージンを設定しています。
なお、単位は1文字分の長さの「em（エム）」を使用しています。

次の「table」は表組の罫線がディフォルトのままではカッコ悪いので設定しています。
つまり、表組罫線を1pxの一本線に設定しているわけです。 

で、最後コメントアウトしている部分は一応書いたものの、実際は使わない部分。
つまり、<p>や<h1>、<ul>等の下の部分にマージンを設けて、ディフォルトの状態に近づけています。
ただ、それが嫌で最初の「*」の設定をしているわけなのでここはコメントアウトしておきました。

※ IE対策でimgタグにboader:noneを、imgタグの下の隙間対策でvertical-align:bottomを追記しました。（2014/6/30）

といったところ。

本来はここにclearfix等も書いてあげたほうがいいのかもしれませんが、わかりにくいので排除です。
ちなみに、clearfixに変わる対策としては以下の記事を参考にして下さい。
□ 「float」で親要素の高さがなくなってしまったときは親要素に「float」

また、フォームに関しては今回は一切無視してます。
そもそも、フォームを使うページって限定されるので全てのページに使われることを前提にしたリセットCSSに記述する必要あるのかなぁとも思っていますし。。

「こんな簡単なリセットCSSだったら紹介しなくてもいいじゃん。」とお思いの方もいるかもしれません。
そういった方には逆に、「そんなに難しく考えなくていいじゃん。 」と返しておきます。
CSSなんてシンプルに考えればホント、そんなに難しいもんじゃないはず。
なんか、難しく考えて複雑に複雑にしちゃう人いますが、そういうときは思い切ってリセットしちゃったらどうでしょう。
意外と簡単に問題が解決してしまうかもしれませんよ。