文書には,そのなかでの役割や重要性に従っていろいろな大きさの文字が使われている。次は,CSS を使って文字の大きさを変えてみよう。
文字の大きさ(フォントサイズ)を指定するのは font-size 属性である。
font-size: (フォントサイズ);
フォントの大きさを直接指定してみよう。
活字などの大きさを表すのにポイントという単位が使われる。1 ポイントは 1/72 インチ,つまり 72 ポイントが 1 インチである(1[インチ]=2.54[センチメートル])。CSS で長さの単位としてポイントを使う場合は,数値に続けて単位記号 pt を書けばよい。
たとえば,見出し <H1> のフォントサイズを 20 ポイント,28 ポイントにしてみよう。
<H1 STYLE="font-size: 20pt;">20ポイントの見出しです。</H1>
<H1 STYLE="font-size: 28pt;">28ポイントの見出しです。</H1>
ここで表示されたフォントの大きさを測っても 20 あるいは 28 ポイントにはなっていないかもしれない。というのは,フォントの大きさは環境,とくにモニタのサイズや解像度で異なってくるのである。フォントの大きさを指定してそれが表示されるときには,環境に応じてある割合で拡大あるいは縮小されるということを知っておこう。
また,“ポイント”などの長さの単位で直接指定されたフォントサイズは,ふつうブラウザ側の指定に関わりなく大きさが決定される。
フォントサイズは大きければ目立つというものではない。すべての文字の大きさが大きければそれ以上大きな文字でなければ目立っていることにはならないのである。
font-size 属性には,先ほどのようにポイントのように長さを指定するほかにもいくつか値の指定方法がある。ここではとくに絶対サイズと相対サイズを紹介しておこう。
絶対サイズは 7 つのキーワードで指定する。これらは小さい方から順に,
xx-small,x-small,small,medium,large,x-large,xx-large
となっている。font-size 属性は,特になにも指定がない場合,medium をその値とするように決められている(既定値)。
この絶対サイズはブラウザの設定によって変わる。これらの 7 つのキーワードに対応する実際のフォントサイズは,システム環境や設定などからブラウザによってあらかじめ計算されている。ブラウザの設定によって大きさが変わる点がポイントなどで直接指定した場合と異なっている。
例をあげておこう。
<P><EM STYLE="font-size: x-small;">強調なのに文字が小さい</EM>のはおかしいので<EM STYLE="font-size: large;">大きく,</EM><EM STYLE="font-size: x-large;">さらに大きく</EM>してみました。</P>
強調なのに文字が小さいのはおかしいので大きく,さらに大きくしてみました。
フォントサイズに関してブラウザの設定を変えてみて,ポイント指定したものとどのようにふるまいが異なっているか見てみよう。
この場合は,“いままでのフォントサイズ”に比べて“ひとまわり大きく”“ひとまわり小さく”を指定する。キーワードはそれぞれ larger,smaller である。
ここで“ひとまわり”というのは,絶対サイズの 7 つのサイズの間の関係である。たとえば,現在 largeならば,
それぞれ設定される。もし,“現在のフォントサイズ”が 7 つのサイズのいずれにも当てはまらない場合(ポイント指定した場合などに起こりうる),ブラウザは適当に処理をするが,その対処法がすべてのブラウザで同じであるとは限らない。
<P>通常のフォントサイズです。</P>
<P STYLE="font-size: larger;">この段落では文字はひとまわり大きくなっています。<EM STYLE="font-size: larger;">強調部分はさらに大きくします</EM>。</P>
通常のフォントサイズです。
この段落では文字はひとまわり大きくなっています。強調部分はさらに大きくします。