HOME >> スタイルシート > 文字の大きさを指定する

　文字の大きさを指定する

■	font-size:

指定できる値

スタイルシートでの単位

数値にptなどの単位をつけて指定する

キーワード

xx-small,x-small,small,medium,large,x-large,xx-large

相対的なキーワード

smaller,larger

パーセント

スタイルシートで文字の大きさを指定するには、font-sizeプロパティを使います。
値には、12ptや1cmなどのスタイルシートでのサイズ指定方法で指定したり、xx-small(最小）～xx-large(最大)などのキーワードや、smaller(小さく）やlarger(大きく）などのキーワードで、親要素の文字の大きさに対して相対的な文字サイズを指定することが出来ます。
それと、パーセントで指定した場合は、親要素の文字の大きさを100％とし、それに対する比率で文字サイズを指定することも出来ます。

HTMLではFONTタグを使って文字の大きさを指定しますが、FONTタグでは7段階の大きさしか指定することが出来ませんでしたよね。しかし、font-sizeプロパティを使えばより自由に文字サイズを指定することが出来ます。
極端な例ですけど、画面いっぱいに文字を表示することも出来ます。

それと、ptやcmなどの絶対的な単位でサイズ指定すれば、ページを見ている人の環境に左右されることなく同じ大きさの文字を表示させることも出ます。
下の例では、ptを使った記入例がありますので、IEで見ている人はメニューバーの「表示」→｢文字のサイズ」で文字のサイズを変えてみて下さい。ptでサイズ指定している文字は、大きさが変わらないはずです。

サンプル - Microsoft Internet Explorer

xx-small です

x-small です

small です

medium です

large です

x-large です

xx-large です

smaller です

larger です

14pt です

40pt です

100% です

300% です

ソース

<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
</HEAD>
<BODY>
<DIV style="font-size:xx-small;"> xx-small です</DIV>
<DIV style="font-size:x-small;"> x-small です</DIV>
<DIV style="font-size:small;"> small です</DIV>
<DIV style="font-size:medium;"> medium です</DIV>
<DIV style="font-size:large;"> large です</DIV>
<DIV style="font-size:x-large;"> x-large です</DIV>
<DIV style="font-size:xx-large;"> xx-large です。</DIV>
<DIV style="font-size:smaller;"> smaller です</DIV>
<DIV style="font-size:larger;"> larger です</DIV>
<DIV style="font-size:14pt;"> 14pt です</DIV>
<DIV style="font-size:40pt;"> 40pt です</DIV>
<DIV style="font-size:100%;"> 100% です</DIV>
<DIV style="font-size:300%;"> 300% です</DIV>
</BODY>
</HTML>

サンプル - Microsoft Internet Explorer

3cm

ソース

<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
</HEAD>
<BODY>
<DIV style="font-size:3cm;"> 3cm </DIV>
</BODY>
</HTML>

HOME >>スタイルシート

次のページ >>