フォントサイズ (Font size)

 
フォント
ホーム > CSS2 Note > フォントサイズ
C1- ie3- N4-

説明

font-size: size; C1- ie3- N4-
値:  <絶対サイズ> | <相対サイズ> | <長さ> | <%値> | inherit
初期値:medium適用要素:すべて継承:する(算出値)%値:親要素のフォントサイズを参照メディア:ビジュアル
このプロパティは、フォントサイズを指定します。

子供要素は算出値を継承します。

表示モードによるフォントサイズの違い
Doctypeスイッチ
 

使用例

p {font-size:12pt}
 

フォントサイズ <'font-size'>

絶対サイズ <absolute-size>

[ xx-small | x-small | small | medium | large | x-large | xx-large ]
C1- ie3- N4- 「medium」を標準サイズとした、7段階に分かれたキーワードで指定します。1段階大きくなるごとに1.2倍のフォントサイズになることが推奨されています。

相対サイズ <relative-size>

largerC1- ie4- N4- 親要素のフォントサイズに対して1段階大きい文字を指定します。
smallerC1- ie4- N4- 親要素のフォントサイズに対して1段階小さい文字を指定します。

長さ、%値

長さ C1- ie3- N4- フォントサイズを指定します。負の値は不正な値です。
%値 C1- ie3- N4- 親要素のフォントサイズに対するパーセント値で指定します。
 

フォントサイズのレンダリング

<style type="text/css"><!--
span {font-family:Arial,sans-serif;}

.eg1 {font-size:xx-small;}
.eg2 {font-size:x-small;}
.eg3 {font-size:small;}
.eg4 {font-size:medium;}
.eg5 {font-size:large;}
.eg6 {font-size:x-large;}
.eg7 {font-size:xx-large;}

.eg8 {font-size:larger;}
.eg9 {font-size:smaller;}

.eg10 {font-size:2em;}
.eg11 {font-size:2ex;}
.eg12 {font-size:20px;}
.eg13 {font-size:0.2in;}   /* 1in=2.54cm */
.eg14 {font-size:0.8cm;}
.eg15 {font-size:8mm;}
.eg16 {font-size:12pt;}   /* 1pt=1/72in */
.eg17 {font-size:1pc;}   /* 1pc=12pt */

.eg18 {font-size:100%;}
.eg19 {font-size:120%;}
.eg20 {font-size:200%;}
--></style>

<span class="eg1">font-size:xx-small;</span>&nbsp;&nbsp;&nbsp;
<span class="eg2">font-size:x-small;</span>&nbsp;&nbsp;&nbsp;
<span class="eg3">font-size:small;</span>&nbsp;&nbsp;&nbsp;
<span class="eg4">font-size:medium;</span>&nbsp;&nbsp;&nbsp;
<span class="eg5">font-size:large;</span>&nbsp;&nbsp;&nbsp;
<span class="eg6">font-size:x-large;</span>&nbsp;&nbsp;&nbsp;
<span class="eg7">font-size:xx-large;</span>&nbsp;&nbsp;&nbsp;<br>
<br>
<span class="eg8">font-size:larger;</span>&nbsp;&nbsp;&nbsp;
<span class="eg9">font-size:smaller;</span>&nbsp;&nbsp;&nbsp;<br>
<br>
<span class="eg10">font-size:2em;</span>&nbsp;&nbsp;&nbsp;
<span class="eg11">font-size:2ex;</span>&nbsp;&nbsp;&nbsp;
<span class="eg12">font-size:20px;</span>&nbsp;&nbsp;&nbsp;
<span class="eg13">font-size:0.2in;</span>&nbsp;&nbsp;&nbsp;
<span class="eg14">font-size:0.8cm;</span>&nbsp;&nbsp;&nbsp;
<span class="eg15">font-size:8mm;</span>&nbsp;&nbsp;&nbsp;
<span class="eg16">font-size:12pt;</span>&nbsp;&nbsp;&nbsp;
<span class="eg17">font-size:1pc;</span>&nbsp;&nbsp;&nbsp;<br>
<br>
<span class="eg18">font-size:100%;</span>&nbsp;&nbsp;&nbsp;
<span class="eg19">font-size:120%;</span>&nbsp;&nbsp;&nbsp;
<span class="eg20">font-size:200%;</span>&nbsp;&nbsp;&nbsp;
 
トップページ CSS2 Note ページトップ
 2005/09/22発行 2009/09/01更新