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


ブラウザ上で文字の見た目確認する・その1(cssで文字サイズ指定・サンプル)

ブラウザ上で文字の見た目確認・その2(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 文字の大きさ(見た目)


ツール集TOPへ




 

戻るボタン
Copyright© 2019 Conifer,Inc. All rights reserved.