Webページをコーディングする時に読み込んでおきたいCSSと言えば？
そう、リセットorノーマライズCSSですよね！
世の中に様々なブラウザが存在する以上はこれらのCSSファイルが無いとレイアウト上のズレが生じますよね。
そんなReset CSSとNormalize CSS、結局どちらを使えばいいの？という方に、かんたんに違いをご紹介します。
そもそもReset CSS、Normalize CSSとは？
いずれも共通する点
いずれもブラウザ間のスタイルの差異を極力抑えてくれるものです。
例えば、以下のHTMLコードを何も考えず表示させるとします。
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<title>CSSテスト</title>
</head>
<body>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<ul>
<li>liリスト</li>
</ul>
<p>pテキストの上下にも空白があり、その大きさはブラウザによって異なります。</p>
</body>
</html>
すると、各ブラウザでは以下のように表示されます。
Internet Explorer 11 
Safari 
Firefox 
Google Chrome
こうしてみると、最近は大分差が縮まってきたとは言え、ブラウザの間でテキストのフォントや字間・行間やらが微妙に異なっていることが分かりますね。
こうなると、閲覧者の環境によって意図したデザインにならなかったり、レイアウトが崩れてコンテンツが見られないなんてことも起きかねます。
本来、各開発チームのそれぞれの気遣い(?)があって、「このタグならこれくらいスペース空けておけば初心者もレイアウトしやすいだろう」「このフォントが見やすいだろう」という考え方があるために、こうしてブラウザ間でその気遣いが裏目に出てしまっているのです。
この違いを解消する目的を前提としたCSSが、今回説明するReset CSSとNormalize CSSです。
Reset CSSとは？
その名の通り、各ブラウザのデフォルトスタイルをほぼ完全にリセットするCSSのことです。
例えばh1なんかはデフォルトで大きく太いテキストとなっていますが、これもすべて通常のテキストと同等のスタイルにしてしまいます。
HTML5 Reset Stylesheet | HTML5 Doctor
http://html5doctor.com/html-5-reset-stylesheet/
ここにあるCSSコードをテキストファイルに貼り付けて、CSSとして保存してHTMLに読み込みます。
この状態で先程のHTMLコードを開いてみます。
テキストの大きさや行間が通常のテキストとほぼ同等になりました。
これをすることによって何が良いのかと言うと、
- 自分の思うようなデザインをブラウザを気にすることなく細かく設定できる
- すべてのmargin、paddingが0とされ、思うようにレイアウト調整しやすい
といったメリットがあり、逆に
- 各タグに対し自分で何もかも設定しないと普通のテキスト表示のまま
- それに伴ってCSSコードの量が増える
といったデメリットも存在します。
じっくり細かくスタイルを設定したいページに向いていると思います。
Normalize CSSとは？
こちらは各タグのデフォルトスタイルを維持しつつ、各ブラウザの表示を統一させるという、なんとも融通の利くCSSとなっています。
Normalize.css
https://necolas.github.io/normalize.css/
上記のサイトよりCSSをダウンロードしてHTMLで読み込んだ状態で表示してみます。
一見、何もしていない状態と違いがないように見えますが、このデフォルトスタイルを活かしつつ、ブラウザ間の表示に一貫性を持たせることが可能となっています。
このスタイルのメリットは、
- リセットするほどでなくともブラウザ間の差異を抑えることができる
- Reset CSSに比べ設定量が少なくCSSコードの量を抑えられる
そしてデメリットが
- 結局各タグごとのデザインは必須なので細かいコーディングは必要
といった感じです。
ResetとNormalizeのそれぞれの特性を見ながら、ご自身のスタイルに合わせて選択することができます。
結局どっちが良いの？
どちらが適しているかは、それぞれのコーディングスタイルやWebサイト構築の方針によって違ってくるかと思います。
ブラウザのデフォルトスタイルを活かしたいとなればNormalize CSSを使用すれば作りやすいかと思いますし、逆に全く必要なくすべて自分で定義するというのであればReset CSSが扱いやすいかと思います。
ちなみに私のサイトmaesuke.comはNormalize.cssを使用しています。
ブラウザごとにレイアウトに気を遣う必要がなくなるので便利ですね。
まとめ
ざっとでしたがそれぞれの違いと用途をご紹介しました。
繰り返しになりますが、どちらが正解というのはなく、ご自身のコーディングスタイルに合わせて選択するのが良いでしょう。
本日はここまで。
