CSSの基準フォントサイズは75%で
- 2011年5月27日 18:05
- CSS
いまのところ、とりあえずCSSのfont-sizeは「75%」でいいのでは。多くのブラウザのデフォルト文字サイズが16pxなので、16px × 75% ＝ 12px、となります。IE6〜9も「font-size: 75%;」で12px相当のサイズになります。
IE9の日本語版が4月26日に公開されました。これを機にCSSをちょっと整備してみようということで、まずは基準フォントサイズの指定を見直してみました。
いままでの基準フォントサイズ指定
1. YUIのfonts.cssを基準に「IE以外のブラウザ」と「IE6-7」を設定
body {
font:12px/1.231 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',Osaka,sans-serif;
/* for IE6/7 */
*font-size:small;
/* for IE Quirks Mode */
*font:x-small;
}2. IE8の設定
html>/**/body {
font-size /*\**/: small\9;
}この設定ですと、IE9で「12px 固定」になっています。「固定はダメ！絶対！」ということで次のように変更しました。
新しい基準フォントサイズ指定(12px基準の場合)
body {
font:75%/1.231 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',Osaka,sans-serif;
}Firefox3やSafari5、Opera11などのデフォルト文字サイズが16pxなので、
16px × 75% ＝ 12px
となります。IE6～9も「font-size: 75%;」で12px相当のサイズになります。
Firefox2の場合はデフォルト文字サイズが14pxだったりしますが、アクセス解析を見る限り、ほぼ0に近い数字なので無視です。
IE以外のブラウザをpx指定にしたい場合
IE以外のブラウザはpx指定にしたいところですが、そうすると途端にややこしくなります。IE9に対するHackが(いまのところ)ないので、「条件分岐コメント」や「EmulateIE8モード(or EmulateIE7モード)」などを使うことになります。
条件分岐コメント
<!--[if IE 9]>
<link rel="stylesheet" href="ie9.css" type="text/css" />
<![endif]-->
body {
font-size: 75%;
}<!--[if IE 9 ]> <body class="ie9"> <![endif]-->
body.ie9 {
font-size: 75%;
}EmulateIE8モード
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
body {
font-size /*\**/: 75%\9;
}CSSの基準フォントサイズは75%で
「条件分岐コメント」や「EmulateIE8モード」はメンドイので、いまのところ、とりあえずCSSのfont-sizeは「75%」でいいと思います。
- このエントリーのトラックバックURL
- http://www.ibnet.ne.jp/mt/mt-tb.cgi/1030
