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

HomeCSS辞典文字の大きさ font-size
サイト内検索

文字の大きさ font-size

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

文字の大きさ (詳細情報)
字体 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」 を指定すると ・・・ 親要素に対して1つ小さめのサイズになる。
     「larger」 を指定すると ・・・ 親要素に対して1つ大きめのサイズになる。
効果 文字の大きさを変更することができます。
例1 <div style="font-size:80%;">サンプル用の文字</div>
<div style="font-size:100%;">サンプル用の文字</div>
<div style="font-size:120%;">サンプル用の文字</div>
結果
サンプル用の文字
サンプル用の文字  (100%が通常)
サンプル用の文字
解説 例1: ブラウザメニューの【表示】→【文字のサイズ】 で、基本文字サイズを変えていても、その大きさから何%大きいかを判断して文字サイズを決めます。px などは完全にその大きさに固定してしまうので 【文字のサイズ】 設定が反映されません。
例2 <div style="font-size:13px;">サンプル用の文字</div>
<div style="font-size:16px;">サンプル用の文字</div>
<div style="font-size:19px;">サンプル用の文字</div>
結果
サンプル用の文字
サンプル用の文字 (16pxが通常)
サンプル用の文字
例3 <div style="font-size:11pt;">サンプル用の文字</div>
<div style="font-size:13pt;">サンプル用の文字</div>
<div style="font-size:15pt;">サンプル用の文字</div>
結果
サンプル用の文字
サンプル用の文字 (13ptが通常)
サンプル用の文字
例4 <div style="font-size:3.5mm;">サンプル用の文字</div>
<div style="font-size:4.5mm;">サンプル用の文字</div>
<div style="font-size:5.5mm;">サンプル用の文字</div>
結果
サンプル用の文字
サンプル用の文字 (4.5mmが通常)
サンプル用の文字
例5 <div style="font-size:0.35cm;">サンプル用の文字</div>
<div style="font-size:0.45cm;">サンプル用の文字</div>
<div style="font-size:0.55cm;">サンプル用の文字</div>
結果
サンプル用の文字
サンプル用の文字 (0.45cmが通常)
サンプル用の文字
例6 <div style="font-size:0.14in;">サンプル用の文字</div>
<div style="font-size:0.18in;">サンプル用の文字</div>
<div style="font-size:0.22in;">サンプル用の文字</div>
結果
サンプル用の文字
サンプル用の文字 (0.18inが通常)
サンプル用の文字
例7 <div style="font-size:0.7pc;">サンプル用の文字</div>
<div style="font-size:1pc;">サンプル用の文字</div>
<div style="font-size:1.3pc;">サンプル用の文字</div>
結果
サンプル用の文字
サンプル用の文字 (1pcが通常)
サンプル用の文字
例8 <div style="font-size:0.8em;">サンプル用の文字</div>
<div style="font-size:1em;">サンプル用の文字</div>
<div style="font-size:1.4em;">サンプル用の文字</div>
結果
サンプル用の文字
サンプル用の文字 (1emが通常)
サンプル用の文字
解説 例8: 相対的な大きさを指定できます。例えば 2em とすれば、回りの文字の大きさより2倍になるようです。 ex も同じような効果になります。
例9 <div style="font-size:1.5ex;">サンプル用の文字</div>
<div style="font-size:2ex;">サンプル用の文字</div>
<div style="font-size:2.5ex;">サンプル用の文字</div>
結果
サンプル用の文字
サンプル用の文字 (2exが通常)
サンプル用の文字
例10 <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>
結果
サンプル用の文字
サンプル用の文字
サンプル用の文字
サンプル用の文字
サンプル用の文字
サンプル用の文字
サンプル用の文字
例11 <div style="font-size:x-large;">基本となる文字の大きさ<br><br>
<font style="font-size:smaller;">1つ小さめにする効果</font><br><br>
<font style="font-size:larger;">1つ大きめにする効果</font>
</div>
結果
基本となる文字の大きさ
1つ小さめにする効果
1つ大きめにする効果
解説 例11: x-largeで基本となる大きさを決めておき、その中で1段階小さくする smaller と、1段階大きくする larger を指定しています。基本の文字サイズを元に大きさが変わります。


練習用書き込みフォーム(サンプル表示)


素材の森 素材NAVI 素材R 素材・壁紙 イラスト素材 素材・作成 素材ランキング 無料素材リンク 素材ファン
無料HP素材、ホームページテンプレート、HTMLタグ・CSS、質問・用語の検索 サイト内検索
素材ランキング 素材NAVI 素材の森 素材サーチ フリー素材 素材・画像 素材・壁紙 素材R Webランキング