WebサイトやLP、Webアプリなどを作るときにCSSリセットを使う方も多いでしょう。また、CSSリセットを知らない、まだ使ったことがないという方もいると思います。
そんな方に向けて、この記事では、前半でCSSリセットの種類やメリット、必要性などを解説し、後半でそれぞれのCSSリセットを紹介しながら選び方やカスタマイズなどを解説していきます。
この記事では、下記のような方をターゲットにしています。
- CSSリセットとはどんなものなのか知りたい方
- CSSリセットのメリットを知りたい方
- 複数あるCSSリセットの選び方を知りたい方
この記事を読み終える頃には、あなたも自分の用途に合わせてCSSリセットを便利に使いこなせるようになると思います。
それでは始めていきましょう。
目次
CSSリセットとは？
その名の通り、CSSをリセットすることです。そのリセットもCSSを使って行います。この手法が登場・一般化したおかげで今のWeb制作はとてもやりやすくなりました。
僕も最初に知ったときから今までずっと愛用しており、今では無くてはならないものとなっています。
CSSリセットが必要な理由
ではなぜCSSリセットという手法が存在しているのでしょうか。
各ブラウザに存在するデフォルトのスタイル
その答えは「user agent stylesheet」にあります。これはブラウザごとに設定されている、ブラウザ独自のCSSのことです。
CSSを設定していない、HTMLタグだけのページをブラウザで表示してみると、ブラウザ毎に見た目が微妙に変わります。それはブラウザ毎にスタイルが設定されているからです。
そしてこれがWeb制作者の長年の悩みでした。デザインだけでなくdisplayやoutlineなどの挙動もブラウザごとにあるため、意図しない操作や更新時に予想していない動作をすることもありました（たいていはデザインの崩れ程度ですが、それも防ぐべきです）。
これを統一し、同じ状況からCSSを構築していけるようにCSSリセットというものが考案され、Web制作はかなり楽になりました。ここからCSSリセットが必要とされ、一気に普及しました。
参考：各ブラウザのuser agent stylesheet
CSSリセットの目的
上でも少し触れましたが、CSSリセットの目的は主に3つあります。
各ブラウザのベースCSSを統一
まず一番の目的が、各ブラウザごとに設定されているベースCSSを統一することです。これにより毎回同じところから構築をスタートできるため、非常に作りやすくなります。
最近のuser agent stylesheetは差が少なくはなってきていますが、それでも統一はされていないため、目的のデザインやレイアウトを実現するためにはCSSリセットが必要です。
レガシーブラウザへの対応
例えば、HTML5で追加されたmain要素などは、古いブラウザのuser agent stylesheetでは対応されておらず、display: block;も当然適用されていません。
CSSリセットには基本的にそういったレガシーブラウザへ対応も含まれているので、思わぬ崩れを防ぐためにもCSSリセットを使ったほうがいいでしょう。
独自のベースを作る
これはCSSに限りませんが、Webページを作るときの正解は一つではありません。使っていくうちに、それぞれ自分の使いやすい設定がだんだん出てくると思います。
例えばremで指定するためのベースのフォントサイズや、余白の方向の統一などです。
リセット目的のCSSに加え、こういった自分のベースを盛り込んでおくことで、毎回スムーズに制作を開始することが出来ます。チーム開発の場合は使わない法外いいこともありますが、個人開発の場合は是非作って起きましょう。
主なCSSリセットの種類
それでは、CSSリセットにはどのような種類があるのかを紹介していきます。基本的にはこの中から自分の使いやすいものを使っていけばOKです。
* { margin: 0; padding: 0; }
この記事で解説している、いわゆる「CSSリセット」ではないのですが、一番最初に使われていた記述です。これだけは有志により作成されたわけではなく、各コーダーがブラウザごとの差異をなくすためにこういった指定をして対応していました。
しかしこれには問題がありました。この記述では、例えばinput要素の内側のpaddingも削除されてしまうため、CSSを組んでいく際に本来不要であったはずの指定もしなければならなくなり、決して使いやすいものとは言えませんでした。
Reset CSS
初めて登場した、Eric MeyerによるCSSリセットです。
これはその名前の通り、全てをリセットしてしまう、最も攻撃的なCSSリセットです。リンク先を見てもらえればわかりますが、h1やpなどの見た目が全く同じものにリセットされています。
これはつまり、全てをリセットした後に1からCSSを組み立てる必要があることを意味します。好みはありますが、この後に紹介するCSSリセットを使う方が多いようです。
Normalize.css
次に登場したのが、Normalize.cssです。
こちらは「ノーマライズ」の名の通り、全てをリセットするのではなく、ブラウザごとの差異を無くし、シンプルなベースのスタイルに揃えることを目的として作られています。この方向性は非常に人気を博し、後のCSSリセットにも影響しています。
しかし、デフォルトで適用されることも多いbox-sizing: border-box;などが適用されていないなど、若干の使いづらさがあります。
また、最新のNormalize.cssは古いブラウザのサポートを切っており、レガシーブラウザへの対応がなくなる代わりに軽量化が行われています。IE8などのレガシーブラウザはもう殆ど気にしなくてもいい事が多いため、特に問題はないでしょう。
sanitize.css
Normalize.cssをさらに使いやすくした、気の利いたCSSリセットです。
Normalizeの内容をベースとして、デフォルトでbox-sizing: border-box;が効いているなど、より使いやすく作られています。
また、ulタグにはリストスタイルを適用しますが、navタグの中にあるリストにはリストスタイルを適用しないなど、実際の構築時によく使われる方をデフォルトとして作られているようなイメージです。
先程も書いたように好みによりますが、個人的にはこれを使うのが一番無難かなと思っています。
Reboot.css
GitHub: bootstrap/scss/_reboot.scss
Bootstrapで使われているCSSリセットです。
基本的にはsanitize.cssと同じ思想で作られているCSSリセットです。殆ど同じなので、好みで決めてしまってもいいと思います。
また、Bootstrapで使われていると書いた通り、BootstrapにはReboot.cssが最初から盛り込まれていますので、Bootstrapを使う際にはわざわざリセットを読み込む必要はありません。
利用する際の注意点
必ず、CSSの中で一番最初に読み込んでください。でないとCSSリセットの意味がありません。
CSSは後に読み込んだものが前に読み込んだものをどんどん上書きしていくため、ベースを作るものほど前に読み込みます。そういった意味でCSSリセットは一番最初に読み込むべきものです。
CSSリセットのカスタマイズ
はじめは上記のCSSリセットをそのまま使うのが簡単でいいと思いますが、慣れてきたら自分が使いやすいCSSリセットを作るためにカスタマイズに挑戦してみましょう。
ベースをsanitize.cssやReboot.cssなど好きなものに決めたら、そこに自分なりのベースを組み込んで行きます。
例えば、フォームフォーカス時のoutlineの指定や、ベースのfont-sizeを62.5%（検索すれば出てきます）に設定する等、自分がいつも使うものを盛り込みましょう。逆に、不要なものを省くというのももちろんOKです。
当然、特にない場合は無理に作る必要はありません。「この記述いつも使ってるな」というのがある程度出てきたときに考えるという感じでいいと思います。
クラスなしCSSフレームワーク
また、「クラスなしCSSフレームワーク」も似た存在です。海外では「No-Class CSS Framework」や「Classless CSS」などと呼ばれているようですが、統一された呼び方はまだないようです。
こちらはリセットを行うというよりは、ゆるいテーマを作るような感覚で、背景色や余白感なども含めてベースを作るという思想に近いと思います。
以前このブログで紹介したWater.cssもその一つです。「控えめでオシャレなベース用CSSフレームワーク「Water.css」」の記事にて紹介しているので、実際に見てみると理解しやすいと思います。
今後も良さげなクラスなしCSSフレームワークがあったら紹介していく予定です。
まとめ
CSSリセットの必要性や種類、選び方などについて解説しました。
今回紹介したもの以外にも多くのCSSリセットが存在しますが、使っていく上で大切なのは、各CSSリセットで設定されている値の意味をちゃんと知るということです。
最初は分かりやすいものからで構いませんので、なぜこのような指定をしているのかを考える意識は持っておいたほうが後々役に立つと思います。読み込むだけでいいという手軽さに甘えずに、内容もちゃんと把握しておきましょう。
とはいえCSSリセットはとても便利なものです。もしこれまで使ったことがなかったという方は是非使ってみてください。きっと手放せなくなると思いますよ。