font-size

font-size は、フォントの大きさを指定する時に使用する属性です。

名前:font-size
値: <absolute-size> | <relative-size> | <length> | <percentage>
初期値:medium（中間値）
適用対象:全ての要素
継承:する
パーセンテージ:親要素のフォントサイズに相対的
メディア:visual（視覚的）
計算値:absolute length（絶対的な長さ）
アニメーション:length（長さ）

Value（値）

<length>
数値＋単位で指定
<percentage>
数値＋％で指定（親要素の文字サイズに対する割合）
xx-large
mediumより３段階大きい（キーワード指定では最大）
x-large
mediumより２段階大きい
large
mediumより１段階大きい
medium
初期値 標準の大きさ
small
mediumより１段階小さい
x-small
mediumより２段階小さい
xx-small
mediumより３段階小さい（キーワード指定では最小）
larger
1段階大きいサイズ（親要素の文字サイズに対して）
smaller
1段階小さいサイズ（親要素の文字サイズに対して）
inherit
親要素の値を継承します。

HTML source

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
   p.test1 { font-size: 30pt; }
   p.test2 { font-size: 150%; }
   p.test3 { font-size: xx-large; }
   p.test4 { font-size: medium; }
   p.test5 { font-size: xx-small; }
  </style>
 </head>
 <body>
   <p class="test1">30pt</p>
   <p class="test2">150%</p>
   <p class="test3">xx-large</p>
   <p class="test4">medium（標準）</p>
   <p class="test5">xx-small</p>
 </body>
</html>

display

30pt

150%

xx-large

medium（標準）

xx-small

※ 「ぱたぱたアニメ館」の全体の文字サイズは、14ptに指定しています。

用語解説

<absolute-size>
絶対サイズ。UA（ブラウザなど）によって設定されているフォントサイズを参照して計算される。値：[ xx-small | x-small | small | medium | large | x-large | xx-large ]
<relative-size>
相対サイズ。UA によって設定されているフォントサイズと親要素のフォントサイズを参照して相対的に計算される。値：[ larger | smaller ]
<length>
長さの値。絶対的なフォントサイズを指定する。負の値は指定しない
<percentage>
パーセンテージ。親要素のフォントサイズを参照して相対的に指定する。
      
＜絶対サイズの倍率、HTML 見出し、HTML フォントサイズ とのマッピング＞
<absolute-size>値xx-smallx-smallsmallmediumlargex-largexx-large  
倍率3/53/48/916/53/22/13/1
HTML 見出しh6h5h4h3h2h1
HTML フォントサイズ1234567
上に戻る