HTML・CSS

2023年リセットCSSとは？おすすめやCDNも – reset css

画像：今時のおすすめリセットCSSは？Reset CSS

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

リセットCSSとは、リセット用のCSSを読み込む事で、各ブラウザがデフォルトで持っているCSSのスタイルを上書きリセットする事。

つまり、CSSを初期化してブラウザ毎の見た目を揃えやすくします。

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

ですが、やはりChromeとSafariなどブラウザ毎の余白の取り方が違ったり、見た目が大きく違うフォーム周り等が気になる事も。

今回は、2023年現在のおすすめリセットCSSや、 ファイルはもちろん簡単にコピペで読み込めるCDNを紹介します。

リセットCSSとは？

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

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

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

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

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

リセットCSSの読み込みの順番

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

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

CSSの順番は、まずリセットCSSを読み込ませてから、制作者側のCSSで上書きするという流れです。

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

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

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

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

リセットCSSのメリット

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

リセットCSSのデメリット

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

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

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

「box-sizing」はリセットではなく、初期値の「content-box」を「border-box」に変更するって事ですね。パディングやボーダーの計算が楽になります。

こういった理由から、自分なりにカスタマイズした使いやすいリセットCSSを持っておくと良いですよ。

リセットCSSが必要ない場合もある

BootstrapなどのCSSフレームワークを使う場合は、デフォルトのCSSが調整されている事が殆ど。この場合、リセットスタイルは必要ないかも知れませんね。

おすすめのリセットCSSを紹介

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

デバイスの多様化や制作フローに合わない等の理由から、今でも使えるリセットCSSはかなり少ないです。

次から紹介するものは今でも使えて、検索される事の多い物ですので参考にどうぞ。

ress.css

ress.cssは内部でNormalize.cssを使用しています。そこからカスタマイズされたスタイルです。気になる人が多い様で、このブログでもよく検索されるリセットCSSです。

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

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

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

ress.cssのCDN

<head>
  <meta charset="UTF-8">
  <!-- ↓にCDNのURLを入力-->
  <link rel="stylesheet" href="https://unpkg.com/ress@4.0.0/dist/ress.min.css">
  <!-- ↓次に制作者のCSSファイル名を入れて下さい-->
  <link rel="stylesheet" href="style.css">
  <title>リセットCSSの説明</title>
</head>

CDNリンク先：https://unpkg.com/ress@4.0.0/dist/ress.min.css

GitHubからダウンロードも出来ます。

GitHub：ress.css

Destyle.css

Destyle.cssの公式によると、

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

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

ただ、どのみちフォームはブラウザのデフォルトスタイルを上書きする事が多いです。その場合は気にならないかもしれませんね。

Destyle.cssのCDN

<head>
  <meta charset="UTF-8">
  <!-- ↓にCDNのURLを入力-->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.2/destyle.css">
  <!-- ↓次に制作者のCSSファイル名を入れて下さい-->
  <link rel="stylesheet" href="style.css">
  <title>リセットCSSの説明</title>
</head>

CDNリンク先：https://cdn.jsdelivr.net/npm/destyle.css@3.0.2/destyle.css

GitHubからダウンロードも出来ます。

GitHub：Destyle.css

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

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

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

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

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

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

A Modern CSS Reset のCDN

<head>
  <meta charset="UTF-8">
  <!-- ↓にCDNのURLを入力-->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modern-css-reset/dist/reset.min.css">
  <!-- ↓次に制作者のCSSファイル名を入れて下さい-->
  <link rel="stylesheet" href="style.css">
  <title>リセットCSSの説明</title>
</head>

CDNリンク先：https://cdn.jsdelivr.net/npm/modern-css-reset/dist/reset.min.css

GitHubからダウンロードも出来ます。

GitHub：A Modern CSS Reset

Normalize.css

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

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

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

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

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

Normalize.css のCDN

<head>
  <meta charset="UTF-8">
  <!-- ↓にCDNのURLを入力-->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css">
  <!-- ↓次に制作者のCSSファイル名を入れて下さい-->
  <link rel="stylesheet" href="style.css">
  <title>リセットCSSの説明</title>
</head>

CDNリンク先： https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css

GitHubからダウンロードも出来ます。

GitHub：Normalize.css

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

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

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

サニタイズCSSとは？

リセットCSSと似たものにサニタイズCSSというものがあります。

特徴として、normalize.cssスタイルはcss仕様に準拠しています。sanitize.cssスタイルは、例えば、ボックスサイズのデフォルトをborder-boxに設定してある等、多くの人が使いやすいように調整されています。

また、どのブラウザでも見た目が揃うように調整されています。

CDNリンク先： https://cdn.skypack.dev/sanitize.css

GitHubからダウンロードも出来ます。

GitHub：sanitize.css

reset cssは結局どれがいいの？

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

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

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

画像：最新のiPhoneの解像度一覧。CSSピクセルやデバイスピクセル解像度など、メディアクエリのブレイクポイントの参考に。
関連記事iPhoneの解像度表 CSSのメディアクエリやブレイクポイントの参考に
画像：GoogleのHTML・CSSスタイルガイド
関連記事現在のGoogle HTML/CSS Guide コーディング規約/日本語訳