各種CSSリセットの比較

HTML/CSS

各種CSSリセットの紹介

いろいろなブラウザのユーザーエージェントスタイル(UserAgentStyle)の違いによる表示のズレを統一するために、公開されているCSSリセットを利用する方も多いかと思います。
今回は、最近良く使われている各種CSSリセットについて、ファイルサイズと主なhtml要素への適用結果について比較してみました。
今回比較したCSSリセットは以下のとおりです。

  1. Eric Mayer’s Reset CSS 2.0
  2. HTML5 Doctor Reset CSS
  3. The New CSS Reset
  4. Normalize.css
  5. ress
  6. sanitize.css
  7. A modern CSS Reset
  8. CSS Remedy
  9. Reboot css

下の比較結果を見てもわかりますが、これらのCSSリセットは二つのタイプに分けることができます。
一つはユーザーエージェントスタイルをなくしていくタイプで、もう一つはスタイルを整えていくタイプです。
今回紹介した中では、
「1.Eric Mayer’s Reset CSS 2.0」と「2.HTML5 Doctor Reset CSS」そして「3.The New CSS Reset」はユーザーエージェントスタイルをなくしてしまうタイプのCSSリセットで、それ以外のものは使いやすい感じにスタイルを整えてくれるタイプのCSSリセットになると思います。

ユーザーエージェントスタイルをなくしてしまうタイプのCSSリセットでは、なんのスタイルもあたっていない状態からスタートするので使用する要素のスタイルについて全部自分でスタイルを当てていきたいときに使いやすいかと思います。
一方、スタイルを整えてくれるタイプのCSSリセットは、ある程度使いやすいようにスタイルを整えてくれるのでCSSリセットまかせでスタイルを指定して、修正が必要な部分だけ自分でスタイルを当てていきたいときに使いやすいかと思います。

各種CSSリセットのファイルサイズと適用結果の比較

それでは、比較結果をみてみましょう。
それぞれのCSSリセットのファイルサイズと、主なHTML要素がどのように表示されるかについて比較してみました。
参考のために、CSSリセットなしの状態も載せてあります。(使用ブラウザはChromeです。)

CSSのリセットなし
ファイルサイズ:0KB
CSSリセットを使用していない状態
Eric Mayer’s Reset CSS 2.0 HTML5 Doctor Reset CSS The New CSS Reset
ファイルサイズ:1.09KB ファイルサイズ:1.77KB ファイルサイズ:0.60KB
Eric Mayer’s Reset CSS 2.0を使用した状態 HTML5 Doctor Reset CSSを使用した状態 CSSリセットを使用していない状態
Normalize.css ress sanitize.css
ファイルサイズ:6.14KB ファイルサイズ:6.78KB ファイルサイズ:9.53KB
Normalize.cssを使用した状態 ressを使用した状態 sanitize.cssを使用した状態
A modern CSS Reset CSS Remedy Reboot css
ファイルサイズ:1.22KB ファイルサイズ:4.04KB ファイルサイズ:5.88KB
A modern CSS Resetを使用した状態 CSS Remedyを使用した状態 Reboot cssを使用した状態

以上、主なCSSリセットについて比較してみました。
各CSSリセットで今回比較した要素以外でも違いが出てくるとは思いますが、参考になれば幸いです。

コメントを残す





このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください