はじめに
「Chromeでは綺麗に見えるのに、Safariだとボタンの余白がずれる」「フォームのinputとbuttonだけフォントが違って見える」——こうしたブラウザ間の微妙な見た目の差異に悩まされた経験はないでしょうか。
原因の多くは、ブラウザごとに用意されているデフォルトスタイル（ユーザーエージェントスタイルシート）の違いにあります。この問題への定番の対処法として長らく使われてきたのが「CSSリセット」ですが、すべてのスタイルを一度ゼロにしてしまうため、見出しの太さや箇条書きのインデントまで自分で書き直す必要があり、かえって手間が増えることもありました。
そこで登場するのがnormalize.cssです。ゼロにリセットするのではなく、ブラウザ間の差異だけを「正規化（normalize）」してくれる、CSSリセットの現代的な代替手段です。
normalize.cssとは
normalize.cssは、Nicolas Gallagher氏らが開発したCSSライブラリで、「A modern alternative to CSS resets（CSSリセットの現代的な代替）」というコンセプトを掲げています。GitHub上で53,000以上のスターを獲得しており、Bootstrapをはじめ多くの著名なプロジェクトに採用されてきた実績のあるライブラリです。
主な特徴
- 有用なデフォルトを保持する - 一般的なCSSリセットとは異なり、見出しのサイズや太さなど、使い勝手の良いスタイルはあえて残します
- ブラウザ間の差異を正規化する -
inputやbuttonのフォント、sub/supのベースライン位置など、ブラウザごとにバラつきがある部分だけをピンポイントで修正します - バグや一般的な矛盾を修正する - 各ブラウザに存在する既知の表示バグに対して、実績のある修正が適用されています
- 詳細なコメント付きコード - ソースコード自体に「なぜこの記述が必要か」が書かれており、CSSの仕様や各ブラウザの癖を学ぶ教材としても優秀です
インストール
npmやyarnからインストールできるほか、CDN経由やファイルの直接ダウンロードでも利用できます。
# npm
npm install --save normalize.css
# yarn
yarn add normalize.css
CDNを使う場合は、<head>内で読み込むだけで導入できます。
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
/>
基本的な使い方
npmでインストールした場合は、自分のCSSファイルの先頭でインポートします。ポイントは、自作のスタイルより先に読み込むことです。こうすることで、normalize.cssが整えたベースの上に、自分のスタイルを重ねて上書きできます。
/* style.css */
@import "normalize.css";
/* ここから自作のスタイル */
body {
font-family: "Helvetica Neue", Arial, sans-serif;
}
バンドラー（Vite・webpackなど）を使っている場合は、エントリーポイントのJavaScript/TypeScriptファイルでインポートするのが一般的です。
// main.ts
import "normalize.css";
import "./style.css";
これだけで、ブラウザごとに異なっていた見出し・フォーム部品・テーブルなどの表示が、意図しない差異のない状態に揃います。
実践的なユースケース
フォーム部品のフォントを統一する
ブラウザによってはbuttonやinput、selectがOS標準のUIフォントを引き継いでしまい、周囲のテキストと見た目が揃わないことがあります。normalize.cssを導入した上で、以下のように自分のスタイルで統一するとより一貫性が出ます。
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
}
コンポーネントライブラリのベースとして使う
デザインシステムやUIコンポーネント集を自作する際、normalize.cssを土台にすることで「どのブラウザで見ても同じ挙動」を前提に設計を進められます。
/* main.css */
@import "normalize.css";
:root {
--color-primary: #2563eb;
--radius-base: 6px;
}
.button {
border-radius: var(--radius-base);
border: 1px solid var(--color-primary);
background: var(--color-primary);
color: #fff;
padding: 0.5em 1.2em;
}
normalize.cssがボタンの余分な枠線やパディングの差異をあらかじめ吸収してくれているため、.button側では「自分が指定した見た目」だけに集中できます。
既存プロジェクトへの段階的導入
すでに動いているプロジェクトに後から導入する場合も、既存のCSSより前に読み込むだけなので、大きな書き換えは不要です。まずステージング環境で見た目の差分を確認し、問題がなければ本番に反映するという段階的な進め方がおすすめです。
まとめ
normalize.cssは、CSSリセットのようにすべてをゼロにするのではなく、ブラウザ間の「意図しない差異」だけをピンポイントで正規化してくれるライブラリです。有用なデフォルトスタイルは活かしつつ、フォームやテーブルなど厄介な要素の表示ズレを解消できるため、「どのブラウザでも同じ見た目」を目指すプロジェクトの土台として今も広く使われています。
導入はインポート文1行を追加するだけなので、新規プロジェクトはもちろん、既存プロジェクトのCSS基盤を見直すきっかけとしても試してみてはいかがでしょうか。