Neat Design Journal

リセットCSSを考える

リセットCSSを考える

リセットCSSとは、SafariやChromeなどのブラウザが持つデフォルトスタイルをリセットするCSSのことです。各ブラウザは、Webサイトを表示する際にUAスタイルシートを適用しています。これは各ブラウザで異なることも多く、自分のサイトを作成・カスタマイズするにあたって、これらを逐一気にしていると作業コストがグッと上がってしまい非効率になりかねません。そのため、リセットCSSを用いてこれらのUAスタイルを一旦リセットし、新たに構築していくという考え方から生まれたものです。

リセットCSSには様々なものがあります。

この他にもまだまだありますが、リセットCSSとして世に出ているものにはリセット方法やどのスタイルをどうするかによって様々な種類があり、結局どれを選べばいいのかよく分かりません。

個人的にはDestyle.cssが一番好きでした。とりあえず全部リセットして後から上書きする方法が一番シンプルで扱いやすいと思っていたからです。ところが、最近ふと思ったんですが、USスタイルってそのブラウザが考える最も見やすいだろうというスタイルのはずなので、これを全てリセットして自分なりに上書きするっていうのはそれこそ二度手間で非効率だよなと。UAスタイルを尊重してできるだけリセットはせず、UAスタイルを活かす方向で行けないのかなと考えるようになりました。

UAスタイルシートは公開されている

そもそもUAスタイルシートって誰が決めてんだろうとかどこかにあるんだろうかって思っていた時に以下の記事を見つけました。

2025年、現在の環境に適したリセットCSSのまとめ

CSSにおけるブラウザによる互換性の問題はWeb制作でモダンブラウザをターゲットにした場合、以前に比べるとはるかに少なくなりました。昔から使用している無理なリセットCSSやすべてをリセットする必要は全

2025年、現在の環境に適したリセットCSSのまとめのファビコン
https://coliss.com/articles/build-websites/operation/css/css-reset-for-modern-browser.html
2025年、現在の環境に適したリセットCSSのまとめのサムネイル

Google ChromeやSafariのUAスタイルは公開されているんですね。これを検証しながら、自分のサイトに合わないスタイルや変更したいスタイルだけを一つずつリセットしていけば、完全オリジナルな、かつ余計なリセットをしない自分なりのリセットCSSが作成できるなと感じました。

私的リセットスタイル

前置きが長くなりましたが、私的リセットスタイルをご紹介したいと思います。

:where(html) {
    min-block-size: 100dvb;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scrollbar-gutter: stable;
}
/* generic block-level elements */
:where(body) {
    margin: 0;
    overflow-wrap: anywhere;
    word-break: normal;
    line-break: strict;
    text-wrap: pretty;
    text-spacing-trim: trim-start;
    text-autospace: normal;
}
:where(p) {
    margin-block-start: unset;
    margin-block-end: unset;
}
:where(blockquote) {
    margin-block-start: unset;
    margin-block-end: unset;
    margin-inline-start: unset;
    margin-inline-end: unset;
}
:where(figure) {
    margin-block-start: unset;
    margin-block-end: unset;
    margin-inline-start: unset;
    margin-inline-end: unset;
}
:where(img) {
    max-inline-size: 100%;
    block-size: auto;
    vertical-align: bottom;
}
/* heading elements */
:where(h1, h2, h3, h4, h5, h6) {
    margin-block-start: unset;
    margin-block-end: unset;
}
/* lists */
:where(ul, ol) {
    margin-block-start: unset;
    margin-block-end: unset;
    padding-inline-start: unset;
}
:where(dd) {
    margin-inline-start: unset;
}
:where(dl) {
    margin-block-start: unset;
    margin-block-end: unset;
}
/* form elements */
:where(input) {
    all: unset;
    cursor: pointer;
    &:focus-visible {
        --outline-color: #0077e6;
        outline: 2px solid var(--outline-color);
        outline-offset: 2px;
    }
}
/* inline elements */
:where(strong, b) {
    font-weight: 600;
}
:where(i, cite, em, var, address, dfn) {
    font-style: unset;
}
:where(pre) {
    margin-block: unset;
}
:where(small) {
    font-size: unset;
}

最終的にはリセットするだけでなくデフォルトの状態についても織り込みましたので、リセットCSSというよりはデフォルトCSSの方が呼び方としてはしっくりきます。

全体のポイントとしては、新しい擬似クラス:isと:whereの使い方で触れたように全部のスタイルを:whereで指定している点です。

新しい擬似クラス:isと:whereの使い方

今回は、CSS Selectors Level 4で仕様策定された比較的新しい擬似クラスの:isと:whereの使い方についてご紹介したいと思います。どちらも複数のセレクタをまとめることができるので便利なんですが、違いが […]

新しい擬似クラス:isと:whereの使い方のファビコン
https://neatdesignjournal.com/pseudo-classes/
新しい擬似クラス:isと:whereの使い方のサムネイル

また、細かく見ていただくと分かると思うんですが、基本的にはmarginやpaddingなどの余白に関わる箇所を主にリセットしている感じです。それと、inputタグなどform関連の要素については、私のサイトではほとんど使いませんので今のところこれで十分ですね。

最後に

細かいプロパティや値については解説を省略していますが、機会があればそれぞれについて深掘りしていきたいなと考えています。リセットCSSで闇雲にリセットすると、アクセシビリティ上の問題が発生したりしますので、やっぱり何事もほどほどがいいってことですね。