point 文字の大きさを指定する

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>
 

スポンサード・リンク