font-size: ***;

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
プロパティ

font-size は、文字サイズを指定するプロパティです。


p {
font-size: 80%;
}
プロパティ名 値 説明
font-size 以下を参照 文字サイズを指定 （初期値は medium）

文字サイズの指定方法

文字のサイズは、以下の3つの方法で指定することができます。

長さ・パーセントで指定

font-size: 1.5em;
font-size: 80%;

数値+単位（em 等）またはパーセントで指定する方法です。

  • パーセントで指定することをお勧めします。

絶対サイズのキーワードで指定

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%; }

使用例


<!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 サンプルテキスト