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

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

Windows 7のサポートが終了し、新しいEdgeはchromiumベースになり、また既にIE11のサポートを終了しているサービス(GitHub, Dev.toなど)もでてきました。

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

現在の環境に適した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をサポートする(比較的古いもの)。
  • ユーザエージェントによるスタイルのエラーを修正(ノーマライズ系)。
  • ユーザエージェントによる独自スタイルを元に戻す(リセット系)。
  • 一貫したスタイルのベースを作成する(独自のスタイルを作成)。

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

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

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

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

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

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

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

※2022/6/23 ver.1.7.2(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.2.0-beta1 2022/5/13のバージョン(GitHub

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

※Reboot v4.6.1 2021/10/28のバージョン(GitHub

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

定番のCSSリセット

Eric MeyerのCSS Reset

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

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

normalize.css

バージョンアップが重ねられ、2022年でも現役で使用できる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/15のバージョン(GitHub
参考: reset.cssとnormalize.cssに続く新しいリセット用CSS、モバイル対応・最近の実装スタイルを考慮したスタイルシート -sanitize.css

sponsors

top of page

©2022 coliss