文字のサイズを指定する


font-size: ***;

ブラウザ
Internet Explorer Netscape Firefox Opera
参考
書式基本 要素名 クラス ID

font-size は、文字の大きさを指定するプロパティです。


p {
font-size: 80%;
}


font-size 文字の大きさを指定します

【サイズの指定方法】

数値+単位(em、pt、他)か %(割合)で指定

font-size: 80%;

12pt1.5em など、数値と単位で指定する方法です。

※単位については、長さの単位をご覧ください。

7段階で指定

font-size: small;

(小)xx-smallx-smallsmallmediumlargex-largexx-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で指定



[特集] レンタルサーバー比較 & サーバー選びのチェックポイント
[統計] HTMLからXHTMLへの移行を進めていますか?