【コピペでOK】2019年最新のおすすめリセットCSS7選をご紹介！

これは各ブラウザが固有にデフォルトのCSSを用意しており、その影響でブラウザ毎に見え方が異なる事が原因です。

input要素や文字サイズ、余白までブラウザ毎に異なる事があり、このブラウザ間のデフォルトのCSSの表示の差異を埋めるための方法がリセットCSS（reset css）です。

つまりリセットCSSを使うことによって、input/ul/li/p/h1/h2・・など、どのタグを利用しても見え方や余白が統一され、ブラウザ間の表示の差異が埋まるということです。

またもう一つデメリットをあげておくと、ブラウザのデフォルトのデザインはある程度整っていて、CSSが何も設定されていなくても見た目がある程度見栄えするものとなっています。それがリセットCSSで完全にクリアされますので、自分で何も設定しないとデザインが簡素になりがちです。

リセットCSSにはいくつか種類があります。オープンソースで管理されているものや、各サイトで配布されているものなどいくつかあり、それぞれでリセットCSSの書き方が異なっています。

そこでこの記事では数あるリセットCSSからおすすめのリセットCSS7選をご紹介していきます。

リセットCSSは通常のCSSと同じくheadタグの中にstyleタグを追加することで導入することが出来ます。

今回はサンプルコードを用意していますので、サンプルコードをコピペしてぜひご利用下さい。

それではおすすめのリセットCSS7選をご紹介していきます。下記のサンプルのHTMLを用意しましたので、それぞれのリセットCSSどうデザインが表示されるか見てみましょう。
（リセットCSSの目的である、デフォルトのブラウザのCSSをクリアする事と、ある程度のデザインを付与するNormalize.cssのようなものも今回一緒くたにご紹介しています。）

Ecir Mayer's Reset CSS 2.0は人気で、よく利用されているリセットCSSの一つです。その容量も小さく、空白や改行を除いて1k弱のサイズでリセットCSSを利用することが出来ます。

早速利用してみましょう。

※リセットCSSだけコピーしたい方は上記サンプルの「reset.css」のタブをクリックしてCSSをコピペすることが出来ます。

いかがでしょうか。最初のサンプルのHTMLの結果と比べてまず余白がなくなっているのに気づきますよね。

また太字や文字サイズなどがリセットされ、統一されているのがわかるかと思います。

HTML5 Doctor CSS Resetも有名なリセットCSSです。当初Eric Mayer's Rest CSS 2.0が対応していなかったHTML5のタグに対応したリセットCSSとなります。

リセットCSSのサイズは1.5k弱となっており、Mayer's Reset CSS 2.0と比べると1.5倍ほど容量があります。

いかがでしょうか。余白についてはMayer'sと同じく消えていますが、太字であってほしいタグで太字が残っていたり、文字サイズにも若干の違いがありますね。

こちらはデザインの知識がなくても簡単におしゃれなデザインが導入できるBootstrapで使用されているリセットCSSとなります。Bootstrapを使った事がある方はある程度ご存知かもしれませんが、Bootstrapのデザインってはっきり、Bootstrapを使っているとわかりますよね（笑）

そのBootstrapのリセットCSSのため、若干その雰囲気があります。バイト数は5k超えています。

リセットCSSの枠を超えてきますが、ブラウザ間で表示の差異をなくしつつ、ある程度のデザインをしてほしいという場合に有効です。

いかがでしょうか。これまでにに比べて、タグ毎にデザインがはっきり別れています。このあたりは好みにもなりますが、自分でカスタマイズしていく中で

• すべてまっさらなデザインからスタートしたい
• ある程度デザインが出来ている状態からスタートしたい

Normalize.cssもReboot.cssと同じくデフォルトのCSSを無効にしつつ、ある程度デザインを初期化して整えていくれます。

Normalize.cssのバイト数や約5kです。デザインはReboot.cssよりは癖のない、デザインとなります。

ressもNormalize.cssやReboot.cssと同じくある程度のデザインをしてくれます。後のサンプルを見ていくとわかりますが、marginやpaddingをしていないので、余白の調整はカスタマイズしやすくなっています。

バイト数は約6kです。

Yahooから提供されているリセットCSSです。バイト数は約1kと軽量となっています。

リセットCSSとしては申し分ない内容になっています。Yahoo社からということもあり、信頼性は高そうですね。

Shitaji.cssはWeb制作用の下地として用意されているリセットCSSです。CDNが用意されていて、1行のコピペで試すことが出来ます。

こちらは下地ということもあり、ある程度整った形でCSSが組まれています。CDNやnpmでも配布されていますので、コピペではなく、npm管理のプロジェクトにもおすすめです。

バイト数は約2.5kです。

いかがでしたでしょうか。

リセットCSSの役割や、おすすめの7選をご紹介しました。本来の目的であるブラウザ間の表示を埋めることや、タグのデフォルトのCSSをクリアするのを満たしたリセットCSSや更に一歩踏み込んである程度デザインをしてくれるものまであります。

ぜひ自身のニーズにあわせて最適なリセットCSSを選択しましょう！