お問い合わせ営業日カレンダーサイトマップコニファHOME
コニファ：ツール紹介やプログラム集・ブラウザ上で文字の見た目確認する・その１（cssで文字サイズ指定・サンプル）


●ブラウザ上で文字の見た目確認する・その１（cssで文字サイズ指定・サンプル）

→ブラウザ上で文字の見た目確認・その２（cssの文字サイズ指定をpxに変換）へ

cssで文字サイズ指定
font-family指定無し
バックグラウンドのマス目（白いライン）は10px
ブラウザのfont-sizeプロパティの初期値:mediumを想定
Windows IE6 のデフォルト（文字サイズ"中"）では約16pxに相当


7段階のxx-small～xx-largeで指定（デフォルトサイズに対する相対指定）
xx-small : Font Size 文字の大きさ（見た目）
x-small : Font Size 文字の大きさ（見た目）
small : Font Size 文字の大きさ（見た目）
medium : Font Size 文字の大きさ（見た目）
large : Font Size 文字の大きさ（見た目）
x-large : Font Size 文字の大きさ（見た目）
xx-large : Font Size 文字の大きさ（見た目）

それまでのサイズから相対的にやや大きく・larger、やや小さく・smaller
medium : Font Size 文字の大きさ（見た目）・それまでのサイズ
larger : Font Size 文字の大きさ（見た目）
medium : Font Size 文字の大きさ（見た目）・それまでのサイズ
smaller : Font Size 文字の大きさ（見た目）

emで指定（文字の高さを1としたサイズに対する相対指定）
0.7em : Font Size 文字の大きさ（見た目）
0.8em : Font Size 文字の大きさ（見た目）
0.9em : Font Size 文字の大きさ（見た目）
1em : Font Size 文字の大きさ（見た目）
1.1em : Font Size 文字の大きさ（見た目）
1.2em : Font Size 文字の大きさ（見た目）
1.3em : Font Size 文字の大きさ（見た目）
1.4em : Font Size 文字の大きさ（見た目）

%で指定（デフォルトサイズに対する相対指定）
65% : Font Size 文字の大きさ（見た目）
70% : Font Size 文字の大きさ（見た目）
75% : Font Size 文字の大きさ（見た目）
80% : Font Size 文字の大きさ（見た目）
85% : Font Size 文字の大きさ（見た目）
90% : Font Size 文字の大きさ（見た目）
95% : Font Size 文字の大きさ（見た目）
100% : Font Size 文字の大きさ（見た目）
105% : Font Size 文字の大きさ（見た目）
110% : Font Size 文字の大きさ（見た目）
115% : Font Size 文字の大きさ（見た目）
120% : Font Size 文字の大きさ（見た目）
125% : Font Size 文字の大きさ（見た目）
130% : Font Size 文字の大きさ（見た目）
135% : Font Size 文字の大きさ（見た目）

上と同じものの親要素にfont-size 85%を指定
65% : Font Size 文字の大きさ（見た目）
70% : Font Size 文字の大きさ（見た目）
75% : Font Size 文字の大きさ（見た目）
80% : Font Size 文字の大きさ（見た目）
85% : Font Size 文字の大きさ（見た目）
90% : Font Size 文字の大きさ（見た目）
95% : Font Size 文字の大きさ（見た目）
100% : Font Size 文字の大きさ（見た目）
105% : Font Size 文字の大きさ（見た目）
110% : Font Size 文字の大きさ（見た目）
115% : Font Size 文字の大きさ（見た目）
120% : Font Size 文字の大きさ（見た目）
125% : Font Size 文字の大きさ（見た目）
130% : Font Size 文字の大きさ（見た目）
135% : Font Size 文字の大きさ（見た目）

pt（絶対指定）で指定
8pt : Font Size 文字の大きさ（見た目）
9pt : Font Size 文字の大きさ（見た目）
10pt : Font Size 文字の大きさ（見た目）
11pt : Font Size 文字の大きさ（見た目）
12pt : Font Size 文字の大きさ（見た目）
13pt: Font Size 文字の大きさ（見た目）
14pt : Font Size 文字の大きさ（見た目）
15pt : Font Size 文字の大きさ（見た目）
16pt : Font Size 文字の大きさ（見た目）
17pt : Font Size 文字の大きさ（見た目）
18pt : Font Size 文字の大きさ（見た目）
19pt : Font Size 文字の大きさ（見た目）

上と同じものの親要素にfont-size 85%を指定してもサイズは変わりません

8pt : Font Size 文字の大きさ（見た目）
9pt : Font Size 文字の大きさ（見た目）
10pt : Font Size 文字の大きさ（見た目）
11pt : Font Size 文字の大きさ（見た目）
12pt : Font Size 文字の大きさ（見た目）
13pt: Font Size 文字の大きさ（見た目）
14pt : Font Size 文字の大きさ（見た目）
15pt : Font Size 文字の大きさ（見た目）
16pt : Font Size 文字の大きさ（見た目）
17pt : Font Size 文字の大きさ（見た目）
18pt : Font Size 文字の大きさ（見た目）
19pt : Font Size 文字の大きさ（見た目）

px（絶対指定）で指定

8px : Font Size 文字の大きさ（見た目）
9px : Font Size 文字の大きさ（見た目）
10px : Font Size 文字の大きさ（見た目）
11px : Font Size 文字の大きさ（見た目）
12px : Font Size 文字の大きさ（見た目）
13px : Font Size 文字の大きさ（見た目）
14px : Font Size 文字の大きさ（見た目）
15px : Font Size 文字の大きさ（見た目）
16px : Font Size 文字の大きさ（見た目）
17px : Font Size 文字の大きさ（見た目）
18px : Font Size 文字の大きさ（見た目）
19px : Font Size 文字の大きさ（見た目）
20px : Font Size 文字の大きさ（見た目）

もっとも利用者数が多いwindows IE6の場合、文字サイズを絶対指定すると（pt、pxなど）、ユーザー側でブラウザーの文字サイズのコントロールが効かなくなります。これはユーザビリティ的に推奨されていません。他のブラウザ　Windows FireFox(v1.5.0.6など)やWindows Netscape(v7.1)、Mac Safari(v1.3.2など)、Mac Netscape(v7.1)、Mac IE(v5.2)などでは、pt、pxなどを使用してもユーザー側の変更が優先されます。

下はブラウザーがデフォルトの状態で、ほぼ同じに見える文字サイズです。ブラウザの表示文字サイズを変えてみてください。Windows IE6の場合（[表示]→[文字のサイズ]で変更できます）下2段の文字サイズは変わらないはずです。

small : Font Size 文字の大きさ（見た目）
0.8em : Font Size 文字の大きさ（見た目）
85% : Font Size 文字の大きさ（見た目）
10pt : Font Size 文字の大きさ（見た目）
13px : Font Size 文字の大きさ（見た目）






Copyright © 2010 Conifer,Inc. All rights reserved.