CSS 単位

 

2019年08月29日

 

 

目次

  1. CSSの単位について
  2. 長さの単位
  3. 角度の単位
  4. 時間の単位
  5. 周波数の単位
  6. 解像度の単位

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 ピクセルあたりのドット数。

 

 

 

 

 

Programming Style