とりあえずCSSでフォントサイズを相対指定しやすいように1em=10pxにする簡単な方法。

文字サイズを、ブラウザから変更できるようにするには、相対値で指定するほうが良いです。ですが、相対値で指定するのって、何ピクセルなのかがよく分からないので、あんまり好きじゃないなって人もいると思います。そんな時は、CSSでサイズを初期化しておきましょう。

とりあえずソース

このサイトで実際に使用しているソースです。

html, h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
}

body {
    font-size: 62.5%;
}

table {
    font-size: 100%;
}

とりあえず、これで、1emが10pxで表示されるようになりました。あとは、普通に、必要な箇所を相対値で指定すればいいってわけです。12pxで表示させたければ1.2emと指定するわけです。

本格的な初期化

上記コードでは、ブラウザの文字の初期サイズが大体同じという前提があります。ごく一部のブラウザでは文字サイズが変わります。対策としては、IE以外のブラウザは絶対値でフォントサイズを指定しても文字サイズの変更が可能なので、bodyにfont-size:10px;と指定して、IEだけ相対値で指定してあげる方法もあります。話は変わりますが、フォントだけではなく、余白などの指定も含めた初期化用のCSSファイルを作って読み込んでいるサイトが増えた気がします。しかし、ガチガチに初期化するCSSなどは、階層が深くなることも考えて作ると複雑だし、そこまでする必要あるのかな?と思ってしまいます。pタグとか、もともと上下に余白があるのに、それをゼロにして、実際にpを使うときはまた余白を設定して・・・なんて、余計なコードが増えている気がしちゃいます。それおど規模の大きくないサイトで、そこまでこだわりがなければ、とりあえずこんなものでなんとかなると思います。