2年 ago
2049 Views

リセットCSSとノーマライズCSSについて

css

「ノーマライズCSSとリセットCSSどっちがいいの?」ってことで、2つを比較。っとその前にリセットって?ノーマライズって何?ってとこからご説明。

デフォルトスタイルシート

CSSを指定しなくても、hタグやpタグでマークアップすると、タグの意味に合った各ブラウザのデフォルトスタイルシートが効いてmarginだったりテキストが太字になったりするのが、デフォルトスタイルシートです。これはブラウザによって差があるため、自分の思ったデザインを各ブラウザに同じように適用するためには弊害となったりもします。そこで、大事なのがリセットCSSやノーマライズCSSです。

リセットCSS

デフォルトスタイルシートのブラウザ間の差をなくして、スタイルがゼロの状態からデザインしましょうという考え方でつくられたのがリセットCSSです。なので、プロジェクトごとにH1~H6タグや
フォントなどの規定値を自分たちで定義し直す必要があります。全部一から細かく設定し直したい場合にはリセットがいいですね。

  • ulやolタグのスタイルもリセット
  • フォームタグの不具合
  • margin:0が邪魔になる

ノーマライズCSS

ノーマライズCSSとは、リセットCSSとは異なり、ブラウザに初期設定されているCSSを活用し、最小限のスタイルを備えたCSSです。その上で、ブラウザ間の差異を無くしたものです。そのため、見出しや段落といったものがわかりやすくなります。ノーマライズCSSは有用なデフォルトCSSを残してくれるので、必要だと感じるスタイルだけを再定義してやればいいので、コーディング量はリセットCSSを使った場合よりも少なくなり、メンテナンスしやすくなります。

  • 表示をゼロにしない (sup や sub を使えば上付き、下付きになるし、ul は箇条書きになる)
  • バグ補正 ( pre 要素における font-size、IE9 における SVG の overflow の挙動など)
  • CSS 解析時に、解析ツール上に必要以上の無駄(margin:0とか)となるコードを作らない
  • 必要に応じて Nomalize.css の不要箇所を削除しても OK ( Nomalize.css は適切にコメントで区切られていて、不要箇所は削除が簡単)
  • バージョン2系列は IE7以下のレガシーブラウザをサポートしない
  • スマートフォン用のブラウザも対象

normalize.css

リセットを使うと結構無駄な二度手間なスタイルをかけなきゃいけなくて困っていましたが、ノーマライズで楽になりました。ノーマライズで足りない部分を一部リセットを追加するみたいなやり方が一番楽ではないでしょうかね?

Article Tags:
Article Categories:
html&CSS
12345 (No Ratings Yet)
Loading...

Leave a Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Menu Title
ツールバーへスキップ