リセットCSSの基礎知識と、おすすめのリセットCSSについてまとめました。リセットCSSと一言に言っても、その特徴はさまざま。シーンに応じて、最適なリセットCSSを使っていくようにしましょう。
※ご紹介したリセットCSSを利用したりカスタマイズする場合は、各リセットCSSのライセンスを確認するようにしてください。
リセットCSSの基礎知識
本題に入る前に、リセットCSSとはどういったものなのか簡単にご紹介しておきましょう。
リセットCSSとは？
このページをご覧の方はご存じの方が多いかと思いますが、Webページは主にHTMLとCSSから出来ています。HTMLはページ構造やコンテンツを司っていて、CSSはデザインやレイアウトを指定しています。
さて、ご存じのようにブラウザにはさまざまな種類があります。Google ChromeやMozillaが開発しているFirefox、Macなどのアップル製品にお馴染みのSafari、Windowsにデフォルトで入っているInternet Explorerなど。これら全てのブラウザはデフォルトでCSSを持っているので、ページ用に作ったCSSが少なからず影響を受けます。場合によっては、ページのデザインが崩れてしまうことも考えられます。
そういった問題を防ぐために使われるのが、本稿のテーマであるリセットCSSです。リセットCSSとは、その名の通りブラウザが本来持っているCSSを打ち消すファイルのことです。制作者が意図した通りにページが表示できるようになりますし、ブラウザごとのデザインを統一することにもつながるのです。
なお以前は、ユニバーサルセレクタを使って全ての要素に対してスタイルをリセットする方法も使われていました。
*{
margin : 0;
padding : 0;
}
CSSの記述が簡単で良いのですが、全てのCSSをリセットをすることから処理速度が遅くなってしまう問題点がありました。効率的にCSSをリセットすることもできないことから、現在ではほとんど使われていません。
リセットCSSのデメリット
ところで、各ブラウザがデフォルトのCSSを持っているのはなぜなのでしょうか？しっかりとした意味があるのですが、一つあげると開発者の負担を減らすことがあげられます。
デフォルトのCSSがないと、Webページの開発者は全てのスタイルを記述しなければいけません。スタイルの抜け漏れがあってはいけませんし、少なくない労力がかかってしまうのです。ブラウザごとにデフォルトのスタイルがあれば、ある程度はブラウザまかせにできるのです。
これがつまり、リセットCSSを使う時のデメリットになります。ブラウザがはじめから持っているCSSを丸ごとリセットすると、その分のCSSは自分で記述しなければいけなくなります。リセットCSSは便利なのですが、結局開発者の作業が増えてしまう危険性もあったのです。
主流はnormalize.css
リセットCSSはブラウザが持っているCSSを全て打ち消すものでした。しかし、上で触れたようにそれにはデメリットもあります。ブラウザが持っているCSSはできるだけ残しつつ、必要なところだけリセットする方法が主流になってきているのです。有名なのは、normalize.cssです。
本記事ではそのあたりもご紹介しつつ、各リセットCSSの特徴をご紹介していきます。制作する内容に合わせて、最適なリセットCSSを選んでいっていただければと思います。
normalize.cssタイプ
ここからは、おすすめのリセットCSSをご紹介していきます。CSSをできるだけリセットせずに流用する、normalize.cssタイプのリセットCSSから見ていきましょう。
normalize.css
Normalize.css: Make browsers render all elements more consistently.
necolas/normalize.css: A collection of HTML element and attribute style-normalizations
normalize.cssは、リセットCSSの中でも代表格と言うことができます。ブラウザ独自のCSSを利用しつつ、適度に打ち消す形式を取っています。後述しますが、sanitize.cssなどの他のリセットCSSやいくつかのフレームワークにも影響を与えています。
normalize.cssはCSSをリセットするだけでなく、各ブラウザの差異も少なくしてくれます。ブラウザごとに別々にCSSを調整するのは、非常に骨の折れる作業です。normalize.cssはそういった煩雑な作業も減らしてくれるでしょう。
sanitize.css
jonathantneal/sanitize.css: Render elements consistently. Style with best practices.
sanitize.cssは、normalize.cssの流れを汲むリセットCSSです。ブラウザが持っているデフォルトのCSSはできるだけ残して、利用する形式です。
sanitize.cssならではの特徴としては、ブラウザのバグ（不具合）を吸収してくれることがあげられます。ブラウザごとの違いも調整してくれるので、デザインに統一感を持たせることもできます。
リセットCSS
normalize.cssとは異なり、ブラウザのCSSを打ち消すタイプのリセットCSSについてもご紹介しておきましょう。
Eric Meyer’s CSS reset
Eric Meyer氏によるリセットCSSです。ブラウザのCSSは軒並みリセットするかたちをとっています。
HTML5 Doctor
HTML5 Reset Stylesheet | HTML5 Doctor
Eric Meyer’s CSS resetをベースにして、HTML5への対応を強化したのがHTML5 Doctorです。HTML5のプロジェクトに最適でしょう。
Yahoo! CSS Reset（YUI3）
ブラウザのCSSをリセットしてくれるCSSです。リセットCSSとしては大手の部類に入り、それなりに歴史も長いです。
YUI（Yahoo! User Interface Library）の一部として提供されているのですが、YUIプロジェクト自体は2014年に新規開発をストップすると発表しています。
あとがき
おすすめのリセットCSSについて解説しました。用途に合うリセットCSSはありましたでしょうか？ご紹介したリセットCSSをカスタマイズして使ったり、自分でオリジナルのリセットCSSを作ってもいいでしょう。案件の内容やサポートするブラウザ（バージョン）に合わせて、最適なリセットCSSを使っていっていただければと思います。