スタイルシートを用いてフォントのサイズ、文字の大きさを変更する方法を紹介します。
CSSでフォントサイズを指定する場合は"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ブラウザで表示すると下図の表示となります。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2024-02-10
作成日: 2012-08-10
