CSS・リセットCSSとノーマライズCSS

CSS・リセットCSSとノーマライズCSS

ブラウザは初期状態からmarginやpadding等、デフォルトでCSSが設定されている。便利な所もあるのだかブラウザによってその設定が微妙に違うのが困るところだ。
そのためブラウザに設定されているデフォルトのCSS設定を一度リセットしなければならない。それがリセットCSSだ。

一度リセットし、CSSを初期から組み立てることでブラウザによる差をなくす事ができるメリットがある反面、ゼロからCSSを設定するためCSSの記述が多くなるデメリットがある。

• シンプルなリセットCSS

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}

違う考え方もある。Normalize.cssだ。

ノーマライズCSSはリセットCSSと異なり、ブラウザに初期設定されているCSSをリセットせずその差を最小限にするため作られたCSSだ。
ブラウザ間での差は最小限に抑える為微妙な違いもあるもののCSSリセットしないのがメリットだ。

今のところどちらが良いとは言えないがどちらかを設定するのがスタンダードだ。
個人的にはブラウザ間の差を補正するだけのノーマライズCSSはブラウザ制作会社がその気になれば一気に広まりそうな分ノーマライズに期待したいと思う。