2021年版 おすすめリセットCSSとは?使い方や特徴を紹介

画像:今時のおすすめリセットCSS

この記事は「リセットCSSとは何か知りたい」「リセットCSSはどれを選べば良いの?」いや、そもそもいらないのでは?」という方に向けて書いています。

リセットCSSは、各ブラウザがデフォルトで持っているCSSのスタイルをリセットする目的で使います。

つまり、ブラウザ毎の見た目を揃えやすくなります。

リセットCSSにはいくつか種類があり、結論から言うと、これで完璧!っていうものはありません。「全く使わない」という選択肢もありです。

ですが、ChromeとSafariなどブラウザ毎の余白の取り方が違ったり、見た目が違うフォーム周りが気になる事も。そんな時は、リセットCSSを検討してみて下さいね。

リセットCSSは、ファイルはもちろん、CDNで読み込ませるだけでも簡単に導入出来ます。

今回は、2021年現在のおすすめリセットCSSや、リセットCSSの基本と使い方をご紹介していきます。

リセットCSSとは?

リセットCSS
リセットCSSとは、各ブラウザがデフォルトで持っているスタイルをリセットする事が目的のCSS。各ブラウザ間での表示の違いを揃える為に読み込ませます。

ご存じかも知れませんが、各ブラウザはそれぞれ独自のスタイルシートを持っています(user agent stylesheet)。

これは、サイト制作者が特にスタイルを指定していなかったとしても、きちんと読みやすく表示する為のものです。

ただし問題は、各ブラウザでデフォルトのスタイルに違いがある事。ブラウザ毎の差異を気にしていたのではスタイルの調整が大変です。

リセットCSSは、この「ブラウザ間の差異を埋めるとか吸収する」といった目的で使います。

リセットCSSの読み込み順

<head>
  <meta charset="UTF-8">
  <!-- ↓の#に読み込みたいリセットCSSを先に読み込みます-->
  <link rel="stylesheet" href="#.css">
  <!-- ↓次に制作者のCSSファイル名を入れて下さい-->
  <link rel="stylesheet" href="style.css">
  <title>リセットCSSの説明</title>
</head>

先にブラウザ毎のデフォルトスタイルをリセットしてから、制作者側のスタイルで上書きするという流れで書いていきます。

ただ単に、先に読み込ませるだけなので難しくはないですね。CDNで読み込ませる事が出来る物もあります。

リセットCSSを使用するメリットとデメリット

記事の冒頭にも書きましたが、このリセットCSSを使えば完璧と言えるものはありません。プロジェクトによっては無理に使わなくても良いと思います。

以下、リセットCSSを使用する事のメリットとデメリットです。

リセットCSSのメリット

  1. ブラウザごとのデザインを揃えることが出来る
  2. ある程度、良い感じでスタイルが調整されている

リセットCSSのデメリット

  1. 使わないスタイルも含まれるため、CSSのファイルサイズが大きくなる
  2. リセットした項目を改めて自分で書かないといけない

おすすめの使い方は、極力シンプルなリセットCSSを使いつつ、自分に必要なスタイルを別途追加する方法です。

追加したいのは、レスポンシブで便利な「box-sizing: border-box;」やHTML5で追加されたタグなどでしょうか。これらが入っていないリセットCSSも多いです。

自分なりに使いやすいリセットCSSを持っておくと良いですよ。

おすすめのリセットCSS

多くのリセットCSSが更新を止めています。一方、HTMLとCSSの仕様は少しずつではありますが変化があります。

デバイスの多様化や今の制作フローに合わない等の理由から、今となっては紹介出来る物はかなり少ないです。

Destyle.css

公式の説明によると、

  • ブラウザ間の一貫性を保証します
  • 間隔(マージンとパディング)を削除し、フォントサイズと行の高さをリセットします
  • フォントサイズと行の高さをリセットします
  • (ほとんどの)ユーザーエージェントスタイルをリセットする必要性を防ぎます
  • 必要なものだけをターゲットにすることで、スタイルインスペクターの肥大化を防ぎます

ゴソッとデフォルトのスタイルを消してしまうので、分かり易いのですが、フォーム周りなどは消し過ぎかなと感じました。

Destyle.css

Destyle.cssのサポートブラウザ

Destyle.cssのサポートブラウザは、下記の通り。

  • Chrome
  • Edge
  • Firefox ESR+
  • Internet Explorer 10+
  • Safari 8+
  • Opera

Normalize.css

destyle.cssなどがデフォルトのスタイル設定をすべて消してしまうのに対し、Normalize.cssはデフォルトのスタイルを残しています。 例えば、hタグは、Normalize.cssでは見出しのレベルに合わせたフォントサイズになっています。

いわゆるノーマライズというものです。

しかし、見出しのフォントサイズなどに限らず、基本的に自分でCSSを調整する訳ですから気にしなくても良いと思います。

Normalize.cssはモジュール式のため、プロジェクトで必要なスタイルのみを利用し、必要ではないスタイルを削除して利用することができます。 例えば、フォームを利用しないのであれば、フォームのスタイルは削除できます。軽量化出来ますね。

HTML5にも対応しているので使いやすいです。

Normalize.css

Normalize.cssのサポートブラウザ

Normalize.cssのサポートブラウザは、下記の通り。

  • Chrome
  • Edge
  • Firefox ESR+
  • Internet Explorer 10+
  • Safari 8+
  • Opera

ress.css

ressは内部でNormalize.cssを使用しています。そこからカスタマイズされたスタイルです。

いくつか特徴を紹介します。

  • box-sizing: border-box;を指定してあります
  • パディング・マージンは全てリセット
  • ブラウザのデフォルト指定のボタンスタイルをリセット
  • すべてのブラウザで、ホバー時のoutlineをリセット
  • ボタン要素にcursor: pointerを指定

よく使う指定などをあらかじめ調整してくれています。カーソルやアウトライン、「box-sizing: border-box;」など、皆が必要とする部分の調整がしてあるのは良いですね。

通常版:ress.css

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

無理なリセットやすべてをリセットする様なことはしていません。現在のWeb制作に合わせて制作された新しいCSSリセットが、この「A Modern CSS Reset」です。

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

通常版:A Modern CSS Reset

結局どれがいいの?

配布されているものを使うなら、個人的には「Normalize.css」や「A Modern CSS Reset」をおすすめしています。お好みですが。

プロジェクト毎に使うリセットスタイルが変わってしまうと、かえってコーディングが大変になる事もあります。

毎回同じリセットCSSを使うか、自分が使いやすいスタイルをだけを集めた独自のリセットCSSを作るのも良いかも知れませんね。

画像:GoogleのHTML・CSSスタイルガイド

現在のGoogleのHTML・CSSガイドに沿ったコーディング規約/日本語訳