Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

font-size

文字の大きさを指定できます。

サンプルコード
p.test { font-size: 12px;}
p.test1 { font-size: 1.2em;}
p.test2 { font-size: 1.2rem;}
p.test3 { font-size: small;}
指定可能な値一覧
概要
数値文字の大きさを数値で指定できます。使用可能な単位は『px』『pt』『%』『em』『rem』等です。
キーワード文字の大きさをキーワードで指定できます。使用可能なキーワードは『xx-small』、『x-small』、『small』、『medium』、『large』、『x-large』、『xx-large』、『larger』、『smaller』です。
使用可能な単位一覧
単位概要
pxピクセルで大きさを指定できます。
ptポイントで大きさを指定できます。CSS2の基準書通りなら1ptは72分の1インチとして算出されますが、OSやディスプレイによって大きさが変動するため使用しないほうが無難です。
%パーセントで大きさを指定できます。基準となる値は親要素のフォントサイズとなります。『IE8』以前のIEを対応させる場合はこの『%』で指定するのが無難です。
em基準となる親要素のフォントサイズを1とした相対的な数値で指定します。
remhtml要素(root要素)のフォントサイズを1とした相対的な数値で指定します。『CSS 3』から実装された単位となります。
指定可能なキーワード一覧
キーワード概要
xx-smallCSS2.1の仕様通りならば『60%』のフォントサイズとなります。
x-smallCSS2.1の仕様通りならば『75%』のフォントサイズとなります。
smallCSS2.1の仕様通りならば『88.8%』のフォントサイズとなります。
mediumCSS2.1の仕様通りならば『100%』のフォントサイズとなります。
largeCSS2.1の仕様通りならば『120%』のフォントサイズとなります。
x-largeCSS2.1の仕様通りならば『150%』のフォントサイズとなります。
xx-largeCSS2.1の仕様通りならば『200%』のフォントサイズとなります。
larger基準となる大きさから一段階上のキーワードが指定されたことと同意になります。例えば、親要素のフォントサイズが『medium』の場合は『large』が指定されているものと解釈されます。
smaller基準となる大きさから一段階下のキーワードが指定されたことと同意になります。例えば、親要素のフォントサイズが『medium』の場合は『small』が指定されているものと解釈されます。
ブラウザでの表示結果
<p style="font-size: 12px;">ここはp要素です。『font-size: 12px』と指定しています。</p>

<p style="font-size: 1.2rem;">ここはp要素です。『font-size: 1.2rem』と指定しています。</p>

<p style="font-size: large;">ここはp要素です。『font-size: large』と指定しています。</p>

対応ブラウザ
IE6 IE7 IE8 IE9 IE10 IE11 Safari Chrome Firefox Opera

iPhone Safari Android2系 標準ブラウザ Android4系 標準ブラウザ

概要

文字の大きさを指定できます。

最近のウェブ業界で主に使用されている単位は『px』です。『pt』はOSやディスプレイによって大きさが変動するため使用しないほうが無難です。

尚、『IE8』以前のIEでは、『font-size』が『px』指定されている文字はブラウザでの拡大縮小を行った場合に大きさが変化しない、『em』で指定した場合は親からの継承が上手く動作しない、といったバグがあります。よって『IE8』以前のブラウザを対応させる場合の『font-size』は『%』で指定するのが無難です。

『em』を使用する場合、基準となる大きさは親要素のフォントサイズになるというところにご注意ください。例えば、div要素に『12px』、その直下のp要素に『2.0em』、その子要素のspan要素に『2.0em』と指定されていた場合のspan要素のフォントサイズは『48px』となります。

div { font-size: 12px;} /* 『font-size』は『12px』 */
div > p { font-size: 2.0em;} /* 親要素のdivが『12px』なので『font-size』は『24px』 */
div > p > span { font-size: 2.0em;} /* 親要素のpが『24px』なので『font-size』は『48px』 */

『rem』という単位を使用するとhtml要素(root要素)のフォントサイズを基準とした相対的な数値で指定できます。『em』と違い、親要素のフォントサイズの影響を受けず、基準となるフォントサイズが常に一定であるため非常に使い勝手が良いです。ただし『CSS 3』から実装された単位ですので古いブラウザでは動きません、ご注意ください。

html { font-size: 16px;}
div { font-size: 2.0rem;} /* html要素が『16px』なので『font-size』は『32px』 */
div > p { font-size: 2.0rem;} /* html要素が『16px』なので『font-size』は『32px』です。親のdiv要素の影響は受けません。 */

『キーワード』で指定することもできますが、ブラウザによって表示される大きさが違う場合があることや細かい調整ができないといった理由からあまり使用されません。

今現在のウェブ業界で、基本となる文字の大きさは『15px』から『18px』の間に設定されていることが多いです。

尚、ほぼ全てのブラウザで『最小のフォントサイズ』が設定されており、その大きさ以下のフォントサイズを指定した場合は『最小のフォントサイズ』が指定されているものと解釈されます。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。