リセットCSSを使ってみよう

リセットCSSとは

リセットCSSとは、ブラウザーが固有に持っているスタイルを統一するCSSです。簡単にCSSを統一できるため、採用されているホームページが非常に多いです。今後制作していくのであれば、なんらかのリセットCSSを使うことになります。

なぜリセットCSSが必要か

ブラウザには固有のCSSがプロパティに指定されているため、プロパティが同じでもブラウザによって違う表示になることがあります。

Google Chrome、Firefox、Safari、Edge、Internet Explorerそれぞれにmarginの当たり方が違ったり、font-familyが違ったりします。

その違いを統一して、極力ブラウザごとに違いがないようにするのがリセットCSSになります。

リセットCSSの種類

リセットCSSは大きく分けて２種類あります。marginやpaddingなど初期値をすべて０に完全にリセットにする『完全リセットタイプ』、使えるスタイルをそのまま活用する『デフォルトスタイル活用リセットタイプ』の２種類になります。

完全リセットタイプ

すべてのプロパティのmarginやpaddingが0、h1〜h6、pタグなどのfont-sizeが統一されるため、レイアウトにおけるブラウザごとの違いは出にくいメリットがある一方、ひとつひとつのプロパティに再度cssを提要させる必要があるため、CSSをコーディングする際にコード量が長くなるデメリットがあります。

• Eric Meyer’s “Reset CSS” 2.0
• HTML5 Doctor CSS Reset
• Yahoo! (YUI 3) Reset CSS

ディフォルトスタイル活用リセットタイプ

元のあるプロパティの初期値を活用しつつ、ブラウザごとの誤差をなくしていくタイプのリセットCSSになります。

• normalize.css
• rest.css
• sanitize.css

リセットCSSを使うときの注意点

リセットCSSを使う際に以下の注意点があります。

リセットCSSはサイト制作の途中から採用しない

サイト制作をする際は、リセットCSSを先にあててからCSSをコーディングしてください。

サイト制作の途中でリセットCSSを採用すると、大幅にレイアウトが崩れる場合があります。その修正をするためにかなりの時間を費やすことになるので、リセットCSSを採用するのはサイト制作の最初からと覚えておいてください。

box-sizing：border-box;が指定してあるリセットCSSには注意

特に初心者が何も理解しないで、ress.cssやdestyle.cssを使用するのは注意が必要です。

これらのリセットCSSはbox-sizing:border-box；が指定されています。

一般的に、ブラウザには初期値としてbox-sizing:content-box;が適用されています。

border-boxとcontent-boxの違いはボックスモデルの違いがあり、widthやheightの解釈が変わります。例えば、width:100px;として指定しても、border-boxとcontent-boxではブラウザでの表示の大きさが異なります。

１からホームページを制作する場合にはress.cssやrestyle.cssを使えば問題ありませんが、実際は更新案件やテンプレートのリニューアルなどborder-boxに指定されていない場合もあり、それに気がつかずに困り果ててしまう人もいます。

リセットCSSを使う前に、『リセットCSSにはbox-sizingが異なる場合があること』と『ボックスモデルの理解』を十分にしておきましょう。

リセットCSSは更新されるので注意

リセットCSSは、時代時代によって内容が変わっていきます。あまりに古いリセットCSSを使い続けていると、思わぬレイアウトの崩れが生じる場合があります。

廃止プロパティを削除や新しいプロパティの追加など変わっていくので、時々自分が使用するリセットCSSを最新のリセットCSSに更新していきましょう。