解説

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ミリメートル。

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.