CSS毎にブラウザ表示の差異を解消する方法。リセットCSSとノーマライズCSSとは?

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

今回は、リセットCSSとノーマライズCSSについてです。ブラウザには固有のCSSが組み込まれているため、そのままではWebページの見え方がブラウザによって変わってしまうためそれを解消するのがリセットCSSとノーマライズCSSだと言われています。

html{
color: #000;
background: #FFF;
}
body, div, dl, dt, dd, ul,
ol, li, h1, h2, h3, h4, h5,
h6, pre, code, from,
fieldset, legend, input,
textarea, p, blockquote, th,
td {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,
img {
border: 0;
}
address, caption, cite,
code, dfn, em, strong, th,
var {
font-style: normal;
font-weight: normal;
}
ol, li {
list-style: none;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}

01リセットCSSの例
代表的なリセットCSSの1つであるYUI(Yahoo! User Interface Library) の cssreset.cssの抜粋。
body {
margin: 0;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
button, input, optgroup,
select, textarea {
color: inherit;
font: inherit;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
img {
border: 0;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
dfn {
font-style: italic;
}
b, strong {
font-weight: bold;
}

02 ノーマライズCSSの例
ノーマライズCSSは Chrome, Firefox, Oprera, Safari 6以上, IE8以上のスタイルを平準化する。

 

記述例は上記に記載してみました!詳しくリセットCSSとノーマライズCSSについて説明すると…

リセットCSS
– マージンやパッディングなどの値をいったん全て0に設定してしまうという基本的な考え方で、01のようにCSSを読み込んだあとに改めて自身で全てのマージンやパディングを記述していく方法。

ノーマライズCSS
– ブラウザごとに異なる部分を補正することで、ブラウザごとの差異をなくすという考え方で、 02のようなCSSを読み込むだけでいい方法。

このやり方を知っておくとブラウザの差異をCSSを使ってなくす時、役に立ちそうですね。ぜひ、参考にしてみてください!

コメントを残す

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

*