font-sizeとは
- font-size とは次の語句からなるCSSのプロパティです。
- font
- 読み: フォント
意味: 書体 - size
- 読み: サイズ
意味: 大きさ、寸法
font-sizeプロパティの概要
このプロパティはブラウザに表示される書体データの高さを指定することができます。 これを簡単にいうと、テキストの大きさを指定できるプロパティということです。
指定できる値は、キーワード値、絶対単位値、相対単位値、パーセンテージ値のいずれかになります。
実機サンプルとサンプルコード
構文
セレクター{font-size: 設定値}ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。
font-sizeプロパティは親要素のプロパティを継承する仕様となっています。 そのため、ここからの検証用のサンプルでは親要素にdiv要素を使います。 また、そのdiv要素に内包された子要素としてspan要素を使用して、span要素にプロパティを適用した結果を見ていきたいと思います。
初期値: medium
初期値のmedium は中間という意味です。 mediumはこのプロパティの絶対値キーワードとなります。 文字の表示される大きさはブラウザの設定に依存します。
<span> 子要素 (未指定) </span>
</div>
span{CSSは適用していません}絶対キーワード値: small
small は小さいという意味です。 smallはこのプロパティの絶対値キーワードとなります。 文字の表示される大きさはブラウザの設定に依存します。
<span> 子要素 (small) </span>
</div>
span{font-size: small;}絶対キーワード値: x-small
x-small はsmallよりも更に小さいという意味です。 x-smallはこのプロパティの絶対値キーワードとなります。 文字の表示される大きさはブラウザの設定に依存します。
<span> 子要素 (x-small) </span>
</div>
span{font-size: x-small;}絶対キーワード値: xx-small
xx-small はx-smallよりも更に小さいという意味です。 xx-smallはこのプロパティの絶対値キーワードとなります。 文字の表示される大きさはブラウザの設定に依存します。
<span> 子要素 (xx-small) </span>
</div>
span{font-size: xx-small;}絶対キーワード値: large
large は大きいという意味です。 largeはこのプロパティの絶対値キーワードとなります。 文字の表示される大きさはブラウザの設定に依存します。
<span> 子要素 (large) </span>
</div>
span{font-size: large;}絶対キーワード値: x-large
x-large はlargeよりも更に大きいという意味です。 x-largeはこのプロパティの絶対値キーワードとなります。 文字の表示される大きさはブラウザの設定に依存します。
<span> 子要素 (x-large) </span>
</div>
span{font-size: x-large;}絶対キーワード値: xx-largel
xx-large はx-largeよりも更に大きいという意味です。 xx-largeはこのプロパティの絶対値キーワードとなります。 文字の表示される大きさはブラウザの設定に依存します。
<span> 子要素 (xx-large) </span>
</div>
span{font-size: xx-large;}相対キーワード値: smaller
smaller は「小さくなる」という意味です。 smallerはこのプロパティの相対値キーワードとなります。 文字の表示される大きさは親要素のフォントサイズから相対計算されます。
<span> 子要素 (smaller) </span>
</div>
span{font-size: smaller;}相対キーワード値: larger
larger は「大きくなる」という意味です。 largerはこのプロパティの相対値キーワードとなります。 文字の表示される大きさは親要素のフォントサイズから相対計算されます。
<span> 子要素 (larger) </span>
</div>
span{font-size: larger;}数値: 絶対単位
フォントサイズは絶対単位付きの数値で指定することができます。 サンプルではcm(センチメートル)という単位を使用しました。
単位の詳細については、 CSSの単位について のページを参照していただければ幸いです。
<span> 子要素 (1cm) </span>
</div>
span{font-size: 1cm;}数値: 相対単位
フォントサイズは相対単位付きの数値で指定することができます。 サンプルではemという単位を使用しました。emは「全角」とか、大文字の「M」の大きさの意味があります。 このサンプルの場合、親要素のmidiumの高さを継承した子要素に大文字の高さの2倍を指定したことになります。
<span> 子要素 (2em) </span>
</div>
サンプルとしてもう一つexという相対単位を使ってみます。 これは親要素の小文字の「x」の文字の高さを2倍にした高さを子要素の大文字の高さに適用するための単位です。
単位の詳細については、 CSSの単位について のページを参照していただければ幸いです。
<span> 子要素 (2ex) </span>
</div>
span{font-size: 2ex;}数値: パーセンテージ値
フォントサイズはパーセンテージ値で指定することができます。 これは親要素のフォントサイズから継承したサイズを基準に相対比率で自要素のサイズを計算します。
<span> 子要素 (150%) </span>
</div>
<span> 子要素 (80%) </span>
</div>
span{font-size: 100%;}グローバル値
font-sizeプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。
- inheritは親要素の値の継承を促します。
- initialは値を初期値のmediumに戻します。
-
unsetは継承の初期値に戻します。
※このプロパティは親要素の値を継承するのが基本なので、inheritと同じ働きをします。
セレクター{font-size: グローバル値;}補足説明
- すべての要素に適用可
- 親要素の値を継承する
まとめ
ここでは、検証として子要素にCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium; (初期値)
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: smaller;
font-size: larger;
font-size: 10mm;
font-size: 5mm;
font-size: 1.5em;
font-size: 0.5em;
font-size: 150%;
font-size: 50%;
<子要素> (適用対象) </子要素>
</親要素>