最近、「2026年の環境に適したリセットCSS」といった話題を見かけました。
ブラウザの実装もだいぶ揃ってきたし、昔ほど大げさなリセットは不要なのでは？ という内容。たしかに一理あるなぁと思いながら眺めていました。数年前と比べても、ブラウザ間の差はかなり小さくなりましたもんね。
いまテンプレとしているリセット内容、いちど見直すいい機会かもしれない。そんなことを考えながら、ふと立ち止まりました。そもそも、私たちは“何を”リセットしているのか。
reset.css や normalize.css を読み込んで、そこからスタイルを書き始める。最近ではフレームワークに最初から組み込まれていることも多く、あまり意識する機会はないかもしれません。けれど実は、CSSは“まっさらな状態”から始まっているわけじゃありません。
CSSを書いていないHTMLを開いても、それなりに整った見た目になります。それは、ブラウザがあらかじめ用意しているCSSが自動的に適用されているからです。これが UA stylesheet と呼ばれるものです。
UA stylesheet ってなんぞや？
UA は User Agent の略で、ここではブラウザのことを指します。たとえば Google Chrome や Mozilla Firefox などは、それぞれ独自の初期スタイルを持っています。HTMLを読み込むと自動的に適用される、ブラウザの初期スタイルです。
何もCSSを書いていない、あるいはCSSファイルを読み込んでいないHTMLを開いてみると、だいたい次のような見た目になっていると思います。
- <h1> は大きな文字で表示される
- <ul> にはインデントが付く
- <button> はボタンらしい見た目になる
- <input> も、それなりに整った形で表示される
これらは、私たちが書いたCSSでなく、ブラウザ側があらかじめ当てているスタイルです。こういったものが UA stylesheet と呼ばれています。
UA stylesheet は DevToolsで確認できる
この UA stylesheet、開発者ツールを使って確認することができます。
Chrome DevTools を開いて任意の要素を選択し、 Styles パネルを見てみてください。そこには「user agent stylesheet」と書かれたルールが表示されていると思います。
たとえば <h1> を見ると、margin や font-size が設定されています。何も指定していないハズなのに、すでにスタイルがある状態です。このように、普段は意識していなくとも、ブラウザは最初から一定の見た目を用意しています。
reset.css は何をしている？
では、reset.css は何をしているのでしょうか。normalize.css や modern-css-reset などは、ブラウザごとの差異を減らし、スタート地点を揃えるためのものです。たとえば、次のようなことをしています。
- 見出しの margin を調整する
- フォントサイズを揃える
- フォーム要素の見た目を整える
- box-sizing を統一する
つまり、UA stylesheet の上に「自分たちの基準」を重ねている、ということになります。UA stylesheet を完全に消すというより、その影響を整理しやすくしている、と考えるほうが近いかもしれません。
整った環境があたりまえになっている？
現在の開発環境では、こうした整えられた状態から始めることがほとんどではないでしょうか。
reset.css が入っている。フレームワークがベースを用意している。ビルドツールがベンダープレフィックス（-webkit- など）を自動で付けてくれる。いつの間にか、「何もしていないつもり」で、実はかなり整えられた状態から始めている。
以前は -moz- や -webkit- を意識して書く場面もありましたが、現在は Autoprefixer などのツールが吸収してくれることが増えました。その結果、ブラウザ差をあまり意識せずにCSSを書けるようになり、開発はずいぶん楽になっています。
もちろん、これは悪いことではありません。ただ、そうした環境が前提ではない現場もありますし、ツールが何をしているのかを知らないまま使っていることもあります。
そうすると「なぜかスタイルがうまく当たらない」……そんな怪奇現象に出会うことも。
知らなくても困らないけど、知っていると見え方が変わる
正直なところ、UA stylesheet を知らなくても多くの案件は問題なく進みます。けれど、レイアウトが思った通りにいかないときや、ブラウザごとに微妙な違いが出るとき、「これはブラウザのデフォルトかもしれない」と考えられるだけで、原因の切り分けがしやすくなります。
CSSは、何もないところから始まっているわけではありません。ブラウザ固有の土台の上に、私たちのスタイルを積み重ねています。
いちど更地を見てみると、面白い発見があるかも
いつも当たり前のようにそこにあるリセットCSS。これが無い状態を見てみると、思わぬ学びにつながるかもしれません。
reset.css を外してページを表示してみたり、DevTools で user agent stylesheet を確認してみたり。ブラウザが最初に当てているスタイルを知るだけでもCSSの見え方は少し変わります。
整っていない状態を一度見ておくと、自分がどんな土台の上でCSSを書いているのかが、少しだけ見えてきます。
そして、これを知っておくことで、いざというときにも慌てずに済むかもしれません。
