使捨てコンタクトレンズ ★安い・早い・確実にお届け★
HOME >> スタイルシート > 文字の大きさを指定する

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プロパティを使えばより自由に文字サイズを指定することが出来ます。
極端な例ですけど、画面いっぱいに文字を表示することも出来ます。

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

サンプル - Microsoft Internet Explorer
ホーム(H)メニュー(M)戻る(B)進む(N)
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
ホーム(H)メニュー(M)戻る(B)進む(N)
3cm
ソース
<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
</HEAD>
<BODY>
<DIV style="font-size:3cm;"> 3cm </DIV>
</BODY>
</HTML>
Copyright ©2001〜2011 まさぼ〜 All Right Reserved