　文字の大きさを指定する

■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プロパティを使えばより自由に文字サイズを指定することが出来ます。

極端な例ですけど、画面いっぱいに文字を表示することも出来ます。

それと、pxやcmなどの絶対的な単位でサイズ指定する事も出来ますが、訪問者のパソコンの設定などで文字の大きさは変わりますので気をつけて下さいね。

サンプル - Microsoft Internet Explorer

xx-small です

x-small です

small です

medium です

large です

x-large です

xx-large です

smaller です

larger です

14pt です

40pt です

100% です

300% です

HTML&CSS

<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&CSS

<html>
<head>
<title>サンプル</title>
</head>
<body>
<div style="font-size:3cm;"> 3cm </div>
</body>
</html>