CSSでの数値と単位

要素の幅や文字のフォントなどの値を指定するには数値と単位を組み合わせて指定します。

まず数値の記述です。数値には正の数や負の数、小数点も記述できます。数値が0の場合は単位を省略可能ですが、0以外の場合には必ず単位とセットで指定する必要があります。また0以下の値を記述する場合は0を省略することもできます。

0.5em
.75em

正の数を表す場合には「+」を、負の数を表す場合には「-」を付けます。省略された場合は正の数となります。

2em
+0.5em
-1em

続いて単位についてです。単位には大きく分けると相対単位と絶対単位の2種類があります。

相対単位：

単位	説明
em	適用する要素のfont-sizeプロパティの値を1とする大きさ。font-sizeプロパティ自身にem単位で値を指定した場合には親要素のfont-sizeプロパティの値がを1とする大きさ。
ex	適用する要素の小文字の「x」の高さを1とする大きさ。
px	1ピクセルを1とする大きさ。実際のサイズはディスプレイの解像度に依存する。
%	基準となる値に対する割合をパーセントで指定する。プロパティ毎に基準となる値は異なる。

絶対単位：

単位	説明
in	インチ(1in = 2.54cm)
cm	センチメートル
mm	ミリメートル
pt	ポイント(1pt = 1/72in = 0.3528mm)
pc	パイカ(1pc = 12pt)

絶対単位を使うか相対単位を使うかについては一般的には相対単位が好ましいと言われています。基準に対する相対的な値で指定しておくことで、さまざまな環境で利用される場合にも調整して表示が行われる事が期待できます。ただ場合に応じて使い分けて下さい。

スタイルを指定する時には数値と単位を続けて記述します。

p {
  font-size: 75%;
  margin: 2em;
}

では次のページから比較的よく使用される「em」「pt」「%」についてもう少し細かく確認していきます。

WebWord