違うブラウザで同じ表示をさせるためには　リセットCSSとノーマライズCSSの特徴

サイトを構築する際にブラウザの違いで表現が変わることがあり、複数のブラウザを使って確認を取ることがありますが、その作業をなるべく省くためにCSSを上手に使おうという話をしたいと思います。

「UA Style Sheets」って知ってますか？

いきなり問いかけから始めましたが「UA Style Sheets」というのは各ブラウザに標準で設定されてあるスタイルの事で例えば

<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>

と文章を表示させる場合、使うブラウザによって表示が少し変わってきます。
その表示の違いを吸収させるためにリセットCSSやノーマライズCSSという手法が使われています。

リセットCSSとノーマライズCSSの違い

リセットCSSとは

リセットCSSとはUA Style Sheetsが有効のままでコーディングを行うとブラウザの違いを完全に打ち消すことが出来ないためにレイアウト崩れを起こしたりすることを防ぐためにデフォルトのスタイルシートをフラットにする方法の事を言います。
このリセットCSSの利点としては

等のメリットが挙げられます。
リセットCSSには多くの種類というか手法があります。

• Universal Selector ‘*’ Reset：
  全称セレクタを利用し、HTML要素を一気に同じ方法にする方法を取っている。
• YUI 3 CSS Reset：
  Yahoo！謹製のリセットCSS
• Eric Meyer’s “Reset CSS”2.0：
  CSSのエキスパートであるEric Meyer氏が考案したCSS
• HTML5 Doctor CSS Reset：
  Eric Meyer氏のリセットCSSに、HTML5で必要な独自のスタイルを定義したCSS。

ノーマライズCSSとは

ノーマライズCSS（Normalize.css）とはリセットCSSだとデフォルトで定義されているが使用に問題ないスタイルまですべて消してしまい、後で同じようなスタイルを定義し直すといった無駄な作業が発生することから、すべてのスタイルをリセットせずに、ブラウザ間のUA Style Sheetsの誤差を埋めることを目的としたCSSを指します。
ノーマライズCSSはIE8以上やその他のモダンブラウザに対応していて、CSSフレームワークのTwitter Bootstrapや、Pureなどに採用されています。
このノーマライズCSSをうまく利用するためにはブラウザの平均的なUA Style Sheetsをある程度、把握しておく必要が出てきます。

どちらのCSSを使えばいいのか

リセットCSSはすべてのプロパティ値が０になるので、誰でも扱いやすいことが特徴です。ノーマライズCSSは使う人を選びますが、ある程度のエキスパートの方であれば再実装の手間が省ける分、工数は削減出来るので合理的という事もあり、選択は使う人の好みになってくると思います。
ちなみに私はリセットCSSの方がいいかなとは思っています。（あまり腕に自信がないもんで！）

最後に今回、紹介したリセットCSSとノーマライズCSSのリンクを紹介します。