文字サイズをピクセルで指定するということ

CSSで文字サイズなどを指定するとき、ピクセル単位で指定するのは、やめたほうが良いのではないかという問題提起である。

ここで提案するものは、実用性のみに重点を置いたものであり、何よりもコンテンツ勝負なウェブページにのみ当てはまるものであることを、まずは明記しておく。見た目やデザインを重視したい場合は、必ずしも当てはまらない箇所があるだろうから、なるほどこういう考え方もあるのかという程度で考えてもらいたい。

スタイルシート（CSS）や、HTMLなどでフォントサイズの指定をする場合、ピクセル単位で指定するのはやめたほうがという勧めだ。もっとも、それなりにウェブページの仕組みが分かっている人にとっては、HTMLでフォントサイズなど指定しないだろうが。

では、[px]ではなく、どのような単位を使うべきだと私が主張するのかと言うと、[%]や、[em]などである。この二つがあれば、大抵どんな状況でも乗り切れると思う。では、その理由と利点について解説していこう。

答えは簡単だ。IEには文字サイズを拡大・縮小できる機能がある。IEだけに限らず、拡張機能でそのようなものを持ったブラウザも多いことだろう。ところが、これらの機能は、文字サイズを相対的に大きくするだけであり、ピクセル単位で絶対指定された文字に関しては無力であるのだ。

ユーザ定義スタイルシートをブラウザサイドで食わせる場合も同様だ。そのような仕様にしていれば、bodyに対して[font-size:120%;]と指定するだけで、全体のフォントサイズを大きくすることができる。

以上のことから、[%][em]を使う利点は分かってもらえたと思う。理解しただけでは実用まで至らないため、その仕様について十分理解しておく必要がある。実際に表示結果を見たほうが一目瞭然であり、百聞は一見にしかずと言えるため、例を出してそのレンダリングについて見てみよう。

<div style="font-size:200%;">aaaaa<span style="font-size:100%;">bbbbbbb</span></div>

aaaaabbbbbbb

<div style="font-size:200%;">aaaaa<span style="font-size:150%;">bbbbbbb</span></div>

aaaaabbbbbbb

<div style="font-size:200%;">aaaaa<span style="font-size:1em;">bbbbbbb</span></div>

aaaaabbbbbbb

<div style="font-size:200%;">aaaaa<span style="font-size:1.5em;">bbbbbbb</span></div>

aaaaabbbbbbb

見て分かるとおり、サイズが子タグに継承された上で指定できているのが分かる。emは継承しているサイズを1として指定する値であり、%は継承しているサイズを100として指定する値であることが読み取れる。

<div style="font-size:200%;">aaaaa<br>
bbbbb<br>
ccccc
<div style="line-height:2em;">ddddd<br>
eeeee<br>
fffff</div></div>

aaaaa
bbbbb
ccccc

ddddd
eeeee
fffff

jikkenjo.net