リセットCSSって何？おすすめのリセットCSSと使い方

2021.09.27

リセットCSSとは？

リセットcssとは、ブラウザのデフォルトのCSSをリセットしてくれるCSSファイルです。

ブラウザには、デフォルトで付属しているCSSがあります。
それによって、ブラウザによって表示の違いが起きないように、CSSをリセットします。

・ブラウザとは、Webページを表示するChrome、Safari、Edgeなど。

リセットCSSを指定して、どのブラウザでも表示を同じ状態にしましょう。

リセットCSSは、ネットにて公開されています。自分で作成する必要はありません。
有名なものから、コピペで使用しましょう。

こちらの「The New CSS Reset」は、ブラウザから取得されるデフォルトのスタイルをすべてリセットします。また、最も新しいプロパティを使用したリセットCSSになります。

こちらの「destyle.css」は、デフォルトのCSSほとんどをリセットします。よくオススメされている印象です。

リンク：destyle.css

こちらの「sanitize.css」は、デフォルトのCSSをリセットしつつも、最低限のCSSを残します。最低限は残るという面から、初心者には使いやすいです。

リセットCSSのファイル（例：reset.css）を作成したら、自作のcss（例：style.css）の『上』に記述します。

なぜ上にするの？

CSSは、上から下に順番に読み込まれます。
そこで、同じプロパティの記述がある場合、下に記述されたプロパティが優先されます。

例①

p {
　font-size: 10px;
　font-size: 20px;
}

この場合、ブラウザに反映されるフォントサイズは「20px」です。

例②

p {
　font-size: 15px;
}
p {
　font-size: 25px;
}

この場合も、ブラウザに反映されるフォントサイズは「25px」です。

まずはリセットする目的で使用するリセットCSSファイルを上にすること。
もしリセットCSSの読み込み順を下にした場合は、自作のCSSが上書きされるので、CSSが反映されない…。ということにもなりえます。