1.リセットCSSとは？
皆さんインターネットを閲覧する際、ブラウザは何を使っていますか？
Chrome、Firefox、Safari、Edge・・・。
こだわりがある方もいれば使用するデバイスにプリインストールされているブラウザを使う方もいるかと思います。
実はこれらのブラウザにはそれぞれデフォルトのCSSが設定されている事をご存知でしょうか。
それぞれのブラウザ間ではもちろん、同じブラウザでも使用するバージョンによってデフォルトCSSには違いがあります。
これによってどんな影響があるのか。
勘の良い方ならお気づきかもしれませんが、
- 同じソースコードを見てもブラウザによって表示に違いが出てしまう
- スタイルシートに何も記載していない要素に覚えのないスタイルが適応される
というような問題が発生します。
要素と要素の間に謎の余白ができたり、その余白の大きさがブラウザによって違ったり・・・
このような問題を防ぐために各ブラウザのデフォルトCSSを打ち消すのがリセットCSSの役割です。
リセットCSSを導入するデメリットとしては単純にCSSが多くなるという点があります。
スタイルシートに直書きする場合はファイルが大きくなりますし、別途のスタイルシートとして読み込む場合は単純に読み込むファイルが一つ増えてしまいます。
昨今では「リセットCSSは必要ない」、「ブラウザ毎に若干のスタイルの違いがあるのは仕方がない」というような意見もチラホラ出てきております。
ただ若干とはいえブラウザによって表示が変わってしまうのは気持ち悪いと考えるユーザーやデザイナーが多いのも事実ですので、まだまだリセットCSSの必要性は無くなる事はないだろうと考えています。
そんなマークアップを行うにあたって知っておくべきリセットCSSの使い方や種類などについてまとめさせていただきます！
2.リセットCSSの使い方
リセットCSSを使用するには下記2通りの方法があります。
- 公式サイトやGitHub等からコードを持ってきて自身のスタイルシートの一番上に貼り付ける。
- もしくは別途のスタイルシートとして作成し、自身のスタイルシートより上で読み込ませる。
※CSSは後に記述された内容が優先になるので、先にデフォルトのスタイルを打ち消す必要があります
リセットCSSとメインのスタイルシートは分けて管理する必要があるため、Sassなどを使って1つのCSSファイルにまとめると、ファイル数が減って読み込み速度の向上が見込めます。
3.有名リセットCSSを比較してみる
さて、ここでオススメのリセットCSSを紹介致します。
Universal Selector ‘*’ Reset
ユニバーサルセレクタ（*）とは全ての要素を対象にスタイルを適応させる事ができるセレクタです。
こちらを利用して上記のように記載するとmarginとpaddingを全てまとめて0にリセットする事ができます。
しかしあまり使用しないようなHTMLタグまで全て対象となるためブラウザのレンダリングが遅くなってしまいますので、最近ではあまりオススメされていません。
またul,li等デフォルトで良い感じに調整してくれている余白も全てリセットされてしまいます。
Eric Meyer’s “Reset CSS” 2.0
こちらはデフォルトのCSSを丸ごとすべてリセットするタイプのリセットCSSです。
marginやpaddingを全て0にし、h1やh2等の見出しタグのfont-sizeも全て統一されます。
昔は人気がありましたがHTML5には未対応のため現状ではオススメできません。
https://meyerweb.com/eric/tools/css/reset/
HTML5 Doctor Reset CSS
こちらも同様にデフォルトのCSSを丸ごとすべてリセットするタイプのリセットCSSです。
しかしこちらはHTML5に対応しており、前述した「Eric Meyer’s “Reset CSS”」の新バージョンだと考えていただいて良いかと思います。
http://html5doctor.com/html-5-reset-stylesheet/
Normalize.css
こちらは先に挙げた二つとは違い、デフォルトのスタイルを残しつつブラウザ間での表示を統一させるタイプのリセットCSSです。
見出しタグ等デフォルトのCSSを残したい事が多い要素にはスタイルが適応されているので使いやすいです。
しかし要素ごとにmarginやpaddingが指定されており、調整が必要になる場合が多いです。
https://github.com/necolas/normalize.css/blob/master/normalize.css
ress.css
こちらもNormalize.cssと同様にデフォルトのスタイルを残しつつブラウザ間での表示を統一させるタイプのリセットCSSです。
個人的にNormalize.cssと比較して最も優れている点はmarginやpaddingは全て0に設定されている事です。
またその他にも全ての要素にbox-sizing: border-box; が設定されている等、実際に使用する際に嬉しい部分が多いです。
https://github.com/filipelinhares/ress/blob/master/ress.css
Reboot.css
こちらは最も有名なCSSフレームワークであるBootstrapに設定されているリセットCSSです。
しかしBootstrap用に作られたリセットCSSであるため、それ以外の場合では少し使いにくいかもしれません。
大きな特徴はレスポンシブ対応のためサイズの指定にremが多々使用されている事です。
Bootstrapに慣れている方には良いかもしれません。
https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap-reboot.css
オリジナル
マークアップに慣れた方はオリジナルのリセットCSSを作っちゃいましょう。
HTML・CSSのコーディングを続けていると自分の中でこだわりというか独自の定番の流れができてくる方がほとんどだと思います。
リセットCSSも同様にテンプレート化して毎回組み込むのが最善です。
自分が実際によく使うタグのみを指定するように調整して自分用のリセットCSSを作って行くのが良いかと思います。
4.まとめ
とりあえず初めての方にはress.cssをオススメします。
おそらく駆け出しのマークアップエンジニアの方はまず上記であげたような既存のリセットCSSを使い、慣れてくると自分用にカスタマイズして使う方がほとんどかと思われます。
そのために初めて使うリセットCSSは、不要なスタイルはちゃんと打ち消しそのうえで便利な設定が多いress.cssが最適だと思います。
マークアップを続けていく中で徐々に自分がよく使用するタグやほとんど使わないタグがわかってくるかと思いますので、その都度修正して自分なりのリセットCSSを作ってください。
序盤でも書きましたがリセットCSSを使わないとブラウザによって表示に違いが発生したりしてしまいますので、とりあえずはress.cssを導入してデフォルトCSSの影響を受けない状態でのマークアップに慣れていきましょう！
