スタイルを初期化する【css tips】

CSSでデザインしていく際に、ブラウザによりデフォルトのスタイルが異なる為困ることがあります。

有名なものではbody要素が持つデフォルトの余白を、FireFoxやIEはmargin属性で再現しているのに対して、Operaはpadding属性で再現しています。


その他にの要素もブラウザ特有のスタイルがデフォルトで指定されているものがあります。

そこで、あらかじめすべての要素に対して特定のスタイルを指定することにより、ブラウザのデフォルトのスタイルの違いを吸収できます。

よく使われるのは以下のようなスタイルの初期化

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

これは*(ユニバーサルセレクタ)を使い、すべての要素に対して初期化を行っております。

font-styleやfont-weight、font-sizeの初期化を行うかどうかは好みの分かれるところですが

などのついやってしまう、視覚表現の為HTMLを使ってしまう、という行為を抑制する為にも個人的にはお勧めです。

これを使うと作業効率が全然変わってきますよ

スポンサードリンク

«atomに改行を反映させる | メイン | 【SEO対策TIPS】object要素の最適化»