CSS2では様々な単位を使って「長さ」を指定できるようになっています。
長さ(length)の値にはゼロの場合を除き、 常に単位を付けなくてはいけません。 その単位について少し解説をします。
長さの単位は絶対単位と相対単位の2種類に分類することができます。
絶対単位は見てわかるように実際の物理的な長さが単位となります。
相対単位に分類されているピクセルはディスプレイでの表示を前提に考えると絶対単位のように思えるかもしれませんが、 これはれっきとした相対単位です。 出力機器の画素の大きさに左右されるためです。
上記の定義のように、絶対単位は出力機器で出力した際の物理長を指定するものですが、 実際にこの通りにはならないことが多いのです。 例えばディスプレイです。
ディスプレイは解像度を変えることによって、1024 x 768とか、1280 x 1024、800 x 600といった複数のピクセルサイズを持ちます。 また、同じ1024 x 768でも15インチのディスプレイと、17インチのディスプレイに表示した時ではピクセルのサイズが変わります。
ではどのようにしてブラウザは表示された物理長が指定値になるようにしているのでしょうか。
物理長をピクセルに変換するために設定値としてdpiというものがあります。 Mozillaの場合はDisplay Resolutionという項目でPreferencesのAppearance -> Fontにあります。 ここでdpiを適切なものに設定することによってブラウザはドットのサイズを知ることができます (Bug-org 69205、Mozillaでは正しく動作しません)。 Windowsでの初期値は96dpiです。これは96ピクセルを1インチとして計算して表示するという意味ですが、 画面上の96ピクセルを定規で計っても1インチにはならないはずです(下にサンプル画像があります)。 実際のディスプレイサイズと解像度との関係は、ほとんどの場合96dpiではないからです。
このように絶対単位はディスプレイで表示する場合、読み手が適切な設定を行っていないと正しい物理長は計算できないため、 絶対単位という名前から受けるイメージとは違い、実際の表示は環境に大きく依存してしまいます。
例えばWindowsでは標準96dpiですが、MacではOSそのものは72dpiのため、 MozillaとMac IE5は例外で96dpiですが他のブラウザでは72dpiです。 また、XFree86(UNIX全般)では適切なdpiが自動設定されます。
こういった背景から、絶対単位を用いるとプラットフォーム間での見た目の統一はまずあり得ません。 また、Windowsを中心にptで文字サイズを決定してしまうとMacではアクセシビリティにも悪影響が出てしまいます。 例えばWindowsで9ptのサイズの文字が小さくて、coolに見えたとします。これをMacで72dpiで表示された場合、 Windowsの更に96分の72、つまり0.75倍で表示されます。 Windowsでは良くてもMacでは小さすぎて読めない文字になってしまいます。気をつけてください。
画像やその他のオブジェクトのような置換要素は通常ピクセル値で大きさを指定します。
これらの置換要素付近に、置換要素を基準とした大きさ指定を行いたい場合、ピクセル値が最も有効です (というよりは、ピクセル値と不変の関係のある単位がありません)。 別の記事に書いていますが、 単位の混在は自分の環境で正常に表示できても、読み手の環境では崩れてしまうことが大いにあり得ます。
フォントサイズとは、フォントの高さ、と考えれば良いでしょう。
フォントサイズを基準に算出されるので、テキストとの親和性が非常に高い単位です。 (例えば読み手によって)基準となるフォントサイズが(作者の環境と)違って、 そのフォントサイズとの比率から実際の値が算出されるので読み手に優しいレイアウトを作ることができます。
実際、テキストの周りに付けるmargin、padding等はこの単位で指定しておくのが一番良いでしょう。 文字の大きさにあわせた余白ができることになりますので、常に作者指定の適切な余白を配置することができます。
exの基準であるx-heightとは、小文字のxを表示する際の高さであることからx-heightと呼ばれているそうです。 考え方は、hやfのように上へ飛び出さず、yやgのように下にも飛び出していない、文字の中心部分の高さを指すもののようです。 ですから、xの無い(例えば数字のみの)フォントであってもx-heightは存在します。
しかし、日本語では使い道の無い単位だと思います。
![[フォント高em,exのサンプル]](screenshot/webtips0027_01.png)
これは人によって意見の変わるところですし、また、これまで説明してきたようにケースバイケースであるとも思います。
私の意見としては、ディスプレイに出力する場合は、em指定で行い読み手に最適な長さを指定するのが良いと思います。 ただし、画像等のオブジェクトの周りでのみ必要に応じてpx値を使うことになるでしょう (実際問題として絶対単位はディスプレイで正常に算出してもらえることは望み薄ですし、 emとpxはディスプレイ上では基準が明確なので逆に直感的ではないかと思います)。
プリンタに出力する場合は(あまり経験がないのですが)、図形や表組みが中心なら日常生活で使い慣れているmmが一番良いように思えます。 ただ、テキスト主体の印刷であればワープロでも使われているptの方が直感的かもしれません。 プリンタの場合は、プリンタごとに固有のdpi値が設定されていますので絶対単位が信頼できますから、 ディスプレイの場合よりも気楽に扱えるかと思います。
結局のところ、どの単位にも一長一短はあるように思います。 CSSを使う上でこれらの単位をどのように使い分けていくのか、 というのも面白いと思いますので、色々と試してみて、より良いものを見つけてみてはどうでしょうか。
Windowsではフォントを特殊なものに変更しなかった場合、様々なサイズでも綺麗に表示されます。 しかし、Macではフォントサイズによってはジャギー(ぎざぎざ)が出てしまい、読みにくくなるようです。 ブラウザは読み手が読みやすいサイズを標準値として設定しておけますので、 できるだけフォントサイズを変更しないようにデザインした方がやはり様々な環境でも快適に読むことができると言えます。