【CSS】リセットCSSとは

今回はデザインの現場でほぼお世話になるであろう「リセットCSS」についてメモしていきますφ(・＿・”)ﾒﾓﾒﾓ

CSSによるサイトのデザインをする上で、知っておかなければならないのは、それぞれのブラウザにはデザインの初期設定値があるということです。例えばGoogle ChromeやFireFoxとでは余白の数値等が微妙に違います。各ブラウザが所持しているこの初期設定値が原因で、あるブラウザでは綺麗にデザインできていても、違うブラウザではデザインが崩れているといった事態が起こる可能性があります。

リセットCSSとは、Google ChromeやFireFoxなど異なるブラウザを使っても同じようにWebサイトが表示されるためのCSSファイルのことを指します。

ブラウザが元々持っているデフォルトの余白やリストの設定を統一することがリセットCSSの役割なのです。

このリセットCSSの上から指定したデザインを更に上書きしていくことで、ブラウザ間の差異をなくしていくのです。

リセットCSSにはメリットとデメリットが存在します。

• ブラウザごとのデザインを揃えることができる（これとにかく大事）

• CSSを書き始める前に準備しなければならない。
• 各ブラウザである程度揃っていた余白等のデザインがほぼ0になる
• デザインがほぼ0になるので、設定する項目が多くなる

っといった感じでデメリットも存在するのですが、ブラウザごとに異なるデザインになってしまうことを防止することはとにかく重要なので、Web制作の仕事をする上でリセットCSSはまず導入することになると思います。

リセットCSSの使い方

リセットCSSは、結局は通常のスタイルシートと原理は一緒です。導入の仕方も、HTMLファイルにリンクさせれば適用されます。
ただしここで一つ注意があり、「リセットCSSは自分で調整するスタイルシートよりも前にリンクさせなければならない」という点です。

画像のように、リセットCSSはデザインするためのスタイルシートよりも前にリンクさせる必要があります。もしリセットCSSが後にリンクされていると、デザイン用のスタイルシートを上書きしてしまい、余白も何にもないデザインになってしまいます。

リセットCSSはどうやって入手する？

リセットCSSにも様々な種類が存在し、様々な用途別で使用されています。ブラウザが持っているデザインの一部だけリセットするものや、全てのデザインをリセットするものもあります。今回は公開されているリセットCSSの内、HTML5に対応するものを一つご紹介します。

・HTML5 Doctor Reset CSS

英語のページで紹介されていて詳細は私ではよく分かりませんが、ダウンロード方法だけ説明させて頂きます。

ページの下のほうにある「HTML 5 Reset Stylesheet」をクリックするとダウンロードページへ飛ぶので、最新版（※この記事を書いている段階では「html5reset-1.6.1.css 」）がダウンロードできます。