【2020年度版】オススメのリセットCSS 8選まとめ!メリット・デメリットやカスタマイズ方法も解説

OSやブラウザが異なると、Webページを見た時にデザインが異なってしまう場合があります。reset cssを使うと、一度すべてのスタイルを同じにリセットすることが出来ます。

reset cssは、スタイルを上書きしているだけなので、「何処までリセットするのか」や「手法」等によって様々な種類があります。

この記事では、reset cssが必要な理由や、メリット・デメリットに加え、オススメのreset cssまで紹介します。

合わせて読みたい

\ CSSについてわからない人は、下記記事で解説しています!参考にどうぞ /

reset cssとは?

reset cssとは、「Google Chrome」「firefox」「Safari」「Internet Explorer」など異なるブラウザで同じWebページを表示させた時、同じように見えるるように、デザインの差異を消すためのCSSのことです。

もともとブラウザには、表示されるすべてのページに適用される「user agent stylesheet(UA stylesheet)」と呼ばれるデフォルトのスタイルが適用されています。

reset cssはこの「UA stylesheet」を上書きし、ブラウザごとに持っているスタイルを使わないようにして、すべてのスタイルを揃える役割があります。

MEMO

UA stylesheetはオープンソースで世界中に公開されており、誰でも見ることが出来ます。

reset cssは実際に様々なWebサイトで使われています。

reset cssの書き方・使用例

reset cssは単なるCSSファイルなので、<link>を使って読み込むだけで使うことが出来ます。

しかし、自身のスタイルシートのあとにreset cssを持ってきてしまうと、それすらもリセットされてしまいます。なので、スタイルシートで一番最初に読み込むのをreset cssにするのを忘れないようにしましょう。

reset cssのメリット・デメリット

reset cssは簡単にブラウザをスタイルを揃えることが出来ますが、同時にリセットした項目をまた自分で再設定しなくていはいけない等のデメリットもあります。

メリットとデメリットをまとめると、このようになります。

  • メリット:
    • すべてのブラウザでスタイルを統一することが出来る
    • カスタマイズしたスタイルを他のサイトで使いまわしやすくなる
  • デメリット:
    • リセットした項目を自分で再設定しなくてはいけない
    • ソースコードの分量が大きくなる

すべてリセットするタイプ

このタイプは、marginやpaddingが0に設定されるだけでなく、font-sizaもすべて統一されます。 そのため、1つ1つのスタイルを自分で再定義する手間が発生します。

しかし、それで作ったスタイルはどのような場面でも使い回すことの出来る汎用性の高いCSS比較的簡単につくれます。

HTML5 Doctor Reset CSS

最新のHTML5に対応したreset cssで、古いブラウザへの対応を考慮していないため、ソースコードがとてもシンプルです。

カスタマイズ性もよく、なれるととても扱いやすいreset cssです。

ただし、box-sizingに関する設定は入っていないので、自分の書き方に合わせてbox-sizingを追加しましょう。 ちなみに、box-sizingは殆どのWebサイトで使われているものなので、迷ったら追加しておくのがいいでしょう。

*,
*::before,
*::after {
  box-sizing: border-box;
}

Eric Mayer’s Reset CSS 2.0

これは「Eric Meyer氏」が作ったreset cssです。簡潔に言うと、「HTML5 Doctor Reset CSS」の劣化版です。

バージョンは「v2.0 | 20110126」と、とても古く昔のブラウザにも対応しているのですが、今ではそのようなブラウザは使われなくなってしまったので、新規プロジェクトではこのreset cssを導入しないほうがいいです。

しかし、今でも世界中のWebサイトで使われているので、ここで紹介します。

marginやpaddingを0に設定し、サンプルの通りすべての要素のスタイルをリセットするためのCSSです。

HTML5で廃止された要素も含んでいます。

Yahoo! (YUI 3) Reset CSS

スタイルを統一するのが目的のタイプ

ブラウザ間でmarginやpadding、font-sizeなどの差異が無いように調節する役割があります。

予め主要な設定は設定してくれるので、自分でカスタマイズする箇所が減り、スタイルを書く速度は上がります。

しかし、書き方によっては、「このreset cssを使わないとスタイルが全部壊れてしまう!」というになってしまうので、ブラウザの進化に合わせてreset cssを取り替える場合は向かないかもしれません。(そういう場面はあまりないかもしれませんが。)

A Modern CSS Reset

Reboot.css

Normalize.css

Normalize.cssは、ブラウザでの差異を取り払いながらも、marginやpadding、font-sizeなどのデフォルトスタイルを残してくれるreset cssです。

ress

特殊タイプ

Universal Selector '*' Reset

毎回CSSスタイルの事について調べるのは辛くありませんか?

CSSには沢山の種類があります。HTMLと組み合わせると、デザインのコーディングは非常に多くのやり方があり、常に最新の情報を追っていくのは、上級者でも大変です。

特に初心者の場合、どの情報が最新なのかわからず、知らない内に今では使えない古い知識を使っていたなんて事も多くなるのでは無いでしょうか?

そんな時、まずは最新のWeb動向や調べ方、知識を一定水準まで仕入れる事ができ、更にこの知識は古いものだから別のものを探そうと判断出来るようになりたくはないですか?

CodeCamp Webマスターコース」では、最新のHTML5とCSS3を使って授業を受けながら、わからないところは「個別指導」時にわからないところや疑問点を経験豊富なエンジニアに聞くことが出来ます!

CodeCampで学ぶと得られるメリットは下記の3つ

CodeCampで得られるメリットは沢山あるのですが、その中でも主要な3つを紹介します!

CodeCampで学ぶと得られるメリット
  • 時間・場所は選ばない: オンラインなので、仕事や学業と両立可能
    毎日朝7時〜夜24時まで時間や場所を選ばずに学習出来ます。また、365日・世界中のどこでも受講が可能です!もちろん、地方の方もOK!
  • 個別指導が受けられる: 課題の提出・添削は無制限
    自分が出来るようになるまで、課題の提出・添削は無制限で受けられます
  • 受講者数 No.1※ : オンラインプログラミングレッスンNo.1、満足度94.6%※
    実践的なテクニックや質の高いフィードバックのあるおかげで、高い満足度があります!
  • ※日経トレンディ別冊調べ:調査日 2016年10月31日
  • ※満足度:会員向け、レッスン評価アンケートの集計結果より(2018年10月-12月期)

更に、CodeCampは無料体験レッスンも実施しており、「良い方が担当者さんだった!」と、多くの口コミも広がっています!

気になる方は、下記をクリックして無料体験レッスンを受けられるので、申し込んでみてください!

最後に口コミのまとめ