font-size－スタイルシートリファレンス

トップページ > スタイルシートリファレンス > font-size

★スタイルシートリファレンス

font-size …… フォントのサイズを指定する
Internet Explorer4

font-sizeプロパティは、フォントのサイズを指定する際に使用します。

■値

数値で指定: 数値にpxやemやexなどの単位をつけて指定します。pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。また、emとはフォントの高さを1とする単位で、exとは小文字の｢x｣の高さを1とする単位です。数値には負の値は指定できません。
％で指定: ％値で指定します。
キーワードで指定: xx-small、x-small、small、medium、large、x-large、xx-largeの7段階があり、mediumが標準サイズです。1段階上がると1.2倍のサイズになります。また、smaller、largerを指定すると大きさが1段階上下します。

■使用例

スタイルシート部分は外部ファイル（sample.css）に記述。

span.sample1 {font-size: 12px; }
span.sample2 {font-size: 12em; }
span.sample3 {font-size: 12ex; }
span.sample4 {font-size: 80%; }
span.sample5 {font-size: 100%; }
span.sample6 {font-size: 120%; }
span.sample7 {font-size: xx-small; }
span.sample8 {font-size: x-small; }
span.sample9 {font-size: small; }
span.sample10 {font-size: medium; }
span.sample11 {font-size: large; }
span.sample12 {font-size: x-large; }
span.sample13 {font-size: xx-large; }

HTMLソース

<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
文字の大きさ12px 
文字の大きさ12em 
文字の大きさ12ex 
文字の大きさ80% 
文字の大きさ100% 
文字の大きさ120% 
文字の大きさxx-small 
文字の大きさx-small 
文字の大きさsmall 
文字の大きさmedium 
文字の大きさlarge 
文字の大きさx-large 
文字の大きさxx-large
</body>
</html>

↓↓↓

ブラウザ上の表示

文字の大きさ12px
文字の大きさ12em
文字の大きさ12ex
文字の大きさ80%
文字の大きさ100%
文字の大きさ120%
文字の大きさxx-small
文字の大きさx-small
文字の大きさsmall
文字の大きさmedium
文字の大きさlarge
文字の大きさx-large
文字の大きさxx-large

■関連項目

font …… フォントに関する指定をまとめて行う
font-style …… フォントをイタリック体・斜体にする
font-variant …… フォントをスモールキャップにする
font-weight …… フォントの太さを指定する
font-size …… フォントのサイズを指定する
font-family …… フォントの種類を指定する
font-size-adjust …… フォントのサイズを調整する
font-stretch …… フォントを縦長・横長にする