違うブラウザで同じ表示をさせるためには リセット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の利点としては

  • それぞれの要素のプロパティは「0」となるためにブラウザにデフォルトで設定されてあるスタイルを覚える必要がない。
  • いったん、0ベースで行うために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はすべてのプロパティ値が0になるので、誰でも扱いやすいことが特徴です。ノーマライズCSSは使う人を選びますが、ある程度のエキスパートの方であれば再実装の手間が省ける分、工数は削減出来るので合理的という事もあり、選択は使う人の好みになってくると思います。
ちなみに私はリセットCSSの方がいいかなとは思っています。(あまり腕に自信がないもんで!)

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

  • Pocket
  • このエントリーをはてなブックマークに追加

コメントを残す




関連記事

2014年春、人気のCSSフレームワーク フラットデザイン対応もあります
デザイン全般で使えるweb色見本
Bracketsでお薦めの拡張機能(エクステンション)と拡張機能のインストール・アンインストール方法
レスポンシブウェブサイトで必須!メディアクエリとブレイクポイントの仕組み
2014年春 お勧めのウェブアイコンフォント(web icon fonts)2種類!
表示しながらCSSの編集が出来るFirebugの使い方
アイコン付きのフラットデザイン風ボタンを簡単に作れるツール「2.5dBUTTON」
レスポンシブ・フレームワーク「Bootstrap」を使う際に便利なツール、アイコン、テンプレート
htaccessファイルの作成方法-サイトのリダイレクトやアクセス制限にも使えます
サイトの画像コピーや右クリックでの操作を禁止する方法
鮮やかな背景をCSSで表現できるウェブツール これはかなり使えます!
レスポンシブwebサイトを構築するためのポイント「viewport」とは
ワードプレステーマのCSSに影響なくスタイルシートを変更出来るプラグイン
レスポンシブサイト構築に便利なCSSフレームワーク、グリッドデザイン搭載の「HTML KickStart」
これは便利!グラデーションが簡単に作れるCSSジェネレーター

Menu

HOME

 TOP