概要
CSSプロパティ｢font-size｣は、フォントのサイズを指定することができます。
<p>
都道府県は、<span class="font-size-1">北海道</span>、青森県、<span class="font-size-2">千葉県</span>、東京都、神奈川県・・・宮崎県、鹿児島県、沖縄県です
</p>
<style>
.font-size-1 {
font-size: 10px;
}
.font-size-2 {
font-size: 1.8em;
}
</style>値の指定方法
{ font-size: 値}| 値 | 説明 |
|---|---|
| 数値 | px、em、%など。マイナス値は指定できません。 |
| キーワード | small, largeなど |
| 単位 | 説明 |
|---|---|
| px | pxとは画面の1画素（ピクセル）のサイズを１とする単位です。実際に表示されるサイズはモニターの解像度により変化します。 |
| em | 親要素を起点とする文字の高さを１とする単位です。１emは１文字分となります。 |
| % | 親要素の幅を基準に割合を％値で指定した単位です。 |
プロパティの種類について
｢font｣プロパティで指定できるそれぞれの値の一覧です。詳細は各ページを参照してみてください。
| プロパティ名 | 説明 |
|---|---|
| font | フォントに関する指定をまとめて行うショートハンドプロパティ |
| font-style | フォントのスタイルを指定する |
| font-variant | フォントのスモールキャップ指定する |
| font-weight | フォントの太さを指定する |
| font-size | フォントのサイズを指定する |
| font-family | フォントの種類を指定する |
| font-size-adjust | フォントのサイズを調整する |
| font-stretch | フォントを縦長・横長にする |
実装における注意点
最小サイズの違い
ブラウザによって、可読性保持の為の指定できる最小サイズがあります。10px未満の値は特にブラウザによって表示がことなりますので、注意しましょう。
<p>今日は<span class="size-10px">晴れ</span>です。</p>
<p>今日は<span class="size-9px">晴れ</span>です。</p>
<p>今日は<span class="size-8px">晴れ</span>です。</p>
<style>
.size-10px {
font-size: 10px;
}
.size-9px {
font-size: 9px;
}
.size-8px {
font-size: 8px;
}
</style>使用例
それぞれ異なった単位で指定してみます。どのような振る舞いか確認してみてください。
<p>今日は<span class="size-px">晴れ</span>です。</p>
<p>今日は<span class="size-large">晴れ</span>です。</p>
<p>今日は<span class="size-par">晴れ</span>です。</p>
<p>今日は<span class="size-em">晴れ</span>です。</p>
<style>
.size-px {
font-size: 12px;
}
.size-large {
font-size: large;
}
.size-par {
font-size: 140%;
}
.size-em {
font-size: 2em;
}
</style>