CSS講座

CSSで使用する単位

このページでは、CSSで使用する単位について、説明をしています。

単位一覧

とりあえず、下の表を見てください。

px 画面の1ピクセルの長さを表す単位
em 文字の高さを 1em とした単位
ex 小文字の「x」の高さを 1ex とした単位
in インチ
pt ポイント（1/72 インチ）
pc パイカ（12 ポイント)
cm センチメートル
mm ミリメートル
% 相対的なサイズ指定

以上がCSSで使用することができる単位です。ただし、通常は px em % の３つを使いこなせれば大丈夫でしょう。また、フォントサイズを絶対サイズに固定する場合は、慣習的に pt を使う（と思う）ので、こちらも部分的に使用する場合があるかもしれません。

px（ピクセル）

この単位は・・・説明は必要でしょうか？ディスプレイは、小さな点（ドット）の集合で文字や、画像を表示していることはご存知ですよね。 例えば、10px と言った場合は、画面の点が１０個分の長さのことを指しています。

em と ex（文字サイズを基準）

em と ex のイメージ図

上の図にあるとおり、em は一番下の線から、文字のトップまでの高さを基準としています。つまり、一文字分の高さってこと。

exの場合は、ベースラインから一つ上の線までの高さ（正確には小文字の「x」の高さ）を基準にしています。

まあ、普通はemの方を使うと思います。em、ex の特徴としては・・・フォントサイズによって長さが変化すると言うことでしょうか。

font-size: 100%; が指定された要素と、font-size: 200%; のように指定された要素で em や ex を使った場合の話です。 同じ長さを指定したのにも関わらず、フォントを基準としているので、フォントサイズが２倍になれば、２倍の大きさになったフォントの一文字分と言うことになります（emの場合）。 要するに、フォントの大きさに合わせて伸び縮みする長さを指定する単位だと思ってください。

インチ・ポイント・パイカ・センチ・ミリ

インチ・ポイント・パイカ・センチ・ミリ・・・これらの単位はなんとなく分かるでしょう。特に cm や mm。身近に使っている単位ですよね。 アメリカでは インチ[in] を日常的に使っていますね。ポイントとパイカはインチをもとに作られた単位です。

多分、これらの単位を使用することは滅多に無いはずです。下にサンプルを示します。試しに長さを測ってみてください。

  • in
  • cm

どうでしょうか？１センチになった人も、ならない人もいるかと思います。これは、実際のディスプレイのdpiとOSが定めている標準のdpiが食い違っているために生まれる現象です。

Windowsでは、標準のディスプレイは96dpiとされています。したがって、InternetExplorerなどのブラウザは、これらの単位をディスプレイは96dpiであるとして表示させます。

上の１インチとして表示させた四角のスクリーンショットを取って、ペイントソフトで大きさを調べてみてください。ちゃんと、96px×96pxになっていると思います。

dpi ・・・ Dots Par Inch の略。画面１インチに、何ピクセルのドットが並んでいるか示す単位です。数字が大きいほど、ドット密度が高いことになります。言い方を変えれば、数字が大きいほど、１つ１つのドットのサイズは小さくなります。

% （パーセント）

パーセント・・・これは、基準となる長さ（幅、高さ）や大きさの何パーセントにするか、指定する場合に使用します。

問題は、何を基準とするかです。これは、プロパティによって違います。例えば・・・

プロパティ 基準になるもの
width と height 親要素の幅・高さ
font-size 標準のフォントサイズ
line-height 標準の行の高さ
top や left など 基準となる親要素の幅・高さ

ただ、これらのプロパティ以外でパーセントを使用することは、あまり無いでしょう。

小数点、マイナス、０の場合

ピクセル以外の単位には、小数点以下の数字を指定することができます。（小数点以下、何桁目までが有効かは分かりませんが。）

width: 20.5em;

また、負の値（マイナス値）を指定することもできます。ただし、マイナスの値を指定した場合は、動作が怪しいプロパティがいくつかあるため、あまり使用しない方がいいかもしれません。

margin: -10px 20px 0;

0px、0em、0%・・・などの場合は、単位を省いて、0と記述することができます。

padding: 0px; ⇒ padding: 0;