リセットCSSはブラウザのデフォルトで設定されたCSSを打ち消してブラウザ間の表示を揃えるためのCSSファイル。
新規サイトを作成するとき、コーディングルールを考えるとき、絶対に考えるreset.css。
決定版が欲しいところなのでまとめました。
実際、毎年大きな差分もなく、古いブラウザの最適化がされているくらい。正直どれでも良かったりする。
色々あるけど結局どれを使えばいいかわからないので、推奨と非推奨で分けました。理由は個人的感覚。
おすすめ
HTML5 Doctor Reset CSS
全部リセット。HTML5にも対応
ress.css
Reset.cssとNormalize.cssのいいとこ取りのリセットCSS。
marginやpaddingなどはリセットしておらず、CSSが書きやすく、どうしても全部リセットしたく無いのであればこれを選択します。
npmでも配信しているので、reactやvueなどでも使いやすい。
- Apply box-sizing: border-box; in all elements.（すべての要素にbox-sizing: border-box; を適用）
- Reset padding and margin in all elements.（すべての要素のpaddingとmarginをリセット）
- Specify background-repeat: no-repeat in all elements and pseudo elements.（すべての要素に background-repeat: no-repeat; を適用）
- Inherit text-decoration and vertical-align to ::before and ::after.（before要素やafter要素にtext-decorationやvertical-alignを継承）
- Remove the outline when hovering in all browsers.（ホバー時のoutlineを無効化）
- Specify font-family: monospace in code elements.（font-familyにmonospaceを指定）
- Reset border-radius in input elements.（input要素のborder-radiusを無効化)
- Specify font inheritance of form elements.(フォーム要素でfontを継承)
- Remove the default button styling in all browsers.（ブラウザ毎のボタンの標準スタイルを打ち消し）
- Specify textarea resizability to vertical.（テキストエリアで risize: vertical; を指定）
- Apply cursor: pointer to button elements.（button要素に cursor: pointer; を適用）
🚿 A modern CSS reset. Contribute to filipelinhares/ress deve…
非推奨
Eric Mayer’s Reset CSS 2.0
全部リセット。一部HTML5未対応と聞いたので非推奨
Normalize.css
全部はリセットせず、デフォルトのブラウザの設定を残す。 A modern alternative to CSS resets. Contribute to necolas/no…
結構デフォルトの設定は邪魔なので、全部リセットがいい気がしている。
roboot.css
bootstrapのcss。変なcssが入っていたりして結構使いづらい印象。bootstrapだけでなく他のフレームワークのreset.cssもそう。なんででしょう。
The most popular HTML, CSS, and JavaScript framework for dev…
CSSの設計に関しては、こちらを一読すると良いです
