2020/02/26 (更新日: 2021/07/23)

各種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リセットについて比較してみました。
各CSSリセットで今回比較した要素以外でも違いが出てくるとは思いますが、参考になれば幸いです。

• facebook
• Tweet
• hatebu

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