【2023年版】おすすめのリセットCSS（reset.css）3選【CDNのコピペあり】

WEBサイトがブラウザによって見え方が変わってしまうのを無くすリセットCSS（reset.css）。

リセットCSS（reset.css）と一言で言っても、ブラウザ同士の見え方だけを調整したもの、全てのタグをリセットさせるもの、単位が違うものなどなど、種類が多くあります。

そこで今回は、私の独断と偏見でまとめたおすすめのリセットCSS（reset.css）を紹介します。

destyle.css

個人的に一番よく使うのがこのdestyle.cssというリセットCSS（reset.css）。

このdestyle.cssは、h1タグだろうとpタグだろうと全部共通の大きさに設定されるリセットCSS（reset.css）。

全てが同じ大きさになるので、いちいちスタイリングする手間は増えますが、CSSで各タグの大きさ調整が柔軟に対応できるのでお気に入りのreset.cssです。

各タグの表示を紹介するとこんな感じ。

CDNはこちらです。

<!-- reset.css destyle -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css"
/>

github

modern.css

おそらく一番無難なリセットCSS（reset.css）がこのmodern.css。（自分調べ）

CSSのフレームワークであるtailwindcssで標準設定されているというのもあって使っている人は多いかと思います。

CSSファイル自体も最小限にとどめているため、読み込み速度がはやいのも大きな特徴。

各タグの表示を紹介するとこんな感じ。

CDNはこちらです。

<!-- reset.css modern-css-reset -->
<link
  rel="stylesheet"
  href="https://unpkg.com/modern-css-reset/dist/reset.min.css"
/>

github

ress.css

スタイリングする際に意外とストレスだったり厄介だったりする各タグに標準で設定されているmarginやpadding。

ress.cssは、modern.css並にCSSファイルを最小限に留めながら、各タグに標準で設定されているmarginやpaddingは全て0に設定されています。

特にdl/dt/ddタグをよく使う人やプロジェクトの場合はmodern.cssよりress.cssのほうが扱いやすいです。

各タグの表示を紹介するとこんな感じ。

CDNはこちら。

<!-- reset.css ress -->
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css" />

また、コマンドラインで簡単にダウンロードすることもできるのでこちらの方法で導入するのもおすすめです。（node.js,npm導入前提です。）

npm install --save ress

github

おまけ：Reboot.css

Bootstrapに標準設定されているリセットCSS（reset.css）です。

Bootstrapで使うことを前提にしているというのもあり、単位がremで設定されています。

フルレスポンシブ対応に拘りたい人やBootstrapを頻繁に使って慣れている人（あまり見たことないけど…。）は使いやすいとBootstrapをよく使う人から聞きました。

各タグの表示を紹介するとこんな感じになります。

github

最後に

ということで、私の独断と偏見でまとめたおすすめのリセットCSS（reset.css）3選でした。

他にもおすすめやよく使っているリセットCSS（reset.css）があれば気軽にディスカッションで教えていただきたいです！

それでは。