CSSで使える単位

投稿日: / 更新日:

px、emなど、スタイルシートでサイズを指定する時に利用できる単位をまとめました。

絶対的なサイズ

他の要素に影響されることのない絶対的な長さを持つ単位です。厳密には絶対的というのは1つの出力環境内においての話であり、ディスプレイの解像度(画面に表示できる画素数)が違えば、同じ1pxでも長さが変わってきます。下記の項目をクリックするとデモを確認できます。全て、大体200pxになるように調整しています。

項目説明
px画素。色情報を持つ最小単位。ディスプレイの1px分の長さ。
cmセンチメートル。1cm = 96px / 2.54。
mmミリメートル。1mm = 1cm / 10。
inインチ。1in = 2.54cm = 96px。
pcパイカ。1pc = 1in / 6。
ptポイント。1pt = 1in / 72。
qクオーターミリメートル。1q = 1mm / 4。w3cの仕様書に記載があったが、2016年2月現在、指定しても動作しない。

相対的なサイズ

他の要素に影響される、相対的な長さを持った単位です。

項目説明
emfont size of the element。その要素のフォントサイズが1単位となる。例えば、フォントサイズが50pxの要素において、1emは50px相当となる。個々の要素のフォントサイズの設定によってサイズが変わるemよりも、後述のremを使用した方がデザインしやすいかもしれない。
remfont size of the root element。ルートエレメントを対象にしたemなので、rを付けてrem。html要素に指定したフォントサイズが1単位となる。
exx-height of the element’s font。その要素における、小文字のxの高さが1単位となる。xの高さがフォントサイズのどれくらいを占めるかは、当然、使用するフォントによって違う。例では、フォントサイズ50pxに対して、8exは218pxとなった。
chwidth of the "0" (ZERO, U+0030) glyph in the element’s font。その要素における、小文字の0の横幅が1単位となる。exと同様に、使用するフォントによって長さが変わってくる。

ビューポートを基準にしたサイズ

ビューポートを基準としたサイズの単位です。ビューポートとは表示領域のことで、デスクトップの場合はブラウザのウィンドウ、スマホの場合は画面幅のサイズと考えて問題ないと思います。

項目説明
vw1% of viewport’s width。横幅のビューポートの1%分が1単位となる。
vh1% viewport’s height。高さのビューポートの1%分が1単位となる。
vmin1% of viewport’s smaller dimension。横幅と高さのビューポートの内、より小さい方の幅の1%分が、1単位となる。
vmax1% of viewport’s larger dimension。横幅と高さのビューポートの内、より大きい方の幅の1%分が、1単位となる。