remove
powerd by nog twitter
CSSの基本(3)-文字サイズを指定する
今回は、CSSを使って文字サイズを変更する方法を説明します。文字サイズは、FONTタグのsize属性で指定することも可能ですが、CSSを使うとより詳細に文字サイズを指定できるようになります。 サンプルページ

→ 文字サイズの指定
 
CSSで文字サイズを指定する場合は、font-sizeプロパティを指定します。その値には、xx-large、x-large、large、medium、small、x-small、xx-smallの7種類を指定することが可能であり、xx-largeが最大、xx-smallが最小の文字サイズとなります。
<DIV style="font-size:xx-large">文字サイズ「xx-large」の文字</DIV><BR>
<DIV style="font-size:x-large">文字サイズ「x-large」の文字</DIV><BR>
<DIV style="font-size:large">文字サイズ「large」の文字</DIV><BR>
<DIV style="font-size:medium">文字サイズ「medium」の文字</DIV><BR>
<DIV style="font-size:small">文字サイズ「small」の文字</DIV><BR>
<DIV style="font-size:x-small">文字サイズ「x-small」の文字</DIV><BR>
<DIV style="font-size:xx-small">文字サイズ「xx-small」の文字</DIV>
サンプルページ


→ 数値で文字サイズを指定する
 
font-sizeプロパティは、数値で文字サイズを指定することもできます。これで自分の好きなサイズで文字を表示できるようになります。なお、font-sizeプロパティで文字サイズを指定する場合は、必ず単位を記述するようにしてください。単位を付け忘れると、CSSによる文字サイズの指定が正しく機能しません。注意してください。文字サイズの単位にはpt(ポイント)のほかに、px(ピクセル)、cm(センチメートル)、mm(ミリメートル)なども指定できます。
<DIV style="font-size:40pt">文字サイズ「40pt」の文字</DIV><BR>
<DIV style="font-size:32pt">文字サイズ「32pt」の文字</DIV><BR>
   :
   :
<DIV style="font-size:8pt">文字サイズ「8pt」の文字</DIV><BR>
<DIV style="font-size:6pt">文字サイズ「6pt」の文字</DIV>
サンプルページ


→ 見出しの文字サイズを変更する
 
font-sizeプロパティは、H1やH2といった見出しタグの文字サイズを変更することも可能です。たとえば、以下のようにCSSを指定すると、H1タグは16ポイント、H2タグは24ポイントで表示されます。この場合、『レベル1のH1タグよりレベル2のH2タグの方が文字サイズが大きい』という奇妙な結果になります。このような指定は少し極端な例ですが、自由に文字サイズを指定できることの一例として見てもらえればよいと思います。
<STYLE type="text/css">
H1{
font-size:16pt;
}
H2{
font-size:24pt;
}
</STYLE>
サンプルページ