目次
解説
CSS/CSS3で使用できる長さの単位には、様々なものが定義されている。 ここでは、それらの定義、使用目的を示す。更新日：2016年11月12日
CSSで定義されている単位
CSSで使用される長さの単位には、下記のようなものが用意されている。
-
%
- 相対単位で、親エレメントに対する相対サイズ指定。 gradientとかに置いては、gradientを指定した要素の幅や高さを基準とした割合。 widthプロパティやmarginプロパティ、paddingプロパティにおいては、その要素の親要素の幅を基準とした割合となる。
-
em
- 相対単位で、基準は要素のフォントサイズ。 親、祖先のフォントサイズを基準とした単位。（ただし，印刷の分野では文字“M”の幅） 例えば10pxが指定された要素の子要素に、1emを指定すると10px相当の文字サイズになる。もし0.1emにすれば1px相当のサイズとなる。 （注意）Chromeは10px相当以下にはならない。
-
px
- 絶対単位で、ピクセル。 画面解像度に依存し、72dpiの解像度であれば72pxが2.54cmになり、96dpiであれば96pxが2.54cmとなる。 相対的な単位ではあるが、実際は絶対的な単位として使用されている。
-
ex
- 相対単位で、指定されているフォントの x の高さ、もしくは em の半分の大きさを単位とする。 emは、Mの高さを基準としたものだったのに対して、xの高さ（x-height）を1としたもの。 多くのフォントは1ex = 0.5emになってる様子。
-
in
- 絶対単位で、インチ（ピクセル換算で96px）。
-
cm
- 絶対単位で、センチメートル（ピクセル換算で約37.80px）。
-
mm
- 絶対単位で、ミリメートル（ピクセル換算で約3.78px）。
-
pt
- 絶対単位で、ポイント（1/72インチ相当）。
-
pc
- 絶対単位で、パイカ（12ポイント相当）。
CSS3で追加定義されている単位
CSS3で使用される長さの単位には、下記のようなものが用意されている。
-
ch
- 相対単位で、現在のフォントの「0」の幅。 基本的には等幅フォントが対象で、要素に「width: 40ch」と指定すれば40文字入る幅が設定され、通常のフォントだけでなく点字のレイアウトにも便利。 Chromeが未サポート。FirefoxとIE9は対応している。
-
rem
- 相対単位で、基準はルート要素のフォントサイズ。 ルート要素（たとえばhtml）のフォントサイズを基準とした単位。 remは親要素のフォントサイズが変化しても、ルート要素のフォントサイズが変わらなければ変化しない。
-
vw
- 相対単位で、ビューポートの幅に対する割合。
-
vh
- 相対単位で、ビューポートの高さに対する割合。
-
vmin
- 相対単位で、ビューポートの幅と高さのうち、値が小さい方に対する割合。
-
vmax
- 相対単位で、ビューポートの幅と高さのうち、値が大きい方に対する割合。
-
q
- 絶対単位で、1/4ミリメートル。