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

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

Windows 7のサポートが終了し、新しいEdgeはchromiumベースになり、また既にIE11のサポートを終了しているサービス(GitHub, Dev.toなど)もでてきました。
現在の制作環境に合わせて制作された新しいCSSリセットの中から特に注目すべき、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のスタイルを維持するものです。

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

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

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

※2019/10/4のバージョン(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で採用されているので、多くの実績があるのも特徴です。

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

※2019/11/28のバージョン(GitHub

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

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

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

定番のCSSリセット

Eric MeyerのCSS Reset

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

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

normalize.css

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

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

sanitize.css

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

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

sponsors

top of page

©2020 coliss