[新着] Webテンプレートを仮オープンしました
font-size は、文字の大きさを指定するプロパティです。
p {
font-size: 80%;
}
| font-size | 文字の大きさを指定します |
|---|
【サイズの指定方法】
■数値+単位(em、pt、他)か %(割合)で指定
font-size: 80%;
12pt や 1.5em など、数値と単位で指定する方法です。
※単位については、長さの単位をご覧ください。
■7段階で指定
font-size: small;
(小)xx-small、x-small、small、medium、large、x-large、xx-large(大)
xx-small が一番小さいサイズ、xx-large が一番大きいサイズになります。デフォルトは medium です。
※ブラウザと表示モードによっては、デフォルトのサイズが small になる場合があります。詳しくは「表示モードによる解釈の違い」のフォントサイズの項目をご覧ください。
■相対的に指定
font-size: smaller;
larger … 大きめの文字
smaller … 小さめの文字
それまでの文字サイズと比較して、やや大きめ、やや小さめを指定します。
【参考】
ページ全体の文字サイズを指定する場合は、body要素に対してこのスタイルを指定します。
body { font-size: 80%; }
表示モードが「互換モード」の場合、上記の指定ではテーブル内の文字に対してサイズの指定が適用されません。テーブル内にも適用させたい場合は、次のようにtd要素やth要素に対しても指定しておきます。
body, th, td { font-size: 80%; }
![]()
文字サイズがあまりに小さすぎると、閲覧する人の状況(視力)によっては非常に読みづらいページとなってしまいます。また、サイズを指定する際には、相対的な指定(%やemなど)にしておくことをお勧めします。
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
p { font-size: 100%; }
#example1 { font-size: 200%; }
#example2 { font-size: x-small; }
#example3 { font-size: larger; }
-->
</style>
</head>
<body>
<p>文字サイズを<span id="example1">200%</span>で指定</p>
<p>文字サイズを<span id="example2">x-small</span>で指定</p>
<p>文字サイズを<span id="example3">larger</span>で指定</p>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
文字サイズを200%で指定
文字サイズをx-smallで指定
文字サイズをlargerで指定