16.4.12 補足(1) 長さの指定方法

スタイルを指定する際,長さの指定をすることがよくあります.例えば font-size プロパティや text-indent プロパティ,他にもborder,paddingに関係するプロパティでは長さを指定しなければいけません.その長さの指定には,相対指定と絶対指定があります.

相対指定

CSSでは,基準となる長さとして次の3つが定められています.

em
標準のフォントサイズ
ex
"x"の文字の高さ(x-height)
px
1ピクセルのサイズ

これらの前に倍率となる数字を書いて,長さを指定することができます.たとえば

p{ text-indent:1.2em; }

とすると,p要素のtext-indentとしてフォントサイズの1.2倍が設定されたことになります.

絶対指定

長さを絶対的な数字で直接指定する方法です.CSSではin(インチ),cm(センチメートル),mm(ミリメートル),pt(ポイント),pc(パイカ)の5つの単位が用意されています.1ptは1/72インチで,1pcは12ptの意味です.たとえば

body{ font-size:1.5cm; }

と書くと,font-sizeの値が1.5cmになります.といってもディスプレイに映る画面は小さなピクセルから構成されているので,厳密に言うと1ピクセル単位の長さ調整しかすることができません.絶対指定をした時は,ピクセル単位で表したときに最も近い値で表示されるということになります.

しかし安易に絶対指定を行うと,環境によってレイアウトが崩れる恐れがあります.例えば教育用計算機システムのiMac端末では5cmという長さは普通に思えるかもしれません.ですが長さ5cmのものを大きな40インチディスプレイで見たら,きっと小さすぎると思うでしょう.このようにウェブブラウザの表示環境が変わると,絶対指定が不適切になることがあります.ですから,なるべく相対指定をすることをお勧めします.