Zenn
🔰

reset.cssとは？【初心者向けCSS入門】

に公開
CSS
CSS 3
HTML 5
初心者向け
ノウハウ
tech

こんにちは！今日はWebサイト作りでよく出てくる**「reset.css」**について、できるだけカンタンに、やさしく解説します！

reset.cssってなに？

Webページを作るとき、ブラウザによってデザインが少しずつ違うことがあります。
たとえば、同じHTMLを書いても、

  • Google Chrome では余白がある
  • Safari では文字サイズが違う
    …みたいなことが起こるんです！

この違いを**リセット（＝初期化）**して、すべてのブラウザで見た目をそろえるために使うのが 「reset.css」 です！

よく使われるreset.cssの中身と解説

ここからは、よく使われる「reset.css」のコードと、それが何をしているのかを中学生にもわかる言葉で説明します！

① すべての要素の余白をなくす

reset.css
* {
  margin: 0;
  padding: 0;
}

✅ これは、すべてのタグ（*）の上下左右の余白（margin）と内側のスペース（padding）をゼロにする設定です。

📝 たとえば <h1>や<p>タグには、最初からちょっとした余白があるので、それをいったん「なし」にします。

② ボックスサイズの考え方を統一

reset.css
*, *::before, *::after {
  box-sizing: border-box;
}

✅ これは、幅や高さの計算方法を「分かりやすく」する設定です。

📝 本来は「padding（内側の余白）」や「border（枠線）」があると、全体のサイズが変わっちゃうのですが、この設定をすると「枠線込みのサイズ」で計算できて楽になります！

③ リストの●や番号を消す

reset.css
ol, ul {
  list-style: none;
}

✅ リストタグ（<ul>や<ol>）の●や数字を表示しないようにします。
📝 自分でデザインをするときに、「勝手に付いてくる丸印」はいらないことが多いので、これで消します。

④ リンクの下線を消す

reset.css
a {
  text-decoration: none;
  color: inherit;
}

✅ リンクの下線をなくして、色も親の要素に合わせます。
📝 デザインで「下線なしのボタン風リンク」にしたいとき、これでスタートラインをそろえます！

⑤ 画像のすき間をなくす

reset.css
img {
  display: block;
  max-width: 100%;
  height: auto;
}

✅ 画像の下にできる変なすき間をなくすための設定です。
📝 imgは本来「インライン要素」なので、文字のように扱われて下に空白ができがち。でもこの設定でそれを防ぎます！

おすすめ！最小構成のreset.css

これまで紹介したものをまとめると、こうなります👇

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

*::before,
*::after {
  box-sizing: inherit;
}

ol, ul {
  list-style: none;
}

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

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

まとめ：reset.cssで見た目をそろえよう！

reset.cssは「みんなのスタートラインを同じにするための魔法」みたいなもの。
Web制作のとっかかりとして、これを覚えておくとどんなブラウザでも安定した見た目を作れるようになります！

Discussion