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

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

font-size …… フォントのサイズを指定する
Internet Explorer4Internet Explorer5Internet Explorer5-macInternet Explorer5.5Internet Explorer6Internet Explorer7Internet Explorer8Internet Explorer9 Netscape4Netscape6Netscape7Netscape8 Opera6Opera7Opera8Opera9Opera10 Firefox1Firefox2Firefox3Firefox4 Google Chrome1Google Chrome2Google Chrome3Google Chrome4Google Chrome5Google Chrome6
広告

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>
<span class="sample1">文字の大きさ12px</span><br>
<span class="sample2">文字の大きさ12em</span><br>
<span class="sample3">文字の大きさ12ex</span><br>
<span class="sample4">文字の大きさ80%</span><br>
<span class="sample5">文字の大きさ100%</span><br>
<span class="sample6">文字の大きさ120%</span><br>
<span class="sample7">文字の大きさxx-small</span><br>
<span class="sample8">文字の大きさx-small</span><br>
<span class="sample9">文字の大きさsmall</span><br>
<span class="sample10">文字の大きさmedium</span><br>
<span class="sample11">文字の大きさlarge</span><br>
<span class="sample12">文字の大きさx-large</span><br>
<span class="sample13">文字の大きさxx-large</span>
</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 …… フォントを縦長・横長にする
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ