CSS辞典単位付きの数字

CSSのプロパティで指定できるフォントサイズや幅、高さ、回転角度、時間などの指定できる単位について掲載

CSS3／2.1

長さや大きさの単位

利用できる単位には、基準になる対象を持つ「相対単位」と指定した値で大きさが決まる「絶対単位」があります。多くのブラウザーの標準フォントサイズは、16pxに指定されている

相対単位として以下の単位が指定できます。

px	1ピクセルに対応した単位です。CSSの仕様では絶対単位に分類されていますが、ユーザーのディスプレイ解像度によって、指定した値で表示されるサイズは変化します。
em	要素のフォントサイズに対応した単位です。親要素のフォントサイズが16pxであれば1emは16pxと同じサイズになります。
ex	要素のフォントの小文字のエックス（x）の高さに対応した単位です。
rem	ルート要素（html要素）のフォントサイズに対応した単位です。多くのブラウザーでは標準のフォントサイズが16pxのため、1remは16pxと同じサイズになります。
ch	要素のフォントのゼロ（0）の文字幅に対応した単位です。
vw	ビューポートの幅の1%に対応した単位です。
vh	ビューポートの高さの1%に対応した単位です。
vmin	ビューポートの短辺の長さの1%に対応した単位です。
vmax	ビューポートの長辺の長さの1%に対応した単位です。

絶対単位として以下の単位が指定できます。

グラデーション関数やトランスフォーム系のプロパティなどで指定できる角度の単位

deg	度数法。0～360までの数値にdegを付けて角度を表します。90degが右向きになります。
grad	グラード法。0～400までの数値にgradを付けて角度を表します。100gradが右向きになります。
rad	ラジアン数です。正円1周分を2πとした数値で角度を指定します。
turn	正円1周分を1ターンとした数値にturnを付けて角度を表します。0.25turnが右向きになります。

トランジション系プロパティやアニメーション系プロパティで指定できる時間の単位は以下の通りです。なお、時間を指定するプロパティには上限が設けられており、指定した時間が上限を超えている場合は無効になります。

s	1秒に対応した単位
ms	1/1000秒に対応した単位

カテゴリー:CSS辞典WEB