リセットCSS

2011.01.17crossnodeCSS

このエントリーをはてなブックマークに追加
はてなブックマーク - リセットCSS
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip

コーディングで一番厄介と言ってもいいほど手を焼くのがブラウザ互換の問題かもしれません。特に初心者のうちはやっとのことでHTMLとCSSを書き終えても、各ブラウザによる表示の違いに悩まされることが多いと思います。
そのような表示状態のずれは、ブラウザによっていろいろなプロパティのデフォルト値が異なるせいで生じます。そこで、様々なタグのプロパティの値を明示的に設定してブラウザ間の差異をなくしてしまおう。つまりリセットしてしまおうという考え方が広まったわけです。

ということで、CSSのリセットについて主な3つのパターンを取り上げてみました。

01 : ユニバーサルセレクタによる指定

下記のように「*(アスタリスク)」=ユニバーサルセレクタによって全ての要素に対してプロパティを設定する方法です。

*{
	padding:0;
	margin:0;
	border:0;
}

上記のプロパティ以外にもリセットしたい設定を加えていけばブラウザ間の表示がそろっていきます。
しかし、この方法はあらゆる要素に対して適用されるので、テキストボックスなどデフォルトでボーダーが表示されるものに対してはリセットした後でわざわざボーダーを設定しなければなりません。したがって、初期状態を活かすデザインの場合は不向きと言えます。さらに、全ての要素に対して処理されるので負荷が大きくなりブラウザの表示時間が遅くなるとも言われています。

02 : 必要箇所のみ設定

ユニバーサルセレクタによる指定では負荷が大きいということで、対象とするセレクタだけを列挙するパターンです。

body,div,ul,li,h1,h2,h3,h4,h5,h6,form,input,textarea,p,th,td{
	padding:0;
	margin:0;
}

上記のようなかたちで、ページやサイトによって使用するセレクタのみ記述して、CSSファイルの容量と表示処理の負荷を最小限に抑えます。

03 : リセットCSS使用

必要最低限に絞って設定するのが一番シンプルで良いかもしれませんが、構築する案件ごとにタグの使用/不使用をチェックしてリセットの要/不要まで確認するのは手間がかかります。そこで、汎用性のあるリセットCSSを用意しておいて、あとは各ページで読み込むだけにしようというわけです。
公開されているリセットCSSで有名なものを見てみると下記のようなソースになっています。

YUI reset CSS

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,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:'';
}
abbr,acronym {
	border:0;
}

人によってはほとんど使わないタグまで含まれているかもしれませんが、ページ内にそのタグが使用されていなければ処理されないので余計な負荷はかかりません。回線速度が高速になっている現在では、そのページで使わない設定数行分のファイルサイズ数十B増えてもほぼ影響はないので、出来合いのものを流用しても問題ないだろうというわけです。
YUI reset CSSをはじめとする主なリセットCSSをピックアップしてみましたので、使いやすいものを探してみて、さらにカスタマイズして自分なりのリセットCSSを作り上げていくとよいでしょう。

YUI 2: Reset CSS

Eric’s Archived Thoughts: Reset Reloaded

CSS Tools: Reset CSS
(上記Eric氏による最新版)

Maestro CSS, destripando estilos. Cap. 1 – Resetea tu CSS

CSS Browser Reset

‘undohtml.css’ – Tantek Celik – CSS Reset

CSS Reset | All About CSS

CSS inicial 2.0 > Blog > RUDEWORKS

Reseteando estilos CSS | aNieto2K

CSSLab – CSS Reseter

SitePoint Forums – View Single Post – CSS Reset

Setting rather than Resetting Default Styling | Think Vitamin

CSS Reset – a simpler option | Max Design

Carrer Blog: CSS Mini Reset

Don’t Reset – Soft Reset- Visual28

Less is more – my choice of Reset CSS – Ed Eliot

Weekend Quick Tip: Create Your Own Simple Reset.css File | Nettuts+

{ visibility: inherit; } Initial CSS Settings

最後に、リセットCSSごとの違いを見比べられる下記のようなサイトもありますので参考までに。
* { CSS:resetr } – Online CSS-Reset Tool


ページトップへ