 |
 |
コニファ：ツール紹介やプログラム集・ブラウザ上で文字の見た目確認する・その１（cssで文字サイズ指定・サンプル）
|
 |
|
|
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 文字の大きさ（見た目）
|
|
|
|
|
 |
