2019-05-07
CDNとコピペで使える、おすすめリセットCSSまとめ
WEB制作を行なっていると、ブラウザ間で微妙な差異があるのに気付きます。marginやpaddingをはじめ、border、fontサイズなどの基本スタイルにも違いがありますね。
リセットCSSは、ブラウザごとに異なるデフォルトのスタイルを打ち消し、スタイルをならすことにより表示を整えて、ブラウザ間の差異を吸収するために用いられます。
CDNやコピペで簡単に使える、メジャーなリセットCSSをご紹介します。リセットCSSのそれぞれの特徴を把握し、理解を深めましょう。
おすすめリセットCSS
Eric Meyer’s “Reset CSS” 2.0
基本的なセレクタのリセットを行なっています。比較的新しい、一部のHTMLタグには対応していないようですね。
https://meyerweb.com/eric/tools/css/reset/
HTML5 Doctor CSS Reset
上記のEric Meyer’s “Reset CSS” 2.0をHTML5対応版です。特にこだわりがない場合は、こちらを利用した方がよいでしょう。
http://html5doctor.com/html-5-reset-stylesheet
normalize.css
厳密にはリセットCSSではありません。ブラウザごとの差異を吸収し、デフォルトスタイルは統一されるものの、まっさらにはされない、といったところでしょうか。paddingが0に指定されていない、hタグが見出しレベルでスタイルが割り当てられるといった点が気になります。
https://github.com/necolas/normalize.css/blob/master/normalize.css
ress
HTML5に対応しつつ、リセットを行う。上記で紹介したHTML5 Doctor CSS Resetとnormalize.cssのハイブリッド型という印象です。audioタグやvideoタグをはじめcanvasについての記述。またbox-sizing
プロパティについても定義されていていますね。
https://github.com/filipelinhares/ress/blob/master/ress.css
Reboot.css
Bootstrapで使用する前提で作られたリセットCSSのようです。他のリセットCSSと比較すると記述内容が特徴的です。
https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap-reboot.css
まとめ
おすすめリセットCSSとしていくつかご紹介しましたが、実のところ私自身は使用していません。現場ではCompassのReset CSSを使うことが多いです。
と言いますのも、リセットCSSごとにそれぞれ目的、特徴があり、必要な記述を完璧に備えているものがないためです。ですから、結局のところ上記のリセットCSSをベースに、プロジェクトごとに内容をカスタマイズする必要があると思います。
また、リセットCSSを導入したことによりプロジェクトに必要のない、無駄な読み込みが増えてしまうというデメリットも生じてしまいます。それぞれの特徴を理解しつつ自分仕様、またはプロジェクトに合わせて構築しましょう!