2020年、モダンブラウザに適したCSSリセットのまとめ

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

Windows 7のサポートが終了し、新しいEdgeはchromiumベースになり、また既にIE11のサポートを終了しているサービス(GitHub, Dev.toなど)もでてきました。
現在の制作環境に合わせて制作された新しいCSSリセットの中から特に注目すべき、CSSリセットを紹介します。CSSのテクニックや知見も満載です!

モダンブラウザに適したCSSリセットのまとめ

更新
2020/8/20: reboot.css, sanitize.cssがアップデートされたので変更。
2020/7/21: A Modern CSS Resetがアップデートされたので変更。
2020/5/13: A Modern CSS Reset, Reboot.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の場合、下記の順番で記述します。

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

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

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

※2020/7/21のバージョン(GitHub

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

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

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

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

※2019/9/13のバージョン(GitHub

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

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

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

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

※Reboot v4.5.2 2020/8/7のバージョン(GitHub

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

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

この記事ではたくさんのCSSリセットを紹介していますが、実際に使用する際には1つで十分です。ではどのCSSリセットが自分に適しているか、その選び方とカスタマイズ方法を紹介します。

定番のCSSリセット

Eric MeyerのCSS Reset

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

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

normalize.css

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

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

sanitize.css

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

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

sponsors

top of page

©2020 coliss