目次
CSSの単位について
- CSSの単位を記述する際は、数値との間に空白を入れず、数値に続けて記入します。
長さの単位
- 長さの単位は、「絶対単位」と「相対単位」の2つがあります。
- 絶対単位とは、普遍的なサイズが厳密に決められているものです。
- 相対単位とは、基準となる値に対して相対的に大きさが決まるものです。
- 相対単位には、「フォントの大きさに関するもの」と「表示領域の幅・高さに関するもの」の2つがあります。
絶対単位
単位 | 説明 |
---|---|
px | ピクセルを表す単位。1ピクセルは1/98インチ。 |
pt | ポイントを表す単位。1ポイントは1/72インチ。 |
pc | パイカを表す単位。1パイカは1/6インチ。 |
in | インチを表す単位。1インチは2.54センチメートル。1インチは96ピクセル。 |
cm | センチメートルを表す単位。1センチメートルは10ミリメートル。1センチメートルは96/2.54ピクセル |
mm | ミリメートルを表す単位。1ミリメートルは1/10センチメートル。 |
Q | クウォーターミリメーターを表す単位。1クウォーターミリメートルは1/4ミリメートル。 |
相対単位(フォントの大きさ)
単位 | 説明 |
---|---|
em | 要素のフォントサイズ(font-size)を1とすると単位。 |
rem | html要素のフォントサイズ(font-size)を1とする単位。 |
ex | 要素のフォントの「小文字のx」の高さを1とする単位。多くの場合、1exは大体0.5emになります。 |
cap | 要素のフォントの大文字の高さを1とする単位。 |
ch | 要素のフォントの「0」の幅を1とする単位。 |
ic | 要素のフォントの「水」の幅を1とする単位。 |
lh | 要素の行の高さ(line-height)を1とする単位。 |
rlh | html要素の行の高さ(line-height)を1とする単位。 |
相対単位(表示領域の幅・高さ)
単位 | 説明 |
---|---|
vw | 表示領域の幅の1%を1とする単位。 |
vh | 表示領域の高さの1%を1とする単位。 |
vi | html要素のインラインレベルの幅もしくは高さの1%を1とする単位。横書きであれば高さ、縦書きであれば幅が基準となる。 |
vb | html要素のブロックレベルの幅もしくは高さの1%を1とする単位。横書きであれば高さ、縦書きであれば幅が基準となる。 |
vmin | 表示領域の幅と高さのうち、短い方の1%を1とする単位。 |
vmax | 表示領域の幅と高さのうち、長い方の1%を1とする単位。 |
角度の単位
単位 | 説明 |
---|---|
deg | 度。円の全周は360度。 |
grad | グラード。円の全周は400グラード。 |
rad | ラジアン。円の全周は2πラジアン。 |
turn | 周回数。円の全周は1周回。 |
時間の単位
単位 | 説明 |
---|---|
s | 秒。 |
ms | ミリ秒。 1ミリ秒は1/1000秒。 |
周波数の単位
単位 | 説明 |
---|---|
Hz | ヘルツ。1秒あたりの周波数を表現する。 |
kHz | キロヘルツ。1キロヘルツは1000ヘルツ。 |
解像度の単位
単位 | 説明 |
---|---|
dpi | インチあたりのドット数。 |
dpcm | センチメートルあたりのドット数。 |
dppx | ピクセルあたりのドット数。 |