WebブラウザデフォルトのCSSをリセットするのか、活かすのか

Webブラウザはデフォルトで文字サイズやマージンといったCSSの設定が利いています。しかし文字サイズや余白などをデフォルトのCSS設定のまま使用するケースは非常に少ないはずです。そのために一般的にCSSの初期設定をします。この初期設定方法はいくつかやり方があります。

リセットCSSはCSSの設定を初期化したい時に使用する

リセットCSSはWebブラウザのデフォルト設定を初期化します。文字サイズや余白が何も利いていない状態なので、都度必要な設定をします。場合によっては繰り返し同じような設定をすることもありますが、わかりやすいことが一番の特徴です。

文字サイズや余白を細かくチューニングしたい場合は特に有効です。H1タグは文字サイズが30px、H2タグは20px、H3タグは16px、というようにHTMLタグで見た目を決めるようなCSSコーディングの場合は後述するノーマライズCSSの方が合います。しかし、見た目でタグ付けを決めるのはSEOの観点から避けた方が良いです。HTML文書の内容からHTMLタグは選定すべきです。

ノーマライズCSSはブラウザのデフォルト設定を活かす

対してノーマライズCSSはデフォルトのCSS設定を活かします。また、各ブラウザで微妙に設定内容が異なる部分も調整します。デフォルト設定を活かすので、文字サイズや余白はHTMLタグごとに決まります。これはHTMLタグの選定を見た目で決めることになりがちです。HTMLタグの選定はSEOとしても文書構造の観点からも見た目では選ぶべきではありません。コーダーがノーマライズCSSを選択する場合はHTMLタグの選定基準も確認するようにしましょう。

また、ノーマライズCSSを進化したサニタイズCSSという方法もあります。サニタイズCSSはノーマライズCSSの進化版で、「box-sizing: border-box;」で幅の計測方法の初期設定をするなど、運用しやすい初期設定も行います。ただし、考え方はノーマライズCSSと変わらないので、HTMLタグの選定を見た目で選ぶことに繋がりやすいので弊社は推奨しません。

基本設定は自分で決めること

結局リセットCSSだろうがノーマライズCSS（サニタイズCSS）であろうがコーダーが意図したコーディングをするならばどちらでも構いません。同じことを繰り返しますが、HTMLタグの選定を見た目で決めなければやりやすいやり方で良いです。弊社のコーディング指針は他の記事も読んでいただければ掴めるかと思いますが、下手にデフォルトのCSS設定が利いていない方がわかりやすいのでリセットCSSをカスタマイズして使用しています。