Since: 23rd/May/2002; Last Modified: 25th/May/2002
font-sizeh1 要素の文字の大きさを標準の３倍、 address 要素の文字の大きさを 0.9 倍に指定してます：
body { background: url("./rindou5.gif") navy;
color: #ccf }
h1 { font-style: italic;
font-weight: normal;
font-size: 3em }
p { background : #ccf;
color: navy;
font-weight: bold }
address { font-style: normal;
font-variant: small-caps;
font-weight: bold;
font-size: 0.9em }
ango.css を上のように編集／保存して、 yonagahime.html をブラウザで開くと、h1 要素が標準の大きさよりも３倍、 address 要素が０．９倍に表現されていることが確認できます。
ブラウザの設定で標準の文字の大きさを変化させれば、それに応じて h1 要素の文字の大きさはその３倍、address 要素は０．９倍に変更されることが確認できます。
| キーワード | xx-small, x-small, small, medium, large, x-large, xx-large |
larger/smaller | そこで指定されているものより大きく／より小さく |
| <length> |
相対単位
|
% 単位 | 親要素のフォントの大きさに対する比率 |
inherit | 親要素の指定を継承 |
ブラウザには、標準の文字の大きさを変える機能が付いています。視力や習慣によって、見やすい文字の大きさは異なります。絶対単位で指定すると、ブラウザで文字の大きさを変更させても、絶対単位指定された文字の大きさは変化しないので、文書製作者の意図どおりに表示される、緻密なデザインが実現しやすいなどのメリットがある一方、閲覧者が文字を大きくしたくてもできないなどの弊害も発生します。
親要素の文字の大きさを単位とする、 em や % 単位で指定し、 body 要素には font-size を指定しないように勧めます。但し、相対単位と絶対単位の何れが望ましいかは、文書の目的ごとに異なりますので、良く考える事が必要です。
相対単位を理解するために、次の例を考えて見ます。
<body> <h1><strong>坂口安吾</strong>を考える</h1> <p>坂口安吾を<strong>落伍者</strong>、<strong>淪落</strong>というキーワードで 考えてみよう。</p> </body>
この HTML の断片は、body > h1 > strong と body > p > strong という階層になっています。body 要素の中に h1 要素と p 要素が入っており、h1 要素のなかに strong 要素が入っており、p 要素の中に strong 要素が入っています。
body | +--h1 | | | +--文字列 | +--strong | +--文字列 +--p | +--文字列 +--strong +--文字列 +--strong +--文字列
この HTML に次の CSS を適用した場合を考えます。
body { font-size: 12pt } /* 絶対単位の一つ */
h1 { font-size: 200% } /* 2em と同じ */
strong { font-size: 1.3em } /* 130% と同じ */
body 要素に対して 12pt が指定されています。その子要素である h1 要素には 200% が指定されており、これは親要素の２倍を意味しますから、h1 要素の文字の大きさは 12*2 = 24pt になります。その子要素の strong 要素には 1.3em が指定されており、 h1 要素の子要素である strong 要素の文字の大きさは 24*1.3 = 31pt になります。
p 要素には文字の大きさが指定されていないので、親要素の値がそのまま使われて 12pt になります。その子要素の strong 要素の文字の大きさは 12*1.3 = 16pt になります。
つまり、 body 要素の font-size を絶対単位で指定すれば、全ての要素の文字の大きさが固定値になります。これが良い事か、悪い事かは文書の内容によります。デザイン自体が意味のある文書の場合は良い事でしょう。内容を幅広く読んでもらうことを想定するならば悪い事でしょう。