◆ font-size で指定する medium などは 今のサイズに対する相対値ではなくて 固定の絶対値
◆ 通常サイズの medium はChrome で確認したら 16px

font-size の指定方法

フォントサイズは 14px や 18pt みたいな絶対値や 1.2em や 2ex や 90% のような親要素で指定されたものに対する相対値で指定するのがあります
インチやミリなどの単位の指定方法もあるようですがこれは全然みかけないですね

これら以外に 「small」「medium」「xx-large」 のようなフォントサイズ専用の言葉もあります

xx-small < x-small < small < medium < large < x-large < xx-large

の 7 種類です


これらを指定するとどんな大きさになるのかわかりますか?

medium などのサイズ

medium が通常のサイズ と聞いていたので 今のまま何も設定しなかったときのサイズが medium で 1.2em のように今のサイズから大きくするのが large で 小さくする small などは 0.8em のようなものだと思ってました


ですが
これらのキーワードのフォントサイズは 今の大きさからの相対値ではなく 絶対値でした


それぞれのサイズを用意しました

フォントサイズ:14px 指定
フォントサイズ:xx-small
フォントサイズ:x-small
フォントサイズ:small
フォントサイズ:medium
フォントサイズ:large
フォントサイズ:x-large
フォントサイズ:xx-large

一番上の要素のサイズ指定は ブログのスタイルシートの設定なので 変更されてるかもしれません
一応 computedStyle を表示するようにしてるので変わっても対応されてるはずですけど

Chrome で見た時の画像はこうなります

font-size-01
font-size-02

未指定のところはブログの CSS で外側の要素で 14px と設定されてます
medium よりも小さいですね

次に 親要素に直接 24px と設定しました
一番上のフォントサイズ設定してないのだけが 親要素に合わせて変化しました
それ以外は変わってないので 絶対値指定されてることになります

xx-small と x-small が Chrome で見ると一緒ですが 10px 以下のフォントを表示できないので 10px 以下の値のこの 2 つは両方とも computedStyle で 10px と表示されていました

Chrome で調べた computedStyle はこのようになっていました
xx-small10
x-small10
small13
medium16
large18
x-large24
xx-large32

x-large で大きくサイズが変わります
ライブドアブログのツールだとこの 7 択でフォントサイズを選ぶのでちょうどいいサイズにできないところが不便なんですよね
それぞれの キーワードのサイズを自分で上書き設定できるといいのに