ちゃんと分かって使っていますか？リセットCSS（reset.css）を使う目的と種類

※この記事は 1未満 分程度でお読みいただけます。

WEBサイトをコーディングする際に、headタグ内に必ず入れるリセットCSS。毎回お約束のように入れているけど、いったい何に使っているのだろう、何で入れなくちゃならないんだろう、と疑問に感じている方も多いと思います。

今回は、リセットCSSを使う目的と指定方法、また、いくつも種類があるリセットCSSの違いについて解説していきたいと思います。

今回ご紹介している各サンプルはすべて、まったく同じHTMLのソースコードを使用しています。スタイルの違いが分かりやすいように、一部CSSを追記してありますが、それ以外は何も指定していません。
また、リストの行頭記号の挙動が分かりづらいので、コンテンツ全体の描画エリア（bodyタグ直下にあたる部分）の外枠に罫線を設定して、内側に20pxの余白を設定してあります。

まずはここから！リセットCSSを使う目的と使い方

まずはじめに、なぜリセットCSSを使うのかという点を解説します。

リセットCSSを使う目的

HTMLでコーディングをすると、CSSに何も設定していない状態でも、見出しの文字が大きくなったり、太字になったり、リストに行頭記号がついたり、余白がついたりと、勝手に体裁が変更されていきます。これは実は、ブラウザに組み込まれた初期設定のCSSの指定が効いているからです。

下の画面が、まったくCSSを指定していないときの画面の表示です。

HTMLは本来、文字の体裁や余白などのスタイル情報は一切もっていません。ただ、CSSを指定していない状態でも、とりあえず画面が見やすくなるように、各ブラウザにこの初期設定のCSSがあらかじめ組み込まれています。この初期設定のCSSは、ブラウザの開発者ツールでユーザーエージェントスタイルシートとして表示される部分になります。

この親切な初期設定のCSSですが、いくつかの問題点があります。

ひとつめは、この初期設定のCSSが、Chrome（Google）やSafari（Apple）、Edge（Microsoft）やFirefox（Mozilla）など、各社で開発しているブラウザによって、指定が若干違っているところです。以前と比べるとだいぶその差異は少なくなってきましたが、それでも微妙に差があります。

この差異の影響で、CSSで同じ指定をしたのに、iPhoneで見たらデザインがずれた、Macでは思い通りのレイアウトになったけどWindowsで見たら表示が違った、ということが起きます。

ふたつめは、自分が予期していない設定があらかじめ効いてしまっているというところです。この初期設定のCSSの影響で、WEBサイトをコーディングしてレイアウトしていくときに、指定していないはずの場所に余計な余白ができてしまったり、勝手に太字になってしまったり、ということが起きます。

上の「CSSを指定していないときの画面」を見ていただくと、罫線（画面の描画エリア）の外側に余白ができています。これは、bodyタグに指定されている初期設定の余白のせいで、これもレイアウトの際にはめちゃくちゃ邪魔になります。

こういった、初期設定のCSSにある、ブラウザ間の差異や、不要な設定を無効化してしまって、これから指定するCSSで思い通りにレイアウトできるようにしよう、というのがリセットCSSを使う目的です。いわば、家を建てる前に、まず建てやすくするために整地をしよう、ということをやっています。

リセットCSSはたくさん種類がある

このリセットCSS、実は1種類ではありません。たくさんの方がいろいろなリセットCSSを開発されていて、制作者（個人や会社）の考え方や、使い方の方向性によって、指定されている内容がだいぶ変わってきます。絶対にこれを使わなければならない、というルールはありません。コーディングをする本人（または会社など）が使いやすいリセットCSSを選択して、それにあわせたコーディングをおこなってください。

このあと、現在広く使われている代表的なリセットCSSを紹介しますので、

• 文字の大きさと太さ
• パディングとマージン
• 背景画像の繰り返し
• 横幅の違い（パディングを含めた幅かどうか）
• フォームの入力欄の違い

このあたりに注目して、見比べてみてください。
背景画像の繰り返しは、「background-repeat」の指定の違い、横幅の違いは「box-sizing: border-box」という指定が効いているかどうか、の違いになります。

特に「box-sizing: border-box」の指定は、レイアウトに対して大きな影響を与えます。通常では、CSSで横幅240px・パディング20pxと指定すると、要素の横幅は280pxになります（描画エリア240pxと左右パディングの合計）。しかし、実際に使用する際には、横幅240pxと指定する場合は、要素全体を240pxにしたいケースが多いです。この場合、「box-sizing: border-box」を指定すると、要素全体が240pxに設定され、パディングはその内側に設定されます。この指定を入れるだけで、幅の計算や指定が格段にやりやすくなります。

リセットCSSの使い方

リセットCSSは、基本的に自身で書くCSSファイルの前に読み込みます。まず整地をしてから家を建てる、という順番です。例えば「ress」というリセットCSSを使った場合は、下記のような指定方法になります。

/* リセットCSSを先に読み込み */
<link rel="stylesheet" href="css/ress.min.css">

/* 自身で書くCSSファイルを後で読み込み */
<link rel="stylesheet" href="css/my-style.css"> 

CDNとダウンロードの違い

リセットCSSだけでなく、JavaScriptなどでも同様ですが、GitHubや配布サイトなどを見ると、CDNとダウンロードと2種類のやり方が記載されていることがあります。

CDNは、制作者がファイルを皆で共有できるサーバーにアップロードし、そのサーバーにファイルを読みに行くやり方です。CDNの場合、ファイルをダウンロードする必要はなく、ファイルのメンテナンスも不要なので、気軽にかんたんに使うことができます。ただ、設置されているサーバー側で何かしらのエラーが起きたり、ファイルに不具合が起こった場合に、同時に影響を受ける可能性はあります。

/* CDNでの読み込み */
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">

ダウンロードの場合は、制作者が配布しているファイルをダウンロードして、自身のサーバーにアップロードするやり方です（通常のCSSファイルなどと同じ扱い）。ダウンロードをする手間はかかりますが、自身でもCSSファイルの編集ができるようになるので、カスタマイズや微調整を行うことも可能です。デメリットとしては、制作者側でファイルをアップデートした際（何かの不具合が見つかった、など）には、再度ダウンロードしてファイルを更新する必要がある、という点があげられます。

/* ダウンロードしての読み込み（cssフォルダにファイルを配置した場合） */
<link rel="stylesheet" href="css/ress.min.css">

これも、どちらかにしなければならないというルールはないので、ご自身のやりやすい方法でファイルを読み込んでください。

「min」がついているファイルとついていないファイル

もうひとつ、よく迷われるのが「min」という文字がついているファイルと、ついていないファイルの2種類のファイルを配布しているケースです。この2つは、内容的にはまったく同じものです。ですので、両方のファイルを読み込む必要はありません。

「min」がついているファイルは、たいていの場合、コード内の改行やコメントタグなどをすべて削除して、ファイル容量を軽くしたバージョンです。特に理由がなければ、「min」がついているファイルを選択してください。

昔はみんなやっていた「全称セレクター」でリセット

それでは、リセットCSSの種類をご紹介していきます。

まず最初に紹介するのは、CSSの全称セレクターを利用したリセット方法です。この場合、リセットCSSで別ファイルは使用しません。

CSSには全称セレクターという、すべてのタグに指定できるセレクターが用意されています。これを使って、すべての要素の不要なプロパティを無効化してしまう、というやり方です。ただ、最近のブラウザの初期設定のCSSには、疑似要素や疑似クラス要素など、さらに複雑なセレクターの指定方法で、初期設定がされているケースがあって、それらに対応しきれない部分もあります。

以前は使われていた手法ですが、現在ではあまり使われることはなくなりました。

初期設定を全部消しちゃえ「完全リセット系」のリセットCSS

次に紹介するのは、完全リセット系のリセットCSSです。これは「ブラウザ間の差異なんてどうでもいいから、ぜんぶまとめてゼロにしちゃえ」という考え方です。まっさらな更地にしてしまうイメージです。

destyle.css

完全リセット系で、今最も使われている有名なものが、このdestyle.cssです。下の画面を見ていただくと分かる通り、一部を除き、文字の太さや大きさ、リストの行頭記号、余白などのほとんどのスタイルがリセットされています。フォームのパーツの枠線なども、いったん削除しています。

このリセットCSSは、とにかくまっさらなところからCSSの設定を行いたい、という方に向いています。さらに「box-sizing: border-box」をしっかり効かせてくれているので、かなりレイアウトがしやすいリセットCSSのひとつだと思います。

⇒ destyle.css

Eric Meyer’s CSS Reset

せっかくなのでご紹介させていただくのが、Eric Meyer's CSS Resetです。これは、かつてかなりの方が使っていた有名なリセットCSSです。長らく使われていたのですが、全称セレクターと同様に、新しいブラウザやタグに対応しきれないため、使用されることが少なくなってきました。

これから完全リセット系のリセットCSSを使うのであれば、destyle.cssを使われたほうがよいと思います。

⇒ Eric Meyer's CSS Reset

使えるものは残しておこう「ブラウザ間の差異調整系」のリセットCSS

完全リセット系と少し考え方が変わるのが、ブラウザ間の差異調整系のリセットCSSです。これは、初期設定のCSSのなかで、見出しのサイズや太さなど、使えるものは残したまま、ブラウザ間の差異が出ないように調整することを目的としています。更地にはせず、家を建てるときに使えそうな柱や骨組みは残しておこう、という考え方です。

ブラウザ間の差異調整系のリセットCSSは、種類によってかなりの違いがでてきます。初期設定のCSSをどの程度残すのか、レイアウトがしやすいようにどのようなスタイルを追加するのかなど、リセットCSSによって大きく表示が変わります。

normalize.css

そのなかでも有名なのが、normalize.cssです。「正常化」や「標準に戻す」という意味合いのノーマライズ。この名前の通り、ブラウザ間の差異をなくし、レイアウトがしやすいように調整されています。

「box-sizing: border-box」の指定は入っていませんが、このリセットCSSをベースに、個別のスタイルを追加しして、使われている方はまだ多くいらっしゃると思います。パディングやマージンは残るので、このあたりが少しやりづらく感じることもあるかもしれません。

⇒ normalize.css

sanitize.css

normalize.cssと同じ作者が、さらに使いやすいように進化させたのが、このsanitize.cssです。できる限り初期設定のCSSを活かしつつ、よりCSSでのレイアウトがしやすいように改良されています。

「box-sizing: border-box」も追加され、また、表組（table）の罫線が2重にならないよう「border-collapse: collapse」なども追加されています。normalize.cssと同様に、マージンとパディングは残ります。

⇒ sanitize.css

ress

個人的に長年使っているのが、このressです。このリセットCSSは、完全リセット系とブラウザ差異調整系の、ちょうど中間くらいのイメージです。更地にはするけど、必ず使う土台だけは、ひとまず残しておこう、という考え方です。

パディングやマージンはリセットしたうえで、見出しのスタイルや、リストの行頭記号などは残してあります。「box-sizing: border-box」も指定されていて、個人的にはかなり使いやすいリセットCSSだと思っています。

⇒ ress

A modern CSS reset

sanitize.cssとressの中間くらいにあたるのが、A modern CSS resetです。わりと新しいリセットCSSですが、すべてをリセットするわけではなく、パディングやマージンなど、レイアウトに影響を与える一部のスタイルだけがリセットされます。レイアウトのしやすさ、使いやすさが重視されたリセットCSSです（見出し5と見出し6の上下に余白がついているのは、おそらくh5とh6は使用頻度が低い、という判断で無視されているため）。

必要最低限の記述で、ファイルが軽量なのも特徴です。「box-sizing: border-box」などの基本的なスタイルもしっかり効いています。

⇒ A modern CSS reset

それぞれの違いを理解して、不足しているものは自身で追加しよう

これまでご紹介してきたように、リセットCSSといっても、異なる特徴を持ったさまざまなものが存在します。いろいろなリセットCSSを使いこなす、というよりも、自分にあったリセットCSSを決めて、それを使い続けていくのが、スムーズなコーディングにつながります。

また、リセットCSSに独自のCSSを追加することで、さらに使いやすくすることができます。たとえばressをベースに、

• 見出しの文字サイズはいったん同じにする
• 表（table）の罫線は1本に変更
• リストの左側にマージンをつける
• フォームの入力欄に罫線つける

ということであれば、ressを読み込んだうえで、下の画面のようにCSSを追加で指定します。

たくさんの種類があって、迷うことも多いと思いますが、自身で使いやすいリセットCSSを見つけ、必要なスタイルを追加しながら、ベースになるCSSを作ってみてください。CSSを書いていると、必ず「毎回いろんなセレクターにこの指定をしているなあ」というところがでてきます。このあたりは、自身でリセットCSSに追加してしまえば、同じ指定を繰り返す必要はなくなります。

このベースになるCSSを、理解しながらしっかり作ることができれば、コーディングやレイアウトがかなり楽になっていきます。それだけでなく、ソースコードも格段に短くなります。何事も土台作りは大切です。ぜひ、自身でコーディングがしやすいしっかりとした土台を作っていってください。

いつでもご相談ください！

ナカナカデザインラボでは、WEBサイト制作に必要なスキルが学べる「WEBデザインスキル講座」や、WEBにまつわることなら何でも相談OK「フリーレッスン」を、随時受け付けています。

フリーランス歴約20年の現役WEBデザイナー兼WEBデザイン講師が、分かりやすく解説をしながら、マンツーマンでレッスンを行います。プログラミングは苦手だけどWEBデザインをしてみたい、ひとりで書籍や動画教材を見てもよく分からない、自分のペースで学習を進めたい。どんな方でも大丈夫！ぜひ一度ご相談ください。