CSSのリセットとノーマライズの違い：どちらを使うべきか？

2024年10月19日

異なるブラウザは、要素に独自のデフォルトスタイルを持っているため、同じHTMLコードでもブラウザごとに見た目が異なることがあります。これを解消するために使われるのがリセットCSSとノーマライズCSSです。

この記事では、リセットCSSとノーマライズCSSの違いと、プロジェクトに応じてどちらを使うべきかを解説します。

リセットCSSとは？

リセットCSSは、すべての要素のデフォルトスタイルを一旦「ゼロ」にするスタイルシートです。これにより、ブラウザ間でスタイルのばらつきを防ぎ、完全に一貫したスタイルを適用できるようにします。

代表的なリセットCSS

CSS

/* Eric Meyer's Reset CSS */
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, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output,
ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

メリット:
スタイルのばらつきがなくなり、完全なコントロールが可能になります。
デメリット:
すべてのスタイルをゼロから定義する必要があるため、作業量が増える可能性があります。

ノーマライズCSSとは？

ノーマライズCSSは、ブラウザごとのデフォルトスタイルを調整して、標準的な見た目を保つためのスタイルシートです。デフォルトスタイルを「リセット」するのではなく、各ブラウザのスタイルを「整える」ことを目的としています。

ノーマライズCSSの一例

CSS

html {
    line-height: 1.15; /* 改行間のスペース調整 */
    -webkit-text-size-adjust: 100%; /* モバイルブラウザの文字サイズ調整 */
}

body {
    margin: 0;
}

メリット:
デフォルトスタイルを尊重しつつ調整するので、作業が少なくて済みます。
デメリット:
プロジェクトによっては、思い通りのスタイルにするためにさらに微調整が必要な場合があります。

リセットCSSとノーマライズCSSの違い

項目	リセットCSS	ノーマライズCSS
目的	すべてのデフォルトスタイルを無効にする	各ブラウザのスタイルを調整する
開発の手間	一からスタイルを作成する必要がある	必要な調整のみ行う
見た目の一貫性	完全に一貫性が得られる	デフォルトスタイルに依存する部分あり
使用例	独自のデザインを完全に反映したい場合	ブラウザ間の細かな差異を整える場合

どちらを使うべきか？

どちらを選ぶかは、プロジェクトの要件や作業効率を考慮する必要があります。

リセットCSSが向いている場合
- 完全に独自のデザインを適用したいとき
- 見た目の一貫性が非常に重要なプロジェクト（例：デザイン重視のサイト）
ノーマライズCSSが向いている場合
- シンプルなデザインで、ブラウザ間の微調整のみが必要なとき
- 作業量を抑えて効率的に進めたいとき