【2019年版】リセットCSSのおすすめと非推奨はこちら

リセットCSSはブラウザのデフォルトで設定されたCSSを打ち消してブラウザ間の表示を揃えるためのCSSファイル。

新規サイトを作成するとき、コーディングルールを考えるとき、絶対に考えるreset.css。

決定版が欲しいところなのでまとめました。

実際、毎年大きな差分もなく、古いブラウザの最適化がされているくらい。正直どれでも良かったりする。

色々あるけど結局どれを使えばいいかわからないので、推奨と非推奨で分けました。理由は個人的感覚。

おすすめ

HTML5 Doctor Reset CSS

全部リセット。HTML5にも対応

ress.css

Reset.cssとNormalize.cssのいいとこ取りのリセットCSS。
marginやpaddingなどはリセットしておらず、CSSが書きやすく、どうしても全部リセットしたく無いのであればこれを選択します。
npmでも配信しているので、reactやvueなどでも使いやすい。

  1. Apply box-sizing: border-box; in all elements.(すべての要素にbox-sizing: border-box; を適用
  2. Reset padding and margin in all elements.(すべての要素のpaddingとmarginをリセット
  3. Specify background-repeat: no-repeat in all elements and pseudo elements.(すべての要素に background-repeat: no-repeat; を適用)
  4. Inherit text-decoration and vertical-align to ::before and ::after.(before要素やafter要素にtext-decorationやvertical-alignを継承
  5. Remove the outline when hovering in all browsers.(ホバー時のoutlineを無効化
  6. Specify font-family: monospace in code elements.(font-familyにmonospaceを指定
  7. Reset border-radius in input elements.(input要素のborder-radiusを無効化)
  8. Specify font inheritance of form elements.(フォーム要素でfontを継承)
  9. Remove the default button styling in all browsers.(ブラウザ毎のボタンの標準スタイルを打ち消し)
  10. Specify textarea resizability to vertical.(テキストエリアで risize: vertical; を指定)
  11. Apply cursor: pointer to button elements.(button要素に cursor: pointer; を適用)
GitHub

🚿 A modern CSS reset. Contribute to filipelinhares/ress deve…

非推奨

Eric Mayer’s Reset CSS 2.0

全部リセット。一部HTML5未対応と聞いたので非推奨

Normalize.css

全部はリセットせず、デフォルトのブラウザの設定を残す。
結構デフォルトの設定は邪魔なので、全部リセットがいい気がしている。

GitHub

A modern alternative to CSS resets. Contribute to necolas/no…

roboot.css

bootstrapのcss。変なcssが入っていたりして結構使いづらい印象。bootstrapだけでなく他のフレームワークのreset.cssもそう。なんででしょう。

GitHub

The most popular HTML, CSS, and JavaScript framework for dev…