HOME > Tips > CSS > ブラウザのデフォルトスタイルをCSSでリセット

ブラウザのデフォルトスタイルをCSSでリセット

  • Author:920

同じ(X)HTMLを表示してもブラウザによって見え方が違うのは、ブラウザそれぞれにスタイルが設定されているからです。

そこで、この差異をなくすためや、作業性をよくするためにこのデフォルトのスタイルをリセットしてしまおうという考え方があります。

当初流行したのが、全称セレクタ(ユニバーサルセレクタ)を使用して、全ての要素のスタイルをリセットする方法です。

全称セレクタはアスタリスク「*」で示され、あらゆる要素とマッチします。

次の例では、全ての要素の「margin」と「padding」が「0」になります。

  • *{
  •      margin:0;
  •      padding:0;
  • }

しかしこの方法は、一旦全ての要素に対してリセットを行うわけですから、負荷が大きいという問題やフォームのボタンなど有用と思われるスタイルもリセットしてしまうという問題もあります。

それらのことから、この全称セレクタを使用したリセット方法は、控えられる傾向にあるようです。

かわりに、独自に必要と判断した要素に対してだけリセットを適用する方法が用いられることが多くなっているようです。

次の例では、「h1」・「h2,」・「h3」・「h4」・「h5」・「h6」・「p」・「blockquote」・「li」が、「margin」と「padding」が「0」になり、「font-weight」が「normal」になります。

  • h1,h2,h3,h4,h5,h6,
  • p,blockquote,li {
  •      margin: 0;
  •      font-weight: normal;
  • }

この方法を使用する場合、どの要素に対してリセットを適用するかはそれぞれに判断すればいいでしょうし、構築するサイトや、プロジェクトごとに判断してもいいでしょう。

色々なサイトのリセットCSSを参考にするのもいいでしょうし、「Yahoo Library」の「Reset CSS」を参考にしてみるのもいいかもしれません。

YUI Reset CSS

UP