リセットCSS。
フロントエンドに関わったことがある人なら、一度は「とりあえず入れるもの」として扱った経験があるはずです。
ただ、2026年の今、その感覚のまま使い続けているなら少し危ない。
ブラウザは進化し、UA stylesheetは整理され、昔ほど差異は激しくない。それでもゼロにはならない。
この記事では、いわゆる「全部消す系リセット」から距離を置きつつ、Chromium、Mozilla、WebKitそれぞれのUA stylesheetを前提に、今の環境に適したリセットCSSの考え方をまとめます。
フロントエンドを勉強中の人にも、実務で何年もCSSを書いている人にも刺さるように書きます。
教科書的な順序は気にしません。現場で感じる違和感から話を進めます。
なぜ今 リセットCSSを見直す必要があるのか
理由は単純です。
昔のリセットCSSが、今のブラウザ事情と噛み合っていないケースが増えた。
代表例が、* { margin: 0; padding: 0; } から始まる完全初期化型。
見た目は揃う。でも、意味も一緒に消える。
見出し、リスト、フォーム、ボタン。
本来ブラウザが持っている「最低限の読みやすさ」や「操作しやすさ」まで消してしまう。
その結果どうなるか。
CSSが増える。修正が増える。レビューで「これ何のため？」が増える。あるあるです。
本当に、全部ゼロから作り直す必要がありますか。
UA stylesheetという前提を無視しない
2026年のリセットCSSを考える上で、避けて通れないのがUA stylesheetです。
UA stylesheetとは、ブラウザが最初から持っているスタイル定義。
何もCSSを書かなくても、見出しが大きく、段落に余白があり、ボタンがボタンらしく見える理由がこれ。
そして重要なのは、主要ブラウザごとに中身が少しずつ違うことです。
Chromium UA stylesheet Chrome Opera
Chromium系は、かなり現代的で整理されています。
marginやfont-sizeの定義は比較的素直で、極端なクセは少ない。
見出しの余白、リストのインデント、フォーム要素のベーススタイル。
この辺りは、そのまま使っても破綻しにくいレベルまで来ています。
だからこそ、Chromium前提で作られた完全リセットは、SafariやFirefoxで違和感を生みやすい。
Chromeで見て問題ない、が罠になる瞬間です。
Mozilla UA stylesheet Firefox
Firefoxは、UA stylesheetがやや保守的。
見出しやフォーム周りにFirefoxらしさが残っています。
特にフォーム要素。
buttonやinputの見た目、フォーカスリングの出方は、Chromiumと差が出やすい。
完全リセットを入れると、この差を自前で全部吸収する羽目になる。
Firefoxだけ微妙におかしい、という報告が上がる原因の一つです。
WebKit UA stylesheet Safari
Safariは、いまだに独特。
WebKit UA stylesheetは、他と同じに見えて、細部が違う。
特にフォームとテキスト周り。
line-height、font-sizeの扱い、ボタンの内側余白。
完全初期化型リセットを使うと、Safariだけ文字が詰まる、ボタンが小さいという現象が起きやすい。
リセットCSSは やめる のではなく 変える
誤解しがちですが、話は「リセットCSSをやめよう」ではありません。
何を消して、何を残すかを変える。
2026年の現実的な方針はこれです。
- 意味を持つデフォルトは なるべく残す
- ブラウザ差が出やすい部分だけを揃える
- 設計意図が分かるリセットにする
2026年向け 実務で使えるリセットCSSの考え方
box-sizingは迷わずborder-box
*, *::before, *::after {
box-sizing: border-box;
}
これはもう議論が終わった領域。
UA stylesheetとの差異も減り、レイアウト事故を防げる。
bodyのマージンだけはリセットする
body {
margin: 0;
}
bodyの余白は、デザインの自由度を下げがち。
ここは消していい。
見出しと段落は消し過ぎない
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: inherit;
}
p {
margin: 0;
}
line-heightまで消すと一気に読みづらくなる。
ここはUA stylesheetに任せる方が楽です。
フォーム要素は触り過ぎない
button, input, select, textarea {
font: inherit;
}
ここが一番の地雷ゾーン。
最低限フォントを揃える。それ以上はコンポーネント側でやる。
軽いリセットCSSのメリット
CSSが減る。
ブラウザ差の調査コストが下がる。
そしてレビューが楽になる。
なぜこの余白があるのか、なぜこのボタンはこの見た目なのかが説明できる。
そのCSS、本当にあなたが責任を持つ必要がありますか。
もちろんデメリットもある
UAの影響を完全に排除できない。
チーム内で設計思想を共有しないと破壊されやすい。
リセットCSSは設計思想です。
書いた人が去ると壊れる。ここは覚悟がいる。
最後に 個人的な偏見として
全部消すリセットCSSは、ブラウザと戦う行為だと思っています。
ブラウザは敵ではない。
長年の知見が詰まった味方です。
UA stylesheetを理解し、その上に必要なルールだけ足す。
それが2026年の現実的で疲れにくいリセットCSSだと考えています。
