役に立つかもしれないBlogお問い合わせトップITIT技術・規格CSSCSSを使ってどのブラウザでもフォントサイズを「%」で統一させる方法CSSを使ってどのブラウザでもフォントサイズを「%」で統一させる方法CSSによるフォントサイズの指定は「font-size」属性を使って簡単に設定することができますが、ピクセル指定などの絶対的サイズで統一する方法にくらべて非常にやっかいなのが、相対的なサイズによるサイズの統一です。6とFirefox2.0で見てみたページが以下のようなものです。Explorer6は下位互換モードで表示されていますが、標準モードでも同じサイズで表示されます。あきらかにFirefoxで表示されたページのフォントサイズが小さくなっていることがわかります。このように、フォントをパーセント指定した場合は、その数値によってフォントサイズを規定する境界に微妙なずれがあり、WEBページの製作者はこの点を理解してフォントのサイズを指定する必要があります。煽っておいてなんですが、手軽に指定する方法があります。Library(通称「YUI」)というJavaScriptのライブラリ内で利用されているcssfonts.cssの中のフォントサイズチャートに倣って指定すれば良いのです。準備まず、基本となるフォントサイズを指定します。YUIに倣うと、bodyタグとtableタグへのスタイル追加で以下のような指定を行います。Pゴシック」を適用させるようにしておきます。これによって、基本となるフォントサイズ(font-size:100%)が13ピクセルになります。基本フォントがゴシック系になってしまうのが難点ですが。YUI3.x用に更新しました。100%;}CSSフォントサイズチャート次に、Yahoo!開発チームが検証した「フォントサイズをピクセル指定からパーセント指定にした場合に何パーセントになるか」のチャートに従って、パーセンテージを指定します。以下のチャートは独自にルーラーを付加したバージョンです。ピクセル数に対する幅の一致をお持ちのブラウザごとに確認してみてください。ブラウザごとでも幅が一致していることがお分かりでしょうか。sample小数点第一位までこだわる辺り、プロだなといった感じです。新たに奇妙なブラウザが登場したら更新されるかもしれません。現状ではこれで大丈夫なようです。Opera9追記:Opera9では22pixel以降の%指定で若干小さく表示される、という問題が発生しています。参考にされる場合はご注意を。(解決案をご存知の方はお知らせいただけると幸いです。)簡単にまとめてみたサイズ指定もこんな感じでクラスにしておくと便利ですね。}このページをシェアするあわせて読みたい有名ECサイトの価格表示CSSを調べてみた。コメントをキャンセルメールアドレスが公開されることはありません。Webサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。田舎に生まれ育ち東京へ。技術はDTPデザインからプログラミングまで、インフラはCD-ROM全盛からクラウドサーバーまで、いろいろなビジネスを作り、関わってきました(知見を生かして専門学校の講師も3年ほど)。今ではAWSで月間100万PVを超えるサービスを制作・運営しながらさらなるノウハウを蓄積中。このサイトではビジネスをITコンサルタント視点で考え、感じた知見や経験が世の中のお役に立てば、という視点で無料記事として公開しています。最近は機械学習による仕事の効率化を研究中。reserved.代表者のライフハックブログ。