とほほのリセットCSS入門

• トップ
• リセットCSS

• リセットCSSとは
• 歴史
  • リセットCSS系
  • ノーマライズCSS系
• リセットCSSテスター
• リセットCSS
  • Reset CSS
  • Yahoo! (YUI 3) Reset CSS
  • HTML5 Doctor CSS Reset
  • Universal Selector '*' Reset
  • destyle.css
  • The New CSS Reset
• ノーマライズCSS
  • Normalize.css
  • sanitize.css
  • ress
  • Reboot.css
  • modern-normalize
  • CSS Remedy
  • A Modern CSS Reset
  • reseter.css
• 結局どれを使えばよいの？

リセットCSSとは

ブラウザ毎のスタイルの差異を吸収(統一)するために使用されるCSSライブラリです。明確な境界はありませんが、下記のように大別されるようです。

種別	説明
リセットCSS	ブラウザのスタイルをリセット(無効化)します。フォントの太字スタイルは残すもの/残さないもの、すべてのマージン・パディングを 0 にするもの/しないものなど、どこまでリセットするかはライブラリによります。
ノーマライズCSS	ブラウザ間のスタイルをそろえて統一します。ノーマライズに加えてレスポンシブデザインに有用な設定を加えたものをサニタイズCSSと呼ぶこともあります。

歴史

リセットCSS系

• 2008年：ブラウザ間の差異をリセットしようと Eric Meyer氏が Reset CSS を公開。
• 2008年：Yahoo! も同様の Yahoo! (YUI 3) Reset CSS を公開。
• 2009年：上記を HTML5 に対応させた HTML5 Doctor CSS Reset 公開。
• 2010年：* の margin, padding だけを 0 にする Universal Selector '*' Reset 公開。
• 2019年：すべてのスタイルをリセットする目的で destyle.css 公開。
• 2021年：さらにすべてのスタイルをリセットする目的で The New CSS Rest 公開。

ノーマライズCSS系

• 2012年：リセットするのではなく、ノーマライズを行う Normalize.css 公開。
• 2015年：ノーマライズをレスポンシブデザインに対応させた sanitize.css 公開。
• 2011年：Normalize.css と Reset CSS のいいとこ取りをした ress 公開。
• 2018年：Bootstrap 4 が独自のノーマライズCSS Reboot.css を公開。
• 2019年：モダンブラウザへの対応を強化した modern-normalize, CSS Remedy, A Modern CSS Reset など公開。
• 2021年：さらに強化版の reseter.css 公開。

リセットCSSテスター

いろいろな リセットCSS・ノーマライズCSS をテストできるページを用意しました。

• とほほのリセットCSSテスター

リセットCSS

Reset CSS

• 2007～2008年に Eric Meyer氏によって公開された リセットCSS の元祖です。
• ブラウザのスタイルを統一するために、ほとんどのCSSスタイルを無効化します。
• 公式サイト：https://meyerweb.com/eric/tools/css/reset/index.html
• コード：https://meyerweb.com/eric/tools/css/reset/reset.css

Yahoo! (YUI 3) Reset CSS

• 2008年(?)頃から米国 Yahoo! が開発していたリセットCSSです。現在は開発停止しています。
• 公式サイト：https://clarle.github.io/yui3/yui/docs/cssreset/
• コード：http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset.css

HTML5 Doctor CSS Reset

• 2009年7月27日公開。
• Eric Meyer の Reset CSS を HTML5 に対応させたものです。
• 公式サイト：http://html5doctor.com/html-5-reset-stylesheet/
• コード：https://code.google.com/archive/p/html5resetcss/downloads

Universal Selector '*' Reset

• 2010年頃に公開されました。
• すべての要素のマージン(margin)とパディング(padding)を 0 にするだけの超シンプルなリセットCSSです。
• 公式サイト：https://cssdeck.com/blog/scripts/universal-selector-css-reset/
• コード：* { margin: 0; padding: 0; }

destyle.css

• 2019年1月2日に 1.0.0 が公開されました。
• ほぼすべてのスタイルをリセットしてくれるリセットCSSです。
• ただし、th要素や dt要素の太字などのスタイルは残すようです。
• マージンやパディングも消してくれ、box-sizing: border-box が設定されるなどやって欲しいことをやってくれます。
• 公式サイト：https://github.com/nicolas-cusan/destyle.css
• CDN：https://cdn.jsdelivr.net/npm/destyle.css@3.0.2/

The New CSS Reset

• 2021年4月頃公開？ 比較的新しいリセットCSSです。
• display スタイル以外は可能な限りのスタイルを無効化する目的で作成されました。
• hr要素の横線や、チェックボックスのチェックさえも表示されなくなります。
• 公式サイト：https://elad2412.github.io/the-new-css-reset/
• コード：https://github.com/elad2412/the-new-css-reset

ノーマライズCSS

Normalize.css

• 2012年8月15日に 1.0.0 が公開されました。
• ブラウザのスタイルをリセットするのではなく、統一する目的で作成された ノーマライズCSS の元祖です。
• 公式サイト：https://necolas.github.io/normalize.css/
• CDN：https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css

sanitize.css

• 2015年3月21日に 1.1.0 が公開されました。
• Normalize.css と似ていますが、box-sizing: border-box が指定され、nav要素中の ul や ol のリストマーカーは表示しないなど、レスポンシブデザイン向けの強化が行われています。
• 公式サイト：https://csstools.github.io/sanitize.css/
• CDN：https://cdnjs.cloudflare.com/ajax/libs/sanitize.css/2.0.0/sanitize.css

ress

• 2015年11月14日に 0.3.0 が、2016年6月28日に 1.0.0 が公開されｍした。
• Reset CSS と Normalize.css のいいとこどりをしたようなものと言われています。
• Normalize.css に対してすべてのマージンやパディングを無効化、すべての要素に box-sizing: border-box を適用、ブラウザ毎のボタンスタイルの差異を吸収など、いくつかの強化が行われています。
• 公式サイト：https://github.com/filipelinhares/ress
• CDN：https://unpkg.com/ress/dist/ress.min.css

Reboot.css

• 2018年1月19日に公開の Bootstrap 4 に同梱されました。
• Bootstrap で内部利用されるものですが、単独のノーマライズCSSとしても利用できます。
• 公式サイト：https://getbootstrap.jp/docs/5.0/content/reboot/
• CDN：https://cdn.jsdelivr.net/npm/bootstrap-reboot@4.5.6/reboot.css

modern-normalize

• 2018年2月8日に 0.1.0、2020年8月22日に 1.0.0、2021年5月2日に 1.1.0 が公開されました。
• Normalize.css に比べて IEサポートを廃止してモダンブラウザのみに対応し、box-sizing: border-box を設定、フォントを統一しています。
• 公式サイト：https://github.com/sindresorhus/modern-normalize
• CDN：https://cdnjs.com/libraries/modern-normalize

CSS Remedy

• 2019年9月13日に 0.1.0 beta-1 が、9月19日に beta-2 が公開されました。
• モダンブラウザ対応のノーマライズCSSですが、beta-2 以降の動きがあまり無いようです。
• 公式サイト：https://github.com/jensimmons/cssremedy
• CDN：https://cdn.jsdelivr.net/npm/cssremedy@0.1.0-beta.2/css/remedy.css

A Modern CSS Reset

• 2019年10月1日公開のモダンブラウザ対応のノーマライズCSSです。
• 公式サイトやその日本語情報で、個々の定義の目的などが細かく紹介されています。
• 公式サイト：https://github.com/hankchizljaw/modern-css-reset
• 日本語情報：https://coliss.com/articles/build-websites/operation/css/a-modern-css-reset.html
• CDN：https://unpkg.com/modern-css-reset/dist/reset.min.css

reseter.css

• 2021年2月9日に 1.0.0 が公開されました。比較的新しいノーマライズCSSです。
• 公式サイト：https://github.com/resetercss
• CDN：https://cdn.jsdelivr.net/npm/reseter.css

結局どれを使えばよいの？

リセットCSSについては、日本の記事を見ると destyle.css 押しが多いようですが、GitHub で見ると The New CSS Reset の方が ☆数は多いようです。ノーマライズCSSは Normalize.css → sanitize.css → ress と遷移してきて、最近は A Modern CSS Reset の利用が増えているように見えます。

---