文字の大きさ指定
font-sizeプロパティは、フォントのサイズを指定します。
％で指定した場合は、指定した要素の親である要素のフォントサイズに対する割合になります。また、キーワードを利用することによって、「xx-small」から「xx-large」までの７段階のサイズを表現することができます。この場合、「medium」が標準のサイズです。「smaller」と「large」は、親要素のフォントサイズに対して、それぞれ１段階小さいサイズと１段階大きいサイズに設定します。なお、Windows版IE5.5までとIE6.0の互換モード、Macintosh版IE4.XとNN4.Xでは、「small」が標準のサイズになっていますので、注意してください。サイズ：単位付きの数値、％、smaller、larger、xx-small、x-small、small、medium、karge、x-large、xx-large
HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>フォントサイズを指定する</title>
<style type="text/css">
<!--
.xxs { font-size: xx-small }
.xs { font-size: x-small }
.s { font-size: small }
.m { font-size: medium }
.l { font-size: large }
.xl { font-size: x-large }
.xxl { font-size: xx-large }
.smaller { font-size: smaller }
.larger { font-size: larger }
.s09 { font-size: 9pt }
.s12 { font-size: 12pt }
.s16 { font-size: 16pt }
.p080 { font-size: 80% }
.p120 { font-size: 120% }
.p150 { font-size: 150% }
em {
color: #ff3300;
background-color: #ffffff;
font-style: normal
}
-->
</style>
</head>
<body>
<p>この文字のサイズが、<em>初期値（medium）</em>です。</p>
<ul>
<li class="xxs"><em>xx-small</em> の文字</li>
<li class="xs"><em>x-small</em> の文字</li>
<li class="s"><em>small</em> の文字</li>
<li class="m"><em>medium</em> の文字</li>
<li class="l"><em>large</em> の文字</li>
<li class="xl"><em>x-large</em> の文字</li>
<li class="xxl"><em>xx-large</em> の文字</li>
</ul>
<p>
<span class="smaller">ここは<em>smaller</em></span>、
<span class="m">ここは<em>medium</em></span>、
<span class="larger">ここは<em>larger</em></span>。
</p>
<p>
<span class="s09">ここは<em>9ポイント</em></span>、
<span class="s12">ここは<em>12ポイント</em></span>、
<span class="s16">ここは<em>16ポイント</em></span>。
</p>
<p>
<span class="p080">ここは<em>80%</em></span>、
ここは<em>100%</em>、
<span class="p120">ここは<em>120%</em></span>、
<span class="p150">ここは<em>150%</em></span>。
</p>
</body>
</html>
