normalize.cssとは？CSS Resetとの違いとBrowser Normalization

ページ内ナビ

概要

normalize.cssはCSS resetの代替として、browserごとのdefault style差や既知bugを補正するstylesheetです。全要素を初期化せず、HTML elementの有用な既定値をなるべく維持します。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-10-05

主な特徴

browser差異を小さくしつつuseful defaultを維持する

line-height、form control、HTML element display、typography等のbrowser差を補正し、全面resetよりもnative defaultを残します。

出典：[1][2]

補正ruleごとに理由をcommentで説明する

stylesheet内にbrowser差異やspec背景のcommentがあり、なぜそのruleが必要かを追いやすい構成です。

出典：[1][2]

単一CSS fileとしてnpm/CDN/直接downloadで導入できる

framework integrationを必要とせず、normalize.cssをbase stylesheetとして先に読み込むだけで利用できます。

出典：[1][3]

向いている用途

legacy browserを含む複数browserでbase style差を抑えたいprojectに向く

Chrome/Edge/Firefox ESR/Safariに加えてREADMEはIE10+もsupport対象としており、modern-only resetより広い互換性を必要とする場合の候補になります。

出典：[1]

導入前の確認

8.0.1は2018年releaseで長期stable状態にある

GitHub Releasesは使われておらず、tag 8.0.1とpackage metadataが安定版の基準です。新しいbrowser behaviorへの追従速度を重視する場合はmodern-normalize等とも比較してください。

出典：[3][4]

project独自のdesign resetは別途必要になる

normalize.cssはbrowser差異の補正が目的で、margin/typography/componentをproject designへ統一する完全resetやdesign systemではありません。

出典：[1]

参考にした公式資料

[1]normalize.css 8.0.1 README(2026-10-05)
[2]normalize.css 8.0.1 stylesheet(2026-10-05)
[3]normalize.css 8.0.1 package metadata(2026-10-05)
[4]normalize.css changelog(2026-10-05)
[5]normalize.css MIT license(2026-10-05)

編集部からの補足

normalize.cssはすべてをゼロにするresetではなく、browser間の既定style差を補正しながら有用なdefaultを残す方針です。8.0.1は2018年リリースで、repositoryはarchiveされていませんがversion更新は長期間ありません。

3ステップで試す

1
normalize.css 8.0.1を一時projectへ導入する
長期stable版8.0.1を固定し、base stylesheetとしての内容を確認します。
demo=$(mktemp -d "${TMPDIR:-/tmp}/normalize-css.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact normalize.css@8.0.1
2
normalize.cssを先に読み込むHTMLを作る
application CSSより前にnormalize.cssを読み込む基本構成を作ります。
printf "%s\n" '<!doctype html>' '<html><head><link rel="stylesheet" href="./node_modules/normalize.css/normalize.css"></head>' '<body><main><h1>Normalized page</h1><button>Button</button></main></body></html>' > index.html
3
代表的なnormalization ruleを確認する
browser差異を補正するline-heightとform controlのfont inheritance ruleが含まれることを確認します。
grep -q "line-height: 1.15" node_modules/normalize.css/normalize.css && grep -q "font-family: inherit" node_modules/normalize.css/normalize.css

公式READMEで確認

成長

成長の推移 · 直近30日

53,505 Stars

推移データを蓄積中です。

Built with

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

GitHub Topics

css
css-reset
normalize-css

Stars: 53,505
Forks: 10,310
Watchers: 1,455
Open Issues: 75
所有者種別: User
主要言語: CSS
ライセンス: MIT
リポジトリ最終更新: 2024/06/12