初心者必見！リセットCSSとは？導入する理由とおすすめの書き方ガイド

26

Views

リセットCSSとは？

HTMLとCSSでWebページを作っていると、「なんでこの余白が入ってるの？」「ブラウザによって見え方が違う！」といった経験はありませんか？ それは、ブラウザごとに用意されている初期スタイルが原因かもしれません。そんなときに役立つのがリセットCSSです。

リセットCSSとは？

リセットCSSとは、各ブラウザにあらかじめ用意されているデフォルトのスタイル（User Agent Stylesheet）を初期化するためのCSSです。これを適用することで、すべてのブラウザでほぼ同じ見た目をスタートラインにでき、デザインのズレを防ぐことができます。

なぜ必要なの？

  • ブラウザによって初期マージン・パディングが違う
  • フォームやリストなどの表示が環境によって異なる
  • 余計なスタイルを消して、自分のスタイルを正しく適用したい

リセットCSSを使うことで、どのブラウザでも一貫性のあるデザインが実現しやすくなります。

代表的なリセットCSS

ここでは、有名な2つのリセットCSSをご紹介します。

1. Meyer’s Reset CSS

Web制作者の間では定番のリセットCSSです。

/* https://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

かなり強力にスタイルを初期化するため、必要な要素の装飾まで消えてしまうこともあります。

2. Normalize.css

リセットではなく「標準化」に近いアプローチを取っているのがNormalize.cssです。

フォームや見出しなどの基本スタイルを整えつつ、見た目を揃えてくれます。過剰なリセットを避けたい場合におすすめです。

自作リセットCSSの例

必要最低限のリセットだけを使いたい場合、自分でカスタムするのもよい方法です。

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
  line-height: 1.6;
  background-color: #fff;
  color: #333;
}

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

box-sizing: border-boxは特に便利で、レイアウト崩れを防ぐために多くの現場で採用されています。

導入のタイミングと方法

リセットCSSは、プロジェクトのCSSの一番最初に読み込むのが基本です。ファイルを分ける場合は以下のように読み込みます。

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

CDNを利用する場合は、Normalize.cssのように直接読み込むこともできます。

まとめ

リセットCSSは、Web制作において見た目のズレや意図しないスタイルを防ぐための大事な下準備です。

  • シンプルなサイト → 自作リセットCSSでOK
  • 大規模・チーム開発 → Normalize.cssやMeyer’s CSSを利用

一度導入しておけば、余計なトラブルも減り、開発がスムーズになります。ぜひあなたのプロジェクトにも取り入れてみてください！

関連記事