HTML STUDY
>
>

文字の大きさ

ここではCSSで文字の大きさを設定する方法を解説していきます。設定方法にはキーワードや数値、パーセントで大きさを変えることができます。

font-size

CSSプロパティfont-sizeを使用して文字の大きさを設定してみましょう。font-sizeに与える値として数値（16pxなど）やパーセント、キーワード（smallなど）があります。キーワードの種類として以下のようなものがあります。

CSSプロパティ解説
font-size文字の大きさ
font-sizeのキーワード解説
xx-smallmediumの0.6倍
x-smallmediumの0.75倍
smallmediumの0.9倍
medium通常サイズ（初期値）
largemediumの1.2倍
x-largemediumの1.5倍
xx-largemediumの2倍

パーセントで大きさを指定した場合は100%を基準の大きさとして相対的に表示します。200%とすると基準の2倍の大きさとなります。

HTMLコード記述例

<p class="font-xx-small">xx-smallの大きさはこのくらい。</p>
<p class="font-medium">mediumの大きさはこのくらい。</p>
<p class="font-xx-large">xx-largeの大きさはこのくらい。</p>

外部ファイルCSS記述例

@charset "utf-8";
p.font-xx-small { font-size: xx-small;}
p.font-medium { font-size: medium;}
p.font-xx-large { font-size: xx-large;}

ブラウザ表示例

xx-smallの大きさはこのくらい。

mediumの大きさはこのくらい。

xx-largeの大きさはこのくらい。

CSS文字 関連記事