| 文字の大きさ （詳細情報） |
|---|
| 対応 |
Internet Explorer 4 ↑
Netscape 4 ↑ （ブラウザの対応）
|
| 字体 |
font-size:★;
|
| 指定 |
★の部分に 数字 か、単語 で指定していきます。
数字の場合、数字の後に単位をつけます。
- 「数字」 大きさを数字で指定することができます。単位によって変わります。
（単位の種類： % px pt mm cm in pc em ex ）
- 「単語」 定められた単語を指定し、文字サイズを決める。
「xx-small」 を指定すると ･･･ タグ font size="1" と似た大きさになる。
「x-small」 を指定すると ･･･ タグ font size="2" と似た大きさになる。
「small」 を指定すると ･･･ タグ font size="3" と似た大きさになる。
「medium」 を指定すると ･･･ タグ font size="4" と似た大きさになる。
「large」 を指定すると ･･･ タグ font size="5" と似た大きさになる。
「x-large」 を指定すると ･･･ タグ font size="6" と似た大きさになる。
「xx-large」 を指定すると ･･･ タグ font size="7" と似た大きさになる。
「smaller」 を指定すると ･･･ 親要素に対して１つ小さめのサイズになる。
「larger」 を指定すると ･･･ 親要素に対して１つ大きめのサイズになる。
|
| 効果 |
文字の大きさを変更することができます。 |
| 例１ |
<div style="font-size:80%;">サンプル用の文字</div>
<div style="font-size:100%;">サンプル用の文字</div>
<div style="font-size:120%;">サンプル用の文字</div>
|
| 結果 |
サンプル用の文字
サンプル用の文字 （100％が通常）
サンプル用の文字
|
| 解説 |
例１： ブラウザメニューの【表示】→【文字のサイズ】 で、基本文字サイズを変えていても、その大きさから何％大きいかを判断して文字サイズを決めます。px などは完全にその大きさに固定してしまうので 【文字のサイズ】 設定が反映されません。
|
| 例２ |
<div style="font-size:13px;">サンプル用の文字</div>
<div style="font-size:16px;">サンプル用の文字</div>
<div style="font-size:19px;">サンプル用の文字</div>
|
| 結果 |
サンプル用の文字
サンプル用の文字 （16pxが通常）
サンプル用の文字
|
| 例３ |
<div style="font-size:11pt;">サンプル用の文字</div>
<div style="font-size:13pt;">サンプル用の文字</div>
<div style="font-size:15pt;">サンプル用の文字</div>
|
| 結果 |
サンプル用の文字
サンプル用の文字 （13ptが通常）
サンプル用の文字
|
| 例４ |
<div style="font-size:3.5mm;">サンプル用の文字</div>
<div style="font-size:4.5mm;">サンプル用の文字</div>
<div style="font-size:5.5mm;">サンプル用の文字</div>
|
| 結果 |
サンプル用の文字
サンプル用の文字 （4.5mmが通常）
サンプル用の文字
|
| 例５ |
<div style="font-size:0.35cm;">サンプル用の文字</div>
<div style="font-size:0.45cm;">サンプル用の文字</div>
<div style="font-size:0.55cm;">サンプル用の文字</div>
|
| 結果 |
サンプル用の文字
サンプル用の文字 （0.45cmが通常）
サンプル用の文字
|
| 例６ |
<div style="font-size:0.14in;">サンプル用の文字</div>
<div style="font-size:0.18in;">サンプル用の文字</div>
<div style="font-size:0.22in;">サンプル用の文字</div>
|
| 結果 |
サンプル用の文字
サンプル用の文字 （0.18inが通常）
サンプル用の文字
|
| 例７ |
<div style="font-size:0.7pc;">サンプル用の文字</div>
<div style="font-size:1pc;">サンプル用の文字</div>
<div style="font-size:1.3pc;">サンプル用の文字</div>
|
| 結果 |
サンプル用の文字
サンプル用の文字 （1pcが通常）
サンプル用の文字
|
| 例８ |
<div style="font-size:0.8em;">サンプル用の文字</div>
<div style="font-size:1em;">サンプル用の文字</div>
<div style="font-size:1.4em;">サンプル用の文字</div>
|
| 結果 |
サンプル用の文字
サンプル用の文字 （1emが通常）
サンプル用の文字
|
| 解説 |
例８： 相対的な大きさを指定できます。例えば 2em とすれば、回りの文字の大きさより2倍になるようです。 ex も同じような効果になります。
|
| 例９ |
<div style="font-size:1.5ex;">サンプル用の文字</div>
<div style="font-size:2ex;">サンプル用の文字</div>
<div style="font-size:2.5ex;">サンプル用の文字</div>
|
| 結果 |
サンプル用の文字
サンプル用の文字 （2exが通常）
サンプル用の文字
|
| 例１０ |
<div style="font-size:xx-small;">サンプル用の文字</div>
<div style="font-size:x-small;">サンプル用の文字</div>
<div style="font-size:small;">サンプル用の文字</div>
<div style="font-size:medium;">サンプル用の文字</div>
<div style="font-size:large;">サンプル用の文字</div>
<div style="font-size:x-large;">サンプル用の文字</div>
<div style="font-size:xx-large;">サンプル用の文字</div>
|
| 結果 |
|
サンプル用の文字
| |
サンプル用の文字
| |
サンプル用の文字
| |
サンプル用の文字
| |
サンプル用の文字
| |
サンプル用の文字
| |
サンプル用の文字
|
|
| 例１１ |
<div style="font-size:x-large;">基本となる文字の大きさ<br><br>
<font style="font-size:smaller;">１つ小さめにする効果</font><br><br>
<font style="font-size:larger;">１つ大きめにする効果</font>
</div>
|
| 結果 |
基本となる文字の大きさ
１つ小さめにする効果
１つ大きめにする効果
|
| 解説 |
例１１： x-largeで基本となる大きさを決めておき、その中で1段階小さくする smaller と、1段階大きくする larger を指定しています。基本の文字サイズを元に大きさが変わります。
|
