Go my way

CSSでレイアウトした場合、Firefoxでは正しく表示されるけど、Internet Explorerでは意図しない表示になる、そんなことがよくあります。その多くは、各ブラウザのデフォルトスタイルが違うために起こります。

デフォルトスタイルとは、ブラウザが標準で実装しているCSSのことで、各ブラウザによって微妙に違います。この違いがあるため、上のような現象が起こるのです。

この差異を解消するためには、制作者がデフォルトスタイルを上書きすればいいのです。CSSを組むとき特に問題になるのが、marginとpaddingです。この2つのプロパティを上書きするだけでも、後々とても楽になります。上書きするにはユニバーサルセレクタを使い、上書きしたいプロパティを書きます。他のセレクタが出てくる前に書かなければ意味がないので、CSSファイルの一番上に書きます。

* {
    margin: 0;
    padding: 0;
}

こうすることで、すべての要素のmarginとpaddingが0になります。あとは、要素ごとに適切な値を指定するだけです。

他にも上書きしておいたほうがいいプロパティが、いくつかあります。自分の場合はこんな感じです。

* {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-style: normal;
}

この方法を知っているかどうかで、CSSの上達スピードが変わってくると思います。さらに詳しく知りたい方は、以下のエントリーを参考にしてみてください。

• デフォルトスタイルの差異を無くすCSS
• CSSを書く前に読んでもらいたいこと

Tag

CSS