どのブラウザでも同じフォントサイズになる%指定のフォントサイズ

フォントサイズをピクセルで指定すると、WindowsのInternetExplorerでは、ユーザが文字の大きさを変えようとしても変わりません。文字のピクセル指定はどのブラウザでも同じ大きさで表示されるのでとても楽で便利なので、つい利用しがちです。
脱却したいと思いませんか?
これからはピクセル指定ではなく%で指定することでこの問題を解決できます。ブラウザごとに表示される大きさがちがってくるのでは?という心配もいりません。

下のサンプルをダウンロードしてお試しください。使い方は簡単。

1、自身の作成するhtmlファイルの<head></head>間に、
<link href="css/default.css" rel="stylesheet" type="text/css" media="screen,print" />
<script src="fontsize.js" type="text/javascript"></script>
をいれます。
2、 自身の作成するhtmlファイルと同じディレクトリにダウンロードしたcssフォルダと、fontsize.jsファイルを配置します。
3、 文字の大きさは下の表のように%で指定するだけです。

これで、例えば、font-size:96%と指定すればどのブラウザでも12pxで表示されます。
※ダウンロードサンプルはxhtmlのutf-8エンコーディングです。

毎日 転職 デザイナー ホームページデザイナー 求人 募集

コーディング デザイン ホームページ 勉強 講座 セミナー 実践 毎日 転職 デザイナー ホームページデザイナー 求人 募集

デザイナー転職 ホームページデザイナー転職 毎日転職 デザイナー 仕事 フリーランス

ホームページデザイナー転職 ホームページ作成 サイト ウェブサイト

ホームページのコーディング ホームページのデザイン スタイルシート

ご利用は自己責任で出来る方のみダウンロードして下さい。

サンプル(ピクセル指定と相対指定が同じ大きさになっているはずです)
ピクセル指定
(?px)
あいう18px あいう17px あいう16px あいう15px あいう14px あいう13px あいう12px あいう11px あいう10px
相対指定
(?%)
あいう18px あいう17px あいう16px あいう15px あいう14px あいう13px あいう12px あいう11px あいう10px
対照表
表示させたい大きさ スタイルシートで指定する値
18px 140%
17px 133%
16px 126%
15px 119%
14px 111%
13px 103%
12px 96%
11px 88%
10px 80%