ブラウザ間のスタイル差をなくす！リセットCSS 7選

日々あらゆるブラウザに対応させたページを作っていると、少なからず仕上がりのデザインに差異が見られる場合もあるかと思います。例えば、Google Chromeで作ったページではきちんとサイドバーがCSSで装飾されているのに対し、Internet Explorerでは装飾が適用されていなかったりなど。

一見ささいなことのようですが、あまりにも仕上がりのデザインが違うと、ブラウザによって異なるUXを生み出してしまい、読者を混乱させてしまいます。

そこで今回は、そういったブラウザごとの細かなスタイル差を埋めるためのCSSファイル「リセットCSS」についてご紹介します。ブラウザによってスタイルに隔たりができてしまったと悩んでいる方は、ぜひ参考にしてみてください。

「リセットCSS」とは、ブラウザごとのスタイル差をなくすファイル

リセットCSSとは、ブラウザごとに適用されているスタイル差を打ち消すCSSファイルです。これを使うことで、ブラウザによってWebページの見た目が変わることを防ぎ、コーディングをスムーズに進めやすくします。

多くの人が利用するWebページやWebサービスを作る際は、かなり重宝されるCSSファイルです。

リセットCSSの必要性

そもそも、リセットCSSはなぜ必要なのでしょうか。その理由は、ブラウザが独自でもつスタイルが関係しています。

俗にいうホームページやWebサイトといったものは、おもにWebページを形作るHTMLと、それらをオシャレに彩るCSSによって構成されています。これはネット上に存在するほぼすべてのコンテンツに共通する事実です。

そしてHTMLやCSSが使われているということは、あらかじめ何かしらのルールが適用されています。そしてそのルールは、ブラウザごとに微妙に異なることがあるのです。

そのルールの差を埋めるために、ブラウザが独自に持つルールを取り除いてしまうのが、リセットCSSです。

なお、あくまでブラウザごとにもつスタイルを取り払い均一化することが、リセットCSSを使う目的です。特定のブラウザ以外で見られることを想定せずコンテンツを作る場合は、使う必要はありません。リセットCSSを使うべきかどうかは、それぞれ各自で判断しましょう。

リセットCSSの使い方

リセットCSSの使い方自体は簡単。選んだリセットCSSのコードをコピーして、作っているコンテンツのHTML5またはPHPファイルにリンクしてあるカスタムCSS欄より先に貼り付けるだけ。これだけで実装は完了です。

WEB開発の必需品！代表的なリセットCSS7選

リセットCSSを使う必要性と使い方が理解できたら、さっそくリセットCSSを導入していきましょう。今回は、よく使われる代表的なリセットCSSを7つご紹介します。

1. HTML5 Reset Stylesheet

Richard Clark氏の「HTML5 Reset Stylesheet」です。最終更新日が2010年9月17日ですが、いまだに現役の老舗リセットCSSです。

HTML5 Reset Stylesheet

2. CSS Tools: Reset CSS

Eric A. and Kathryn S. Meyer氏の「CSS Tools: Reset CSS」です。書かれているコード量もコンパクトなので、ページスピードにも大きな影響を与えません。

CSS Tools: Reset CSS

3. YUI3

老舗リセットCSSの「YUI3」です。「HTML5 Reset Stylesheet」や「CSS Tools: Reset CSS」と同様に、いまでも広く使われているCSSファイルのひとつでもあります。

YUI3

4. minireset.css

Jeremy Thomas氏によるリセットCSS「minireset.css」です。フォントサイズやブロック・マージンといった基本的な部分のリセットに対応した近代的なリセットCSSで、メジャーなリセットCSSに比べて軽量であることでも知られています。

minireset.css

5. nanoreset

軽量なリセットCSS「nanoreset」です。ナノというだけあって「minireset.css」と並んで重量感を感じさせないリセットCSSとなっています。そのためページスピードにほとんど影響を与えません。

nanoreset

6. Normalize.css

今アツいリセットCSSの一つ「Normalize.css」です。すべてのブラウザスタイルを打ち消すのではなく、既存で使えるスタイルはそのまま残し、不要なところのみを部分的に削るという特徴をもちます。そのため、コードの記述を最小限に抑えて導入できるリセットCSSとして人気があります。

Normalize.css

7. ress

「Normalize.css」をさらにカスタマイズしたリセットCSS「ress」です。「Normalize.css」をさらに最適したものというだけあって、「Normalize.css」で成しえなかったpaddingやmarginまでしっかりリセットしてくれるという、まさにかゆいところに手が届くリセットCSSでもあります。

ress

結局どのリセットCSSを使うべき？

数多くあるリセットCSSですが、正直なところ、コンテンツを作る上ではどれを使っても得られる効果に大きな差はありません。

リセットCSSの役割は先述したとおり、もともとブラウザに適用されるスタイルを打ち消すためだけに使うものです。使うリセットCSSの違いによって、開発に大きな支障はきたしません。

ユーザーそれぞれが使いやすそうなリセットCSSを選び、開発に専念しましょう。

おわりに

今回は、ブラウザ間のデザインの差異をなくすリセットCSSについて7つご紹介しました。今やInternet Explorer・Google Chrome・Firefox・iOSとあらゆるブラウザで見られる時代。少しでも多くの人に見てもらえるようにするために、より多くのブラウザに対応させることは当たり前となりつつあります。

普段からサービス開発に携わるクリエイターは、いち早くリセットCSSを使いこなせるようになりましょう。