クロスブラウザでフォントサイズを統一するCSS

CSSでフォントサイズの指定をしない場合、各Webブラウザでの文字サイズは結構バラバラになってしまいます。単純にフォントサイズを統一するだけなら、pxやptで指定すればいいのですが、そうしてしまうとInternetExplorerでユーザーが文字サイズを変更できなくなってしまいます。今回は、InternetExplorerでユーザーが文字サイズを変更でき、且つクロスブラウザでフォントサイズを統一するCSSについてレポートしたいと思います。

CSSでフォントサイズを統一する方法も色々と存在しており、今回紹介する方法が正解だとは考えていません。より良い方法がありましたら、是非ご紹介下さい。

まず、考え方としてInternetExplorerでは前述の理由で絶対値での指定が出来ないので、相対値で指定を行います。一方、Firefox, GoogleChrome, Safari, Operaに関しては、絶対値で指定を行います。

つい最近までは、下記のCSSを使用していました。いわゆるCSSハックを使い、IE6, IE7, IE8では相対値の指定となるようにしています。しかし、この手法ではIE8に対する指定がvalidではなくなります。また、そもそもCSSハックの使用は出来る限り控えるべきと考えていることもあり、ずっと頭を悩ませていました。

@charset "UTF-8";

body, h1, h2, h3, h4, h5, h6, pre, li, dt, dd, th, td, p {
font-size:13px;
/*for IE6*/
_font-size:small;
}

/*for IE7*/
*+html body div, *+html body h1, *+html body h2, *+html body h3, *+html body h4, *+html body h5, *+html body h6,
*+html body pre, *+html body li, *+html body dt, *+html body dd, *+html body th, *+html body td, *+html body p {
font-size:small;
}

/*for IE8*/
html>/**/body div, html>/**/body h1, html>/**/body h2, html>/**/body h3, html>/**/body h4, html>/**/body h5, html>/**/body h6,
html>/**/body pre, html>/**/body li, html>/**/body dt, html>/**/body dd, html>/**/body th, html>/**/body td, html>/**/body p {
font-size/*\**/:small\9;
}

そこで最近は、潔くIEとそれ以外のブラウザでCSSを分ける手法に切り替えました。

fontsize.css(IE以外のモダンブラウザ用)

@charset "UTF-8";

body, h1, h2, h3, h4, h5, h6, pre, li, dt, dd, th, td, p {
font-size:13px;
}

fontsize_ie.css(IE用)

@charset "UTF-8";

body, h1, h2, h3, h4, h5, h6, pre, li, dt, dd, th, td, p {
font-size:small;
}

そして、HTMLのhead内で下記のように記述します。InternetExplorerでのみ、fontsize_ie.cssを読み込むようにします。

<link rel="stylesheet" type="text/css" href="/css/fontsize.css" media="all" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/css/fontsize_ie.css" media="all" />
<![endif]-->

これで、各々のブラウザで文字サイズを統一することができます。後は、各々の要素でfont-sizeを指定する際には%で指定を行います。

.foo {
font-size:123%;
}

.hoge {
font-size:77%;
}

これまで色々と試行錯誤してきたのですが、一番良い方法はIEが絶対値で指定しても、ユーザーが文字サイズを変更出来るように改良することだと思います。あんまり期待しないで待ちたいと思います。