フォントサイズをピクセルで指定すると、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% |