リセットCSSとは？初心者でもわかる完全ガイド

CSS(シー・エス・エス)

2025.10.05

この記事は約4分で読めます。

Web制作を始めたばかりの人が最初に戸惑うのが、「ブラウザごとにデザインがずれる」という問題。その原因を解決してくれるのが、今回紹介する 「リセットCSS」 です。この記事では、リセットCSSの意味や役割、使い方、おすすめファイルまでを初心者にもわかりやすく解説します。

リセットCSSとは？
リセットCSSの役割とメリット
リセットCSSの使い方
有名なリセットCSSファイル
Normalize.cssとの違い
簡易リセットCSSのコード例
まとめ

リセットCSSとは？

リセットCSS（Reset CSS） とは、ブラウザごとに異なる初期設定（デフォルトのスタイル）をリセットするためのCSSです。

HTMLタグには、最初からブラウザによって自動的に設定された余白や文字サイズがあります。
例えば、<h1> タグは太字で大きく表示され、<ul> には左側の余白（インデント）が付いています。

これらの初期スタイルはブラウザごとに微妙に異なるため、
「Chromeでは綺麗なのに、Safariではずれて見える」といった現象が起こります。

その差をなくすために、すべてのスタイルを一旦“まっさら”な状態に戻すのがリセットCSSです。

リセットCSSの役割とメリット

リセットCSSを導入すると、以下のようなメリットがあります。

ブラウザ間の差をなくせる

各ブラウザの初期スタイルを打ち消すことで、デザインの崩れを防げます。

デザインをゼロから統一できる

すべての余白や文字サイズを自分で指定できるため、統一感のあるデザイン設計が可能になります。

コーディングの再現性が高まる

チーム開発や他人のPCでも同じ見た目を再現しやすくなり、品質を一定に保てます。

リセットCSSの使い方

リセットCSSの使い方は簡単です。HTMLの <head> 内でCSSファイルを読み込むだけです。

<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">

ポイントは、「reset.css」を最初に読み込むこと。リセットしたあとに自分のスタイル（style.css）を上書きしていく流れです。

有名なリセットCSSファイル

リセットCSSにはいくつかの定番ファイルがあります。

名称	特徴	作者
Eric Meyer’s Reset CSS	世界的に定番。最もシンプルで軽量。	Eric Meyer
HTML5 Doctor Reset	HTML5タグにも対応。より新しい構文をサポート。	HTML5 Doctor
Normalize.css	リセットではなく“整える”CSS。自然な見た目を維持。	Nicolas Gallagher
Destyle.css	モダンブラウザ向けの完全リセット。より厳密な調整が可能。	nicolas-cusan

特に最近は、Normalize.css や Destyle.css がよく使われています。

Normalize.cssとの違い

リセットCSSとよく比較されるのが「Normalize.css」です。
この2つの違いを簡単にまとめると次の通りです。

比較項目	Reset CSS	Normalize.css
スタイルの考え方	すべてを初期化	ブラウザ間の差を整える
見た目	完全にまっさら	自然なデザインを維持
向いている人	デザイナー・細部にこだわりたい人	実務重視・スピード重視の人

初心者には、Normalize.cssの方が扱いやすい場合も多いです。

簡易リセットCSSのコード例

最小限のリセットだけを自分で書きたい場合は、以下のようなコードでもOKです。

/* reset.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
}

この程度でも、基本的なズレや崩れはほとんど防ぐことができます。