リセットCSSとは?おすすめと使い方を紹介【自作CSSも公開】

Web制作

 

HTML/CSSコーディングを行なっているとき、始めから指定されているCSSに悩まされたことはありませんか?

「ズレると思ったらulにpadding入ってた」

「h2タグやpタグのmarginが邪魔・・・」

「ブラウザ変えたら微妙にずれてる・・・」

 

これらの悩みを解消するのが「リセットCSS」です。

今回はオススメのリセットCSSと、それを元に自作したものを紹介していきます。

 

以下、記事に入ります。

 

リセットCSSとは?

HTMLタグは、ブラウザごとにCSSがあらかじめ割り当てられている場合があります。

ulタグには左にpadding、上下にmarginがあらかじめ入っていますね。

この指定、実はブラウザ毎に異なる場合があります

リセットCSSはこのブラウザごとの違いを最初にリセットして、開発を効率的に行うためのCSSです

あと、そもそも勝手にpaddingとか入れられたらいちいち外すのも面倒ですしね。

 

欠点としては、最初に一括で指定するためCSSの分量が多くなります

最初に指定するだけなので言うほど量は増えないのですが、一応頭には入れておきましょう。

 

おすすめのリセットCSS

自作しても良いのですが、Web上に公開されているリセットcssを使うのが一番手っ取り早いです

CSS Resetで、リセットCSSが人気順に紹介されています。

 

以下、人気のリセットCSSを紹介していきます。

実際のコードも載せているので、ここからコピーしてテキストエディタに貼り付ければすぐに使用できます。

 

Eric Meyer’s “Reset CSS” 2.0

人気No.1のリセットCSSです。

最低限のCSSが揃っており、かつ使用頻度が少ないタグについては特に指定がされていません。

 

ゆえにCSS分量が少なく見た目も綺麗で、個人的に一番おすすめのリセットCSSです。

 

 

HTML5 Doctor CSS Reset

名前の通り、HTML5用に作られたリセットCSS。とはいえ他のリセットCSSもHTML5対応はしてますが・・・

 

Eric Meyer’s “Reset CSS” 2.0と比べると、insやmark、abbrなどあまり使われないタグにも指定が入っています。

簡単なマークアップしかしない方は、不要な部分を削除するか他のリセットcssを使いましょう。

 

 

Yahoo! (YUI 3) Reset CSS

名前の通り、Yahoo!が開発したリセットCSSです。

開発年が2014年と比較的新しいのが特徴です。

 

基本は他と大きな差はありませんが、若干タグ指定が細かいです。

また、subやsup、legendなどHTML5 Doctor Reset CSSとはリセット指定のタグが結構異なります。

 

リセットの内容、指定されているタグを見て使用するかを判断しましょう。

 

ちなみにこちらのリセットCSSは、CDNによる読み込みも用意されています。

 

Universal Selector ‘*’ Reset

ユニバーサルセレクタ「*」を用いて、全ての要素にmargin: 0;とpadding: 0;をかけます。

分量が少なくお手軽に見えるかもしれませんが、全ての要素に指定するため、ブラウザのレンダリングが遅くなるというデメリットがあります。

指定方法は確かに一番楽ですが、上記デメリットを考えるとタグ毎に適切に指定する方がおすすめです。

 

参考サイト↓ ※外部サイトに飛びます
【HTML】「ユニバーサルセレクタ」はデメリットだらけ!”正しいCSSリセット”とは?

 

リセットCSSの自作

人気リセットCSSを紹介しましたが、こう思われた方もいるかもしれません。

指定のタグ多くない?」と。

 

blockquoteやmarkなんかは、人によっては普段全然使わないタグです。

使わないのに入れっぱなしだと無駄にCSSの分量が増えますし、コードが美しくありません。

 

もしこういった点が気になる方は、リセットCSSを自作してみましょう

とはいえ全くの0から作るのは大変だと思うので、今回は「Eric Meyer’s “Reset CSS” 2.0」をベースに、自分が使いやすいよう改造します。

 

まずはblockquoteなど、普段のマークアップで使用頻度が低いタグは全て削除してしまいます。

headerやfooterなども頻出ではありますが、どうせ中にdivやpを用意することがほとんどなので削除。

font: inheritは個人的に不要なので削除、代わりにbox-sizing:border-boxを設定。

 

こうして出来上がったのが以下のリセットCSSです。僕は普段のコーディングではだいたいこれ使ってます。

※2019年4月追記:tableタグなども削除し、若干手を加えました

 

使用頻度が高い、必要最低限のタグのみを残しました。

こんな感じで、自分がよく使うタグにだけリセットcssを割り当てて、使わないものは削除してしまいましょう。

案件で必要に迫られたら、その都度微調整してあげれば十分です。

 

リセットCSSの使い方と注意点

リセットCSSを読み込むとき、方法は2つあります。

1.CSSの一番上にコードを貼り付ける

2.リセットCSS用のファイル(reset.css等)を用意し、HTMLで読み込む。

ここで注意して欲しいのが順番です。

1の場合、コードは必ず1番上に貼り付けましょう

CSSは後に書いたものを優先するので、一番下にCSSを書いたら自分のCSSが適用された後にリセットCSSが適用されてしまいます。

 

2の場合、reset.cssは最初に読み込ませましょう

1と似たような理由で、cssは後に読み込みしたものが優先されます

最後にリセットCSSを読み込ませると、当然リセットCSSが優先されてしまいます。

 

head内に書くときは以下の順番で書きましょう。

 

まとめ

リセットCSSについて、ご理解いただけたでしょうか?

ブラウザ毎の違いをリセットするのが主目的ですが、デフォルトで入ってるCSSをリセットできるだけでも結構作業が捗ります。

迷ったらとりあえず入れてみることをおすすめしますー٩( 'ω' )و