1. Home
  2. スタイルシート CSS
  3. テキスト・フォント
  4. 文字サイズを指定する

文字サイズを指定する


font-size: ***;


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

メモ

文字サイズを指定する場合は、相対的な値(パーセント、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 サンプルテキスト


テキスト・フォント

ページの先頭へ