スタイルシートを用いてフォントのサイズ、文字の大きさを変更する方法を紹介します。
CSSでフォントサイズを指定する場合は"font-size"プロパティを用います。
font-size:(フォントサイズ)
フォントサイズは"数値+単位"または"(文字サイズを示すキーワード)"で指定します。
font-size:2em;
font-size:x-small;
| 値 | 説明 | 例 |
|---|---|---|
| pt | ポイント | font-size:12pt |
| pc | パイカ(1pc=12pt) | font-size:2pc |
| px | ピクセル | font-size:20px |
| em | "M"の高さを基準とした大きさ | font-size:2em |
| ex | "x"の高さを基準とした大きさ | font-size:3ex |
| mm | ミリメートル | font-size:10mm |
| cm | センチメートル | font-size:2cm |
| in | インチ | font-size:4in |
| % | パーセント | font-size:75% |
| 値 | 説明 | 例 |
|---|---|---|
| xx-small | font-size:xx-small | |
| x-small | font-size:x-small | |
| small | font-size:small | |
| medium | font-size:medium | |
| large | font-size:large | |
| x-large | font-size:x-large | |
| xx-large | font-size:xx-large |
親要素の値を継承する場合は下記を指定します。
| 値 | 説明 | 例 |
|---|---|---|
| inherit | 親要素の値を強制的に継承する | font-size:inherit |
以下のコードを記述します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="StyleFontSize.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<span class="TextStyle20pt">Penguin : ペンギンは鳥だが泳げる。</span>
<br />
<span class="TextStyle10pt">Penguin : ペンギンは鳥だが泳げる。</span>
<br />
<span class="TextStyle5pt">Penguin : ペンギンは鳥だが泳げる。</span>
</body>
</html>
.TextStyle20pt
{
font-size:20pt;
}
.TextStyle10pt
{
font-size:10pt;
}
.TextStyle5pt
{
font-size:5pt;
}
CSSの宣言ブロック内で"font-size"を記述するとフォントサイズを変更できます。
上記のコードではpt(ポイント数)でフォントサイズを指定していますが、px(ピクセル),em,での指定もできます。xx-small, x-small, small, medium, large, x-large, xx-largeのキーワードでも指定できます。
HTMLファイルをWebブラウザで表示すると下図の表示となります。
