はじめに

開発を進めていく中でブラウザによるデザインの違いが発生した事があり
その時にreset.cssを知ったのでどんなreset.cssがあってどんな違いがあるのかを
次回のプロジェクトを立ち上げた時の役に立つと思って比べてみました。

対象者

この記事は下記のような人を対象にしています。

駆け出しエンジニア
プログラミング初学者
今からプロジェクトを立ち上げようとしている方

reset.cssとは

Webページはブラウザによってそれぞれデフォルトでスタイルを持っているため
その要素に当たっているデフォルトのスタイルをキャンセルする(resetする)
スタイルを当てるcssファイルの事です。

スタイルをリセットしておかないと開発時に確認しているブラウザでは
想定通りのスタイルが当たっているが、それ以外のブラウザでは
上手くデザインが表現できていないという事が発生してしまいます。

デメリットとしては当然デフォルトで当たっているスタイルを
リセットしてしまうのでスタイリングする手間が増える場合があります。

デフォルトでのブラウザ間での見え方の違い

<div>
  <div style={{background:"blue", width:'100%',height:'50px'}}>divタグ</div>
  <h1 style={{background:"red", width:'100%'}}>h1タグ</h1>
  <h2 style={{background:"green", width:'100%'}}>h2タグ</h2>
  <p style={{background:"orange", width:'100%'}}>pタグ</p>
  <button style={{background:"pink", width:'100%'}}>buttonタグ</button>
</div>

左からedge、Safari、Chrome

代表的なタグを見てみると

文字のスタイル
padding
buttonのデザイン
などの違いが発生している事がわかると思います。

様々なreset.cssを適応してみる

A (more) Modern CSS Reset

mayank99/reset.css

A Modern CSS Reset

### elad2412 the-new-css-reset

necolas normalize.css

結論

ただcssをリセットするだけではありますが、いろいろな種類があり
それぞれが特徴を持っている事がわかった

おわりに

使ってみた感想ですが、どれもそれぞれメリットデメリットがあるので
一番プロダクトに合っている、自分に合っているものを
使用して使いづらい部分をオリジナルにする方法がベストなのではないかと
感じました。

最後まで読んで頂きありがとうございました。
少しでも参考になったと思ったらいいね！お願いします

参考記事