リセットCSSとNormalize.cssの使い分け方とは？

CSS
CSS

最初に言うと弊社は独自のリセットCSSを使用しています。これは文字サイズ、余白（margin、padding）を細かく設定することが多いので、デフォルトでは何も効いていない状態の方が管理しやすいからです。

リセットCSSの役割
文字通り各ブラウザのデフォルトのCSS設定をリセットします。何も効いていない状態とします。文字サイズは基準サイズ、margin・paddingは0です。自分が制作し始めた時期はWindows IE（Internet Explorer）とMac IE、Netscape Navigator、Operaといったものが対象ブラウザでした。各ブラウザで余白の取り方も異なっており、IEは<body>タグの余白はmargin、Operaはpaddingで設定していました。なのでデフォルトでmargin・paddingを0にして統一しました。
サイトの内容にもよりますが、細かく余白をコントロールするようなタイプのサイトはリセットCSSは必須だろうと考えています。サービスサイトやECなど見た目を細かく設定する場合はリセットされていないと作りづらいです。
Normalize.cssの役割
対してNormalize.cssはブラウザのデフォルト設定を0にはしません。デフォルトの設定を活かすという考え方です。ブラウザのデフォルト設定を活せるようなタイプのサイトには適しているだろうと考えます。情報発信主体のサイトやブログはNormalize.cssでも良いでしょうね。
Normalize.cssを使い、かつ要素をリセットをするパターン
自分がNormalize.cssを熟知していないからなのですが、個人的に理解が難しいのがこのパターンです。ブラウザデフォルトの設定を活かさないならばNormalize.cssを使う必要はないのではないでしょうか。

▼（参考）Normalize.cssを使ったコーディングの注意点とリセットCSSとの違い
http://cappee.net/coding/normalize-css-reset-css

リセットしないでサイト運用は可能なのか？

今回このように取り上げたのもリセットせずにサイトリニューアルした案件を手直しすることになったからです。リセットだけの話ではないのですが、作り方次第で運用のしやすさも変わります。

参考までに弊社のリセットCSSです。どのサイトでも同じだろう設定のみです。font-familyや色など装飾に関する部分はリセット以外に記述しています。


@charset "utf-8";
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,table,th,td,figure,figcaption,article,aside,canvas,details,figcaption,figure,footer,header,menu,nav,section,summary,address,caption,em,strong {
margin: 0;
padding: 0;
font-size: 1em;
font-weight: normal;
text-align: left;
}
li {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
}
fieldset,img,table,th,td {
border: 0;
}
img,
input[type="image"] {
vertical-align: bottom;
}
input,textarea,select {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
}

西部俊宏
執筆者：西部俊宏
株式会社Webの間代表取締役。上場企業でのSEOやWebサイト構築実績多数。ECサイトのカスタマイズ経験も多数あり。
会社概要はこちら

「ECサイトをより便利にしたい」「もっと集客したい」ECカスタマイズはお任せください

 
お問い合わせ