【初心者向け】リセットCSS/ノーマライズCSSの使い方と違い
「ページ最上部に〇〇を入れたいのに、ブラウザの最上部や左右に隙間ができてしまう」という質問を、時々いただきます。ファーストビューの作成などで、多くの方が体験する“コーディング初心者あるある”ではないでしょうか。
実は、ブラウザとの間にできる隙間はブラウザ標準のCSSによるもの。
作り込まれたデザインをコーディングするには、このブラウザ標準スタイルが邪魔になることも結構あります。
また、ブラウザAでは綺麗だけどBだと変……ということも。。
こうした時に、リセットCSSというCSSファイルが活用されています。
リセットCSSの特徴や種類について見ていきましょう。
リセットCSSとは
リセットCSSは「CSSをリセットするCSS」。
何のCSSをリセットするかというと、ブラウザ標準のCSS。ブラウザがWebページを表示する際に使うスタイルを打ち消し、ブラウザによる見え方の差をなくしてくれるのがリセットCSSです。
私達がWebサイトを見るのに使っている、SafariやGoogle Chromeなどのブラウザは固有のスタイルを持っています。
h1タグで囲うと文字が大きくなるのもそうですね。
要素につけられているスタイルは、ブラウザによって微妙に異なります。
小さな差異ですが、時にこの微妙な違いがレイアウト崩れを起こす原因になってしまったりもします。
このため「ブラウザによる見え方の差をなくす」という点が重視されます。
リセットCSS類は自作する？
ブラウザスタイルを打ち消すのは、自分でCSSを記述しても可能です。
ただ、頑張ってリセットCSS類は自作する必要はないでしょう。
（結構書くことが多くて、大変です）
リセットCSSと呼ばれる様々なスタイルシートファイルが、インターネット上で公開・配布されています。DLして使えるもの、CDNのコードを貼り付ければ使えるものがありますので、目的に合わせたCSSファイルを活用させて頂きましょう。
ちなみに、ファイル記載のコードすべてを理解する必要はありません。
大体の特徴がわかり、配布されているCSSを読み込めればOKです。
リセットCSSの種類と特徴
広義のリセットCSSは「ブラウザのCSSをリセットし、ブラウザによる見え方の差をなくす」ためのスタイルシート全般を指します。
ただ、どの程度リセットするのかはファイルによって違います。
このためリセットCSSと呼ばれるものは、更に下記３タイプに分けられています。
- リセットCSS
- ノーマライズCSS/サニタイズCSS
それぞれのCSSを読み込ませたとき、下記のタグの見え方を見てみましょう。
それぞれの違いが感覚的にわかりますよ。
<body>
<div style="background-color: #CCC;">
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<a href="https://skillhub.jp/">リンク</a>
<p>段落</p>
<b>太字</b>
<i>Italic</i>
<em>強調</em>
<ul>
<li>箇条書き1</li>
<li>箇条書き2</li>
</ul>
<ol>
<li>箇条書き1</li>
<li>箇条書き2</li>
</ol>
</div>
</body>
デフォルト状態での表示（Google Chrome使用）
A:リセットCSS
リセットCSSは、ブラウザに搭載されているデフォルトのCSSをリセット（無効化）することが中心CSSです。
- 最初から全部CSSを設定したい
- セクションごとに全部見出しが違うデザインが来た、 などの場合に役立ちます。
※ブラウザ標準CSSの無効化具合は、使用するリセットCSSの種類によって多少違いがあります。
destyle.css
https://nicolas-cusan.github.io/destyle.css/
destyle.cssは、リセットCSSの中でもリセット力の強い部類。
特にフォントサイズや余白関係は、ほぼ白紙になります。
下図はdestyle.cssを読み込ませた場合の表示です。
太字と斜体が残っているくらいですね。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css"/>
その他のリセットCSS
B:ノーマライズCSS
ノーマライズCSSはブラウザデフォルトのCSSの違いを統一して、見た目を整えることが中心のCSSです。
ノーマライズCSSの場合は“統一された、実用的なデフォルトスタイルの設定”が目的。リセットCSSのように、hタグのサイズがpタグと同じになったりはしません。
cssゼロ状態から設定するほどではない、という場合に適しているでしょう。
Normalize.css
ノーマライズCSSの代表各と言えるファイルは“Normalize.css”。
https://github.com/necolas/normalize.css/blob/master/normalize.css
下図はNormalize.cssを適用した場合の表示。
ブラウザのデフォルトスタイルに近いですが、上下左右の隙間がなくなっていたりと違いがあります（※ブラウザ上が空いているのはh1のmarginが原因）
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"/>
C:サニタイズCSS
ノーマライズするだけではなく、より扱いやすいようスタイル指定が追加されているCSSはサニタイズCSSと呼ばれています。追加されているCSSとしては、レスポンシブデザインで便利な「box-sizing: border-box;」が代表的です。
サニタイズCSSは、ノーマライズCSSの拡張版とも言える存在。このため、区分せずにリセット系/ノーマライズ系と２タイプに区分することもあります。
かつてリセットCSSは呼び名通り“リセット”するものが主流でした。しかし、最近はブラウザスタイルの共通化+ベースセッティングができるノーマライズ/サニタイズCSS系も多く使われています。
sanitize.css
https://csstools.github.io/sanitize.css/
sanitize.cssは有用なデフォルトのスタイルを維持したまま、ブラウザ間の互換性やボックスの扱いやすさを向上させてくれるCSS。
下図はsanitize.cssを読み込ませた場合の表示です。
こちらも同じくh1のmarginで上が空いてしまっていますが、プラウザ幅ピッタリ。ブラウザ標準のスタイルに近く、かつ初期状態よりも見やすいのではないでしょうか。
<link href="https://unpkg.com/sanitize.css" rel="stylesheet"/>
代表的なサニタイズCSS
Reboot.cssはBootstrapで使われているリセットCSS。
modern.cssも、Tailwind CSSというCSSフレームワークで使われているリセットCSSです。
まとめ
結局どれが良いの?!と思われた方もいらっしゃるかもしれません。
個人的には、以下のように使い分けています。
（使用頻度としては圧倒的にサニタイズ系が多いです）
- 独創的なデザインや「イチからきっちり作りたい」時に役立つリセットCSS。
- ブラウザ間の差を無くしつつ、きれいなベースを作ってくれるサニタイズCSS。
コーディングするデザインの傾向と、あとは好み・自分にとっての使いやすさも出てくると思います。
リセットCSSファイルは、それぞれ独自のクセみたいなものがあります。
いくつか使ってみて、自分なりの最適解を見つけてみてください。
まずは無料で14講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
4月28日まで