HTML・CSS広告を含む記事です

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

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

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

リセットCSSとは、リセット用のCSSを読み込む事で、各ブラウザがデフォルトで持っているCSSを上書きリセットする事。これによりブラウザ毎の見た目を揃えやすくします。

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

ただ、やはりGoogle ChromeとSafariなどブラウザ毎の余白の空き具合や、フォーム周りの見た目の違い等は制作者を悩ませます。

そこで今回は、2024年現在のおすすめリセットCSSや、簡単にコピペで読み込めるCDNという方法を紹介します。

リセットCSSとは？

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

実は、Google ChromeやSafari、Microsoft Edgeなど各ブラウザはそれぞれ独自のスタイルシートを持っています（user agent stylesheet）。言わばこれらがブラウザのデフォルトのCSSファイルです。

これは本来、サイト制作者が仮にスタイルを指定していなくとも、きちんと読みやすく表示する為に用意されたもの。ただし問題は、ChromeやSafariなどのブラウザにはデフォルトのスタイルに違いがある事。

サイト制作者としては、ブラウザ毎に余白やフォントのサイズが変わってしまうと困ります。かと言って、ブラウザ毎に表示の違いを毎回調整するのは現実的ではありません。

これらブラウザ間の差異を埋めたり吸収するといった目的でリセットCSSを使います。

リセットCSSには幾つも種類がありどれを使えば良いのか迷うと思います。判断できる様、改めてリセットCSSを使う際のメリットや注意点を解説していきます。

リセット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が調整されている事が殆ど。この場合、リセットスタイルは必要ないかも知れませんね。

人気のTailwind CSSも、通常のリセットスタイルシートを使わなくても良い場合が多いです。ailwind CSS自体がNormalize.cssをベースにした「Preflight」というリセットスタイルが組み込まれているからです。これにより、ブラウザ間で一貫したスタイルが適用されるようになっています。

リセット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と併せてCDNの読み込み先も紹介します。

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

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

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

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

  • ress.css
  • Destyle.css
  • A Modern CSS Reset
    • A (more) Modern CSS Reset – 2023年に更新されたバージョン。
  • Normalize.css
  • reset.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">
  <!-- ↓最初に読み込みたいリセットCSSを先に読み込みます-->
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/ress.min.css">
  <!-- ↓次に制作者のCSSファイル名を入れて下さい-->
  <link rel="stylesheet" href="style.css">
  <title>リセットCSSの説明</title>
</head>

CDNリンク先：https://unpkg.com/[email protected]/dist/ress.min.css

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

GitHub：ress.css

Destyle.css

Destyle.cssの公式によると、

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

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

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

Destyle.cssのCDN

<head>
  <meta charset="UTF-8">
  <!-- ↓最初に読み込みたいリセットCSSを先に読み込みます-->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/destyle.css">
  <!-- ↓次に制作者のCSSファイル名を入れて下さい-->
  <link rel="stylesheet" href="style.css">
  <title>リセットCSSの説明</title>
</head>

CDNリンク先：https://cdn.jsdelivr.net/npm/[email protected]/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リセットです。

2023年更新されたバージョンである、A (more) Modern CSS Resetを後述しています。詳細はそちらをご覧ください。

A Modern CSS Reset のCDN

<head>
  <meta charset="UTF-8">
  <!-- ↓最初に読み込みたいリセットCSSを先に読み込みます-->
  <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

A (more) Modern CSS Reset

A Modern CSS Resetが出てから4年後の2023年に更新されたバージョンがA (more) Modern CSS Resetです。使うなら先に紹介したものよりもこちらがお勧めです。

  • box-sizing: border-box; この記述は現在でも必要な事も多いので残してあります。
  • margin-block-end: 0; 終了マージンを削除しています。
  • roleでリストスタイルを削除しています。
  • テキストサイズ調整が含まれています。

A (more) Modern CSS ResetのCDN

<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ファイルに保存して使って下さい。

開発者サイト：A (more) Modern CSS

Normalize.css

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

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

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

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

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

Normalize.css のCDN

<head>
  <meta charset="UTF-8">
  <!-- ↓最初に読み込みたいリセットCSSを先に読み込みます-->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/normalize.css">
  <!-- ↓次に制作者のCSSファイル名を入れて下さい-->
  <link rel="stylesheet" href="style.css">
  <title>リセットCSSの説明</title>
</head>

CDNリンク先： https://cdn.jsdelivr.net/npm/[email protected]/normalize.css

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

GitHub：Normalize.css

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

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

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

reset.css

reset.cssは2023年以降、最新のCSS 機能を組み込んだリセットスタイルだそうです。初めて存在を知ったのですが、正直言うとあまりよく分かりませんでした。

githubに掲載されている情報の中から、いくつか特徴を紹介します。

  • color-schemeを使用したオートダークモード
  • system-uiフォントが事前に適用されています
  • ブラウザのデフォルト指定のボタンスタイルをリセット

reset.cssのCDN

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

CDNリンク先：https://unpkg.com/@acab/reset.css

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

GitHub：reset.css

サニタイズ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を作るのも良いと思います。

また、BootstrapやTailwind CSSといったフレームワークも検討してみて下さいね。

jQueryをCDNで使う。リンク先や読み込み方法、ファイルタイプの違いを解説。
関連記事jQueryをCDNから使う！リンク先や読込み方法の違いを解説
CDNからFont Awesomeを使う。読み込みファイルの違いも解説。
関連記事CDNでFontAwesomeの使い方 free iconsをCSSで表示する
画像：GoogleのHTML・CSSスタイルガイド
関連記事現在のGoogle HTML/CSS Guide コーディング規約/日本語訳