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

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

IE11のサポート終了から2年が経ち、現在はモダンブラウザの時代です。Chromeをはじめ、chromiumベースのEdge、Safari、Firefoxはエバーグリーンブラウザ(最新版に自動アップデートするブラウザ)と呼ばれています。

現在の制作環境に合わせて制作された新しいリセットCSSの中から特に注目すべきリセットCSSを紹介します。CSSのテクニックや知見も満載です!

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

更新履歴
2024/1/31: リセットCSSすべての最新版に対応。
2023/11/8: A (more) Modern CSS Resetを追加。
2023/11/8: リセットCSSすべての最新版に対応。
2023/7/31: リセットCSSすべての最新版に対応。
2023/2/14: リセットCSSすべての最新版に対応。
2022/11/16: @acab/reset.cssを追加。
2022/9/8: リセットCSSすべての最新版に対応。
2022/7/5: リセットCSSすべての最新版に対応。
2022/3/3: リセットCSSすべての最新版に対応。

リセットCSSとは

リセットCSSとは、ブラウザに付属しているデフォルトのスタイルを打ち消す(リセットする)CSSのことです。

すべてのブラウザには、表示するWebページのすべてに適用される「user agent stylesheet(以下、UA stylesheet)」と呼ばれるデフォルトのスタイルが付属しています。これらのスタイルシートはオープンソースで公開されています。

  1. Chromium UA stylesheet (Chrome, Opera)
  2. Mozilla UA stylesheet (Firefox)
  3. WebKit UA stylesheet (Safari)

下記ページに各ブラウザのuser agent stylesheetをまとめました。

最近では多くのスタイルがすべてのUA stylesheetで一貫されていますが、一貫されていないものもあります。UA stylesheetごとの矛盾を扱うために、CSSリセットは誕生しました。CSSリセットとはブラウザによるスタイルの差異をなくすことが目的で、通常はスタイルの一番上に記述し、他のスタイルの前にページに適用されるスタイルです。

また、似たものとしてノーマライズがあります。リセットではすべてのスタイルに同じビジュアルを与えますが、ノーマライズでは多くの有用なUA stylesheetのスタイルを維持するものです。

リセットCSSの使い方・書く順番

リセットCSSの使い方は、通常のCSSと同じです。
ただし、ブラウザに付属しているデフォルトのスタイルを打ち消すために使用するので、リセットCSSを一番上に記述します。

リセットCSSがreset.css、通常のCSSがstyle.cssの場合、下記の順番で記述します。

HTMLに記述する時の注意点は、下記ページに詳しく解説しています。

どのリセットCSSが適しているかの選び方・カスタマイズ方法

この記事ではたくさんのリセットCSSを紹介していますが、実際に使用する際には1つで十分です。ではどのリセットCSSが自分に適しているか、下記の項目を目安にします。

  • IEをサポートする(比較的古いもの)。
    ※マイクロソフトはIE11のサポートを2022年6月15日に終了しました。
  • ユーザエージェントによるスタイルのエラーを修正(ノーマライズ系)。
  • ユーザエージェントによる独自スタイルを元に戻す(リセット系)。
  • 一貫したスタイルのベースを作成する(独自のスタイルを作成)。

選び方やカスタマイズの詳しい方法は下記をご覧ください。

A (more) Modern CSS Reset -モダンブラウザに最適化された新しいリセットCSS

後述のモダンブラウザ用のリセットCSS「A Modern CSS Reset」から、現在の環境に合わせてモダンブラウザに最適化されたリセットCSSです。

モダンブラウザをターゲットにしたWeb制作では、リセットCSS自体が必要ないかもしれません。とは言っても、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあり、それらをまとめたものです。

※2023/9/18(A (more) Modern CSS Reset)

上記のスタイルシートは、コメントなどを削除したものです。
各スタイルシートの詳しい説明は、以前の記事をご覧ください。

@acab/reset.css -CSSの新機能を効果的にうまく使った、新時代のリセットCSS

:whereで詳細度を低く保ち、iOSのSafariで100vhが高さいっぱいにならないを解決できる新しいビューポート単位、color-schemeによる自動ダークモードなど、CSSの新機能を効果的に使用した新時代のリセットCSS。

※2023/9/27(GitHub

上記のスタイルシートは、コメントなどを削除したものです。
各スタイルシートの詳しい説明は、以前の記事をご覧ください。

Josh's Custom CSS Reset -最近の仕様に対応したCSSリセット

過去のリセットCSSは10年以上も更新されておらず、その間にCSSは進化しました。最近のデバイス・モダンブラウザの仕様に対応したモダンリセットCSSです。このリセットCSSはデザインに関係なく、どんなプロジェクトでも使用できます。

※2023/6/9 (Josh's Custom CSS Reset

上記のスタイルシートは、コメントなどを削除したものです。
各スタイルシートの詳しい説明は、以前の記事をご覧ください。

このJosh's Custom CSS ResetにインスパイアされたリセットCSSもあります。

※2023/8/13 (GitHub

The New CSS Reset -すべてのスタイルを削除するリセットCSS

CSSの新しい機能を使用した、シンプルで軽量なCSSのリセット。
displayプロパティを除いて、ブラウザから取得されるデフォルトのスタイルを使用したくないという目的に基づいて構築されています。

※2023/10/24 ver.1.11.1(GitHub

上記のスタイルシートは、コメントなどを削除したものです。
各スタイルシートの詳しい説明は、以前の記事をご覧ください。

A Modern CSS Reset -モダンブラウザ用のリセットCSS

モダンブラウザをターゲットにしたWeb制作では、CSSにおけるブラウザの互換性の問題はIE6の頃に比べるとはるかに少なくなり、無理なリセットやすべてをリセットする必要はなくなりました。現在のWeb制作に合わせて制作された新しいリセットCSSが、この「A Modern CSS Reset」です。

すべての要素と疑似要素に対してbox-sizing: border-box;を定義し、リストやフォーム周りにも細やかな配慮がされたリセットCSSです。

※2021/1/18のバージョン(GitHub

上記のスタイルシートは、コメントなどを削除したものです。
各スタイルシートの詳しい説明は、以前の記事をご覧ください。

CSS Remedy -後方互換性を備えた新しいリセットCSS

モダンブラウザだけをターゲットにするのが難しい場合は、この「CSS Remedy」がお勧めです。Mozilla Developerによる新しいプロジェクトで、後方互換性を備えつつ、現在のデスクトップやスマホの環境に合わせたリセットCSSです。

プロパティや値を後方互換性について心配する必要がない場合のみ定義し、CSSがデフォルトでどのように動作するべきか現代的な考えでUAスタイルを上書きすることができます。

※2021/4/30のバージョン(GitHub

上記のスタイルシートは、コメントなどを削除したものです。
各スタイルシートの詳しい説明は、以前の記事をご覧ください。

Reboot.css -Bootstrapで採用されているリセットCSS

Reset CSSやNormalize.cssよりも使いやすく、これからのWebサイトやスマホアプリのリセットCSSとして設計された「Reboot.css」です。Bootstrapで採用されているリセットCSSで、多くの実績があるのも特徴です。

Reboot.cssはnormalize.css 2.0に似ていますが、リセット用の便利なスタイルが用意されています。

※Reboot v5.3.2 2023/9/14 (GitHub

Bootstrap v4のReboot.cssも掲載しておきます。

※Reboot v4.6.2 2022/7/20 (GitHub

上記のスタイルシートは、コメントなどを削除したものです。
各スタイルシートの詳しい説明は、以前の記事をご覧ください。

定番のリセットCSS

Eric MeyerのCSS Reset

さすがに古いので使用するには、カスタマイズが必要だと思います。

※2011/1/26のバージョン(Eric MeyerのCSS Reset

normalize.css

バージョンアップが重ねられ、2023年でも現役で使用できるリセットCSSです。

※normalize.css v8.0.1 2018/11/5のバージョン(GitHub
参考: CSSリセットとは異なる、Normalize.cssの特徴や使い方などの解説

sanitize.css

reset.cssとnormalize.cssに続くリセットCSS。

※sanitize.css 13.0.0 2021/9/14のバージョン(GitHub
参考: reset.cssとnormalize.cssに続く新しいリセット用CSS、モバイル対応・最近の実装スタイルを考慮したスタイルシート -sanitize.css

sponsors

top of page

©2024 coliss