違うブラウザで同じ表示をさせるためには リセット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
  • このエントリーをはてなブックマークに追加

コメントを残す




関連記事

サイトの画像コピーや右クリックでの操作を禁止する方法
いろんな用途が見込めるフリーのアイコン集(PSDファイルでダウンロード出来るよ)
レスポンシブサイト構築に便利なCSSフレームワーク、グリッドデザイン搭載の「HTML KickStart」
レスポンシブウェブサイトで必須!メディアクエリとブレイクポイントの仕組み
2014年春 お勧めのウェブアイコンフォント(web icon fonts)2種類!
鮮やかな背景をCSSで表現できるウェブツール これはかなり使えます!
レスポンシブwebサイトを構築するためのポイント「viewport」とは
Bootstrapを採用しているhtmlテンプレート&テーマ
ワードプレステーマのCSSに影響なくスタイルシートを変更出来るプラグイン
無料テーマPrinciple限定でのOGP設定方法(コードあり)
アイコン付きのフラットデザイン風ボタンを簡単に作れるツール「2.5dBUTTON」
ワードプレステーマを変更せずにCSSを追加・管理する方法
htaccessファイルの作成方法-サイトのリダイレクトやアクセス制限にも使えます
表示しながらCSSの編集が出来るFirebugの使い方
OGPにおける記述方法の勘違いと修正方法(2015年春時点での最新情報?)

Menu

HOME

 TOP