HTMLタグ・CSS｜CSS辞典｜文字の大きさ font-size

Home≫CSS辞典≫文字の大きさ font-size

文字の大きさ font-size

≪ 文字の色 color	【 HOME 】	文字を太字 font-weight ≫

文字の大きさ（サンプル）
サンプル用の文字	サンプル用の文字	サンプル
▼	▼	▼
サンプル用の文字	サンプル用の文字	サンプル
※ 上が通常の状態で、下が実際に効果を反映したサンプルです。

文字の大きさ（詳細情報）
字体	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 を指定しています。基本の文字サイズを元に大きさが変わります。

≪ 文字の色 color	【 HOME 】	文字を太字 font-weight ≫

練習用書き込みフォーム（サンプル表示）
<div style="font-size:11px;">サンプル用の文字</div>

文字の大きさ font-size｜CSS辞典｜HTMLタグ・CSS

文字の大きさ font-size