CSSのリセットは必要？おすすめは？
「CSS 初期化」で検索する人の多くは、入れるべきか、入れるならどれが無難か、そして何がどう違うのかで迷っています。この記事では、フレームワークを使わずにサイト制作する前提で、Reset / Normalize / Sanitize を整理しつつ、最小構成と導入手順までまとめます。
CSS初期化を入れるか迷うのは普通
CSS初期化は「必須」ではありません。ですが、実務では入れておくと事故が減るため、 新規制作では何らかの初期化（またはそれに近いベースCSS）を入れることが多いです。
この記事でわかること
- CSS初期化の意味と、入れないと起きやすい問題
- Reset / Normalize / Sanitize の違い
- 用途別の選び方（ブログ向け・ツールUI向け）
- 最低限の初期化テンプレ（コピペ可）
- 導入手順と、崩れたときのチェック項目
CSS初期化とは何か
CSS初期化とは、ブラウザが最初から持っている「標準スタイル（デフォルトCSS）」の影響を揃える／弱めるための下準備です。ブラウザは要素ごとに余白や文字サイズなどを持っています。たとえば body の余白や、h1 の大きさ、ul のインデントなどです。
初期化を入れることで「どの環境でも同じ基準でデザインしやすい」状態を作れます。
初期化しないと起きやすいこと
余白が勝手についてレイアウトがズレる
body のデフォルト余白や、見出し・段落の上下余白が原因で、「左右に隙間ができる」「見出しだけ間が空く」などが起きやすくなります。
ブラウザ差で見た目が微妙に変わる
同じHTML/CSSでも、ブラウザによりフォーム部品の見え方や、文字の扱い、細かい挙動が異なることがあります。初期化がないと、制作側の環境では気づかないズレが出やすくなります。
box-sizing問題で「幅計算」が面倒になる
初期状態（多くは content-box）では、width に padding を足すと外側サイズが増えます。UIの箱（カードや入力欄など）を揃えるときに地味にハマりやすいポイントです。
フォームだけフォントが違って見える
input や button は親のフォントを継承しないことがあり、本文と入力欄でフォントがバラつくことがあります。初期化（またはベースCSS）で揃えておくと統一感が出やすいです。
Resetとは（デフォルトを広く消す）
Resetは、ブラウザ標準の余白や装飾を広い範囲でゼロに近づける考え方です。「まっさらな状態」からデザインしたいときに向きます。
ただし、強いResetは見出しやリスト、フォームなどの見た目も大きく変えるため、デザインを作り込まない場合は逆に調整が増えることがあります。
Normalizeとは（差をならす）
Normalizeは、Resetのように全てを消すのではなく、ブラウザ間の差や既知の不整合を「ならす」方向の考え方です。デフォルトの良さを活かしつつ、ズレる部分だけ調整したい場合に扱いやすいです。
Sanitizeとは（Normalize＋実務向けの初期値）
Sanitizeは、Normalize寄りの「差をならす」だけでなく、実務で困りやすい初期値をもう一歩“良い感じ”に整える立ち位置です。フレームワークなしで、UIを作りやすい土台が欲しい人に選ばれやすいです。
どれが「正解」かは目的で変わる
まとめると、目的別にこう考えると判断しやすいです。
- Reset：完全に自分のデザインで作り込みたい（真っ白スタート）
- Normalize：デフォルトを活かしつつ、ブラウザ差だけ抑えたい
- Sanitize：Normalizeに加えて、実務向けの初期値も欲しい
用途別：選び方の目安
ブログ・文章中心のサイトに向く選び方
文章中心のサイトは、見出し・段落・リストなど「文章パーツ」が多いです。強いResetを入れると、文章の読みやすさ（余白や階層）が消えてしまい、再調整が増えがちです。そのため、Normalize寄り（またはSanitizeの控えめ構成）が無難です。
ツールUI・フォーム中心のサイトに向く選び方
入力フォームやボタン、カードなどUI部品が中心なら、box-sizing やフォームの統一が効いてきます。Sanitize（または軽いReset＋自分のベースCSS）にすると、作業がラクになりやすいです。
既存CSSやテンプレに後から足すときの注意点
既存サイトに後から初期化を足すと、思わぬ崩れが起きることがあります。特に強いResetは影響範囲が広いので、後付けする場合は最小構成から入れるのが安全です。
最低限これだけ入れると事故が減る（ミニマム初期化）
「NormalizeやSanitizeを入れるほどでもない」「まずは事故を減らしたい」なら、以下の最小セットだけでも効果があります。
/* base-min.css: 最小の初期化（フレームワークなし向け） */
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
line-height: 1.5;
}
img, svg, video, canvas {
max-width: 100%;
height: auto;
}
button, input, select, textarea {
font: inherit;
}
強すぎる初期化を避けたいパターン
- 記事ページが多く、見出しやリストの「自然な余白」を活かしたい
- フォームの細部まで作り込まず、標準の見た目を活かしたい
- 既存のCSS（テンプレ／CMSテーマ）に後から足す
この場合は、まず上の「ミニマム初期化」か、Normalize/Sanitizeのような“消しすぎない系”の採用が安全です。
導入手順
どこに置く？読み込み順の基本
CSSは「土台 → 共通 → 部品 → ページ固有」の順に読み込むと、あとで管理しやすいです。
- reset / normalize / sanitize（初期化）
- base（フォント、行間、リンク、共通の余白ルールなど）
- components（ボタン、カード、フォーム部品）
- pages（ページ固有）
既存サイトに適用するときの安全な進め方
- まずは「ミニマム初期化」だけ入れて差分を確認する
- 崩れた箇所を「直す」より先に「原因（どの初期化が効いてるか）」を特定する
- 影響が大きい場合は、初期化を全体ではなく特定コンテナ配下だけに限定する（設計で回避）
よくある疑問
初期化は毎回自分で作るべき？
毎回ゼロから作るより、実績ある定番（Normalize/Sanitize/Reset）をベースにして、プロジェクト用に少し足すのが一般的です。「自分用の最小セット」を育てていくのは良い方法ですが、最初は定番を使った方が安心です。
NormalizeとSanitizeは誰が作ったの？
どちらも「誰かが思いつきで作った」ではなく、実際のブラウザ差や既知の挙動を踏まえたオープンソースの定番ライブラリとして広く使われてきました。（この記事では“概念と使い分け”を重視し、細かな実装差は用途に合わせて選べるようにしています。）
初期化を入れたのに崩れたときのチェック項目
bodyの余白が消えてレイアウトが変わっていないかbox-sizingの変更で幅計算が変わっていないか（固定幅UI）- フォーム要素の見た目が変わっていないか（特に
select） - 既存CSSの指定が弱く、初期化に負けていないか（詳細度・読み込み順）
まとめ
CSS初期化は必須ではありませんが、フレームワークなし制作では入れておくと作業が安定しやすいです。迷ったときは、まず「ミニマム初期化」から始め、必要に応じて Normalize/Sanitize の導入を検討すると安全です。
迷ったらこれ
- まずは ミニマム初期化（body margin / box-sizing / フォームfont / 画像max-width）
- 文章中心なら 消しすぎない方向（Normalize寄り）
- UI中心なら 作りやすい土台（Sanitize寄り or reset+自分ベース）
コピペ用：ミニマム初期化テンプレ（再掲）
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; line-height: 1.5; }
img, svg, video, canvas { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
