cssフォントサイズの指定方法と文字の大きさの違い

フォントサイズの指定方法
フォントサイズを指定しよう

cssのfont-sizeプロパティの指定方法とそれぞれの文字の大きさの違いについての記事です。 ご存知かと思いますがfont-sizeプロパティは、名前の通りフォント(文字)の大きさを指定する時に使います。

pxなどの単位付きの値で設定されているフォントサイズは、見る事が多いですよね。 でもemやremで指定されてるフォントサイズって、実際どのくらいの大きさで表示されるのかわかりづらいと思います。 なのでそこを踏まえて、font-sizeプロパティの指定方法と指定した単位による文字の大きさの違いなどを紹介ますね(^^♪

目次
cssでフォントサイズを指定する方法

cssでフォントサイズを指定する方法

cssやhtmlで文字の大きさ指定する際は、font-sizeプロパティを使います。 cssへの記述の方法は下の通りです。

プロパティ 意味
font-size フォント(文字)のサイズを指定する
/* 単位で指定の場合 */
p{font-size: 10px ;}

/* キーワードで指定の場合*/
p{font-size: medium ;}

font-sizeプロパティで指定できる値

font-sizeプロパティは、pxなどの単位の他にもパーセンテージ(%)largeなどのキーワード使って指定する事もできます。

指定できる単位 意味
px 指定したサイズとなる
pt 指定したサイズとなる。1pt = 1.3325px (Macの場合1pt = 1px)
cm 指定したサイズとなる
mm 指定サイズとなる
em font-sizeで設定しているサイズを1とする単位。例えばdivのfont-sizeを「12px」と設定する。そしてdivの中のp要素のfont-sizeを「1.5em」と設定する。この場合p要素のフォントサイズは12pxの1.5倍の「18px」で表示される。
rem root要素(html)を基準とした相対的なサイズとなる。
※詳しくは右をクリック!「font-sizeのremの使い方とemとの違い【CSS3】
% %で指定。考え方はemと同じ
.example{font-size:12px;}
.example{font-size:12pt;}
.example{font-size:1.5em;} 
.example{font-size:1.5rem;}
.example{font-size:80%;}
.example{font-size:100%;}
.example{font-size:120%;}
各フォントサイズの表示例(大きさの違い)
文字の大きさ12px
文字の大きさ12pt
文字の大きさ1.5em
文字の大きさ1.5rem
文字の大きさ80%
文字の大きさ100%
文字の大きさ120%

キーワードで指定できる単位の一覧表

キーワードで指定できる単位はxx-small~xx-largeまであり、xx-smallが一番小さく、xx-largeが一番大きいフォントサイズとなります。

1段階キーワードが上がるごとにフォントサイズが1.2倍あがります。

指定できるキーワード フォントサイズ表示例
xx-small xx-small
x-small x-small
small small
medium medium
large large
x-large x-large
xx-large xx-large

相対的なフォントサイズにできるキーワード

相対的なフォントサイズにできるキーワードの一覧表です。

例えばdivのfont-sizeを10pxに指定します。 そしてdiv内のp要素のfont-sizeにsmaller」を設定します。 そうした場合、pの親要素であるdivのフォントサイズより1段階小さくなるというわけです。

指定できるキーワード(相対) 意味
smaller 親要素のフォントサイズより1段階小さくなる
larger 親要素のフォントサイズより1段階大きくなる

ちなみにフォントサイズを何も設定していない時の初期値は「medium」で、具体的なサイズはブラウザごとの初期値となります。

ブラウザごとの初期値は、何も記述してないhtmlファイルにfont-sizeを指定せず文字を入力してみるとわかります。 文字を入力して表示されたサイズが、使用しているブラウザの初期値となります。

ほとんどの場合がフォントサイズは16pxで表示されます。

ブラウザの初期値のフォントサイズ
100% = 16px = 12pt = 1em = 1rem

※「1em」と「1rem」が「16px」というわけではないので注意!あくまでもブラウザの初期値でのフォントサイズです。

以上がフォントサイズについてでしたが、いかがでしたでしょうか?

フォントサイズは、けっこう使い分ける場面が多いかと思います。 中でもremはかなり便利なので、ぜひ使って見て下さいね(^^♪

以上「font-sizeの指定方法と大きさの違い」でしたー(^^♪