font-size: ***;
- ブラウザ
- 特性
- font-size
font-size は、文字サイズを指定するプロパティです。
p {
font-size: 80%;
}
| プロパティ名 | 値 | 説明 |
|---|---|---|
| font-size | 以下を参照 | 文字サイズを指定 （初期値は medium） |
【文字サイズの指定方法】
文字のサイズは、以下の3つの方法で指定することができます。
■絶対サイズのキーワードで指定
font-size: small;
次の7段階のキーワードで指定する方法です。
- xx-large … 最も大きいサイズ
- x-large
- large
- medium … 標準サイズ（初期値）
- small
- x-small
- xx-small … 最も小さいサイズ
xx-large が最も大きいサイズ、xx-small が最も小さいサイズになります。初期値は medium です。
※ブラウザの種類や表示モードによっては、small が標準サイズとして扱われる場合があります。詳しくは「表示モードによる解釈の違い」をご覧ください。
■相対サイズのキーワードで指定
font-size: smaller;
親要素の文字サイズに対して、1段階大きい、または小さいサイズを指定します。
- larger … 1段階大きいサイズ
- smaller … 1段階小さいサイズ
【参考】
文書全体の文字サイズを指定する場合は、body要素に対してこのスタイルを指定します。
body { font-size: 80%; }
ただし、表示モードが「互換モード」の場合は、上記の指定内容が表のセル内には適用されません（「標準モード」では適用されます）。互換モードでセル内にも適用させたい場合は、次のようにth要素とtd要素に対しても指定しておきます。
body, th, td { font-size: 80%; }
文字サイズを指定する場合は、相対的な値（パーセント、em）で指定するようにしましょう。
使用例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
body {
font-size: 100%;
}
p.example1 { font-size: xx-large; }
p.example2 { font-size: x-large; }
p.example3 { font-size: large; }
p.example4 { font-size: medium; }
p.example5 { font-size: small; }
p.example6 { font-size: x-small; }
p.example7 { font-size: xx-small; }
p.example8 { font-size: 1.5em; }
p.example9 { font-size: 80%; }
p.example10 { font-size: larger; }
p.example11 { font-size: smaller; }
</style>
</head>
<body>
<p>font-size: 100% サンプルテキスト</p>
<p class="example1">font-size: xx-large サンプルテキスト</p>
<p class="example2">font-size: x-large サンプルテキスト</p>
<p class="example3">font-size: large サンプルテキスト</p>
<p class="example4">font-size: medium サンプルテキスト</p>
<p class="example5">font-size: small サンプルテキスト</p>
<p class="example6">font-size: x-small サンプルテキスト</p>
<p class="example7">font-size: xx-small サンプルテキスト</p>
<p>font-size: 100% サンプルテキスト</p>
<p class="example8">font-size: 1.5em サンプルテキスト</p>
<p class="example9">font-size: 80% サンプルテキスト</p>
<p>font-size: 100% サンプルテキスト</p>
<p class="example10">font-size: larger サンプルテキスト</p>
<p class="example11">font-size: smaller サンプルテキスト</p>
</body>
</html>
表示例
font-size: 100% サンプルテキスト
font-size: xx-large サンプルテキスト
font-size: x-large サンプルテキスト
font-size: large サンプルテキスト
font-size: medium サンプルテキスト
font-size: small サンプルテキスト
font-size: x-small サンプルテキスト
font-size: xx-small サンプルテキスト
font-size: 100% サンプルテキスト
font-size: 1.5em サンプルテキスト
font-size: 80% サンプルテキスト
font-size: 100% サンプルテキスト
font-size: larger サンプルテキスト
font-size: smaller サンプルテキスト
- サイト内検索
