<html>
<link rel="stylesheet" href="josh.css">
<body bgcolor="#FFFFFF">

		<div id="説明">
			<table cellpadding="0" cellspacing="0" border="0" width="100%" class="main">
				<tr><td valign="top" class="name">font-size</td><td valign="top" nowrap class="compatibility">NN <span class="emphasis">4</span> IE <span class="emphasis">4</span> CSS <span class="emphasis">1</span></td>
				</tr>
				<tr>
					<td colspan="2" class="divider"><img src="dwres:18084" width="100%" height="1"></td>
				</tr>
				<tr>
					<td valign="top" nowrap class="usage"><p class="literal"></p>
					</td><td valign="top" nowrap class="requirements">継承 : あり</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="description"><p>要素のフォントサイズを指定します。フォントサイズの設定にはいくつかの方法があります。<span class="literal">xx-small</span>、<span class="literal">x-small</span>、<span class="literal">small</span>、<span class="literal">medium</span>、<span class="literal">large</span>、<span class="literal">x-large</span>、および <span class="literal">xx-large</span> の各定数を指定すると、いわゆる "絶対サイズ" が定義されます。実際には、特定の OS にインストールされた特定のブラウザにおいてのみ絶対的なサイズとなります。HTML の旧式のフォントサイズ 1 ～ 7 と同様、各サイズの基準となるフォントサイズはブラウザと OS によって異なるからです。絶対サイズを使用した場合、少なくとも <span class="literal">large</span> に設定された要素が <span class="literal">medium</span> に設定された別の要素よりも大きいサイズで表示されることだけは確実です。
</p><p><span class="literal">larger</span> と <span class="literal">smaller</span> の各定数を指定すると、相対サイズが定義されます。<span class="literal">font-size</span> 属性は親要素から継承されるので、相対サイズが親要素に適用された結果、現在の要素のフォントサイズが決まります。相対サイズを指定した場合にフォントサイズがどれだけ変更されるかは、使用するブラウザによって異なるだけでなく、親要素のフォントサイズの設定によっても大きく左右されます。親要素のフォントサイズが絶対サイズ (たとえば <span class="literal">large</span>) で指定されている場合、子要素のフォントサイズを <span class="literal">larger</span> に指定すると、子要素はブラウザの <span class="literal">x-large</span> サイズを使って表示されます。親要素のフォントサイズが長さやパーセント値で設定されている場合には、フォントサイズの調節分の決定はこれより複雑です。
</p><p><span class="literal">font-size</span> 属性を長さで指定する場合、出力メディアへの表示に適した単位を選択します。たとえば、画面表示にはピクセル (<span class="literal">px</span>)、印刷出力にはポイント (<span class="literal">pt</span>) または em (<span class="literal">em</span>) を使用します。em の値は、親要素のフォントサイズに基づいて計算されます。また、<span class="literal">fontSize</span> をパーセント値に指定した場合には、親要素のフォントサイズに対する割合として計算されます。
</p><p>一部のブラウザでは、独自 (ユーザー) の設定を使用して medium サイズが決定されるので、フォントサイズを細かく指定しても意味がありません。このため、多くのデザイナーは <span class="literal">font-size</span> の指定に相対サイズを使用することを好みます。相対サイズを使用した場合、異なるブラウザと OS の間で表示を厳密に制御することはできませんが、表示の統一にこだわりすぎるとストレスがたまります。
</p>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="csssyntax"><span class="title">CSS 構文</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td><span class="programlisting"><pre>font-size: <span class="replaceable">absoluteSize</span> | <span class="replaceable">relativeSize</span> | <span class="replaceable">length</span> | <span class="replaceable">percentage</span></pre>
						</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="value"><span class="title">値</span></td>
				</tr>
				<tr>
					<td><p>絶対サイズの場合、<span class="literal">xx-small</span>、<span class="literal">x-small</span>、<span class="literal">small</span>、<span class="literal">medium</span>、<span class="literal">large</span>、<span class="literal">x-large</span>、または <span class="literal">xx-large</span> のいずれかを指定します。相対サイズの場合、<span class="literal">larger</span> か <span class="literal">smaller</span> のどちらかを指定します。長さを指定する場合、本章の始めにある length の値についての説明を参照してください。パーセントで指定する場合、パーセント値と <span class="literal">%</span> を指定します。
</p>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="initvalue"><span class="title">既定値</span></td>
				</tr>
				<tr>
					<td><p><span class="literal">medium</span> (<span class="literal">BODY</span> 要素用)、親要素の <span class="literal">font-size</span> 値 (その他すべての要素)。
</p>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="example"><span class="title">例</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td><span class="programlisting"><pre>body {font-size: 14pt}
p.teeny {font-size: x-small}
em {font-size: larger}
span.larger {font-size: 150%}</pre>
						</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="appliesto"><span class="title">適用先</span></td>
				</tr>
				<tr>
					<td><p>すべての要素</p>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="objectmodelreference"><span class="title">オブジェクト参照</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td><span class="programlisting"><pre>[window.]document.getElementById("<span class="replaceable">elementID</span>").style.fontSize</pre>
						</span></td>
				</tr>
			</table>
		</div>
</body>
</html>