CSSリセットとNormalize.cssの違いと使い分け

CSSリセットとは？―すべてをフラットに初期化

CSSリセットは、ブラウザ独自のスタイルをすべて打ち消すことで、スタイルの差異をゼロベースに戻すアプローチです。

代表的なCSSリセット例

/* Eric Meyer's Reset CSS 2.0 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
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;
}

このように、全要素のmarginやpadding、borderなどを強制的に初期化します。

メリット・デメリット

Normalize.cssとは？―整えることで差を吸収

Normalize.cssは、ブラウザのスタイルを無理に消さず、「整える」ことにより一貫性を保つモダンなアプローチです。

基本の使い方

https://necolas.github.io/normalize.css/ から最新版をダウンロードして、プロジェクトに読み込みます。

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

Normalize.cssは、以下のように意図的にスタイルを残すことで、一貫したレンダリングを実現しています。

/* Excerpt from normalize.css */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

body {
  margin: 0;
}

メリット・デメリット

使い分けの指針：プロジェクトに合わせて選ぼう

カスタムリセットの選択肢も

実務では、CSSリセットとNormalize.cssの“いいとこ取り”をした独自のリセットCSSを使うケースも増えています。

/* 例: 独自リセット */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    line-height: 1.6;
    font-family: system-ui, sans-serif;
}

まとめ：プロジェクトの特性に応じた選択を

CSSリセットとNormalize.cssは、どちらが優れているというよりも目的と用途の違いを理解して使い分けることが重要です。
ゼロからデザインしたいならリセット、整ったスタートを切りたいならNormalize.css。さらに、プロジェクトに合わせて独自にカスタマイズする柔軟性も、現代のWeb開発には求められています。