CSSで使える単位

CSSでは、単位付きの様々な数値を扱うことができます。これらの値を使用する場合、HTMLで省略していた単位もしっかり記述しなければなりません。ただし、0を指定する場合に限り省略することが可能です。

長さを表す単位

長さを表す単位は、<length>型と呼ばれる値で使用します。これにはフォントサイズやビューポートに対する相対的な単位と、メートル法やピクセルなどの絶対的な単位があります。

相対的な単位

単位 説明
em 要素のフォントサイズを基準とする単位です。
rem ルート要素(html等)のフォントサイズを基準とする単位です。
cap 要素に指定されたフォントのCap height(名目上の大文字の高さ)を基準とする単位です。
ch 要素に指定されたフォントの0(ZERO, U+0030)の送り幅を1chとみなす単位です。
ex 要素に指定されたフォントのx-heightを基準とする単位です。
ic 要素に指定されたフォントの(CJK water ideograph, U+6C34)の送り幅を1icとみなす単位です。
lh 要素の行の高さを基準にした単位です。行の高さはline-heightで指定された寸法です。
rlh ルート要素の行の高さを基準にした単位です。行の高さはline-heightで指定された寸法です。
vw ビューポートの幅に対する割合を示す単位です。1vw1%に相当します。
vh ビューポートの高さに対する割合を示す単位です。1vh1%に相当します。
vb ルート要素のブロック軸方向におけるビューポートの割合を示す単位です。1vb1%に相当します。
vi ルート要素のインライン軸方向におけるビューポートの割合を示す単位です。1vi1%に相当します。
vmax ビューポートのブロック軸とインライン軸を比較した時に大きい方の割合を示す単位です。1vmax1%に相当します。
vmin ビューポートのブロック軸とインライン軸を比較した時に小さい方の割合を示す単位です。1vmin1%に相当します。

相対的な単位の使用例

相対的な単位は、フォントサイズやビューポートなどを基準に制御するプロパティに向いています。

CSS
#content {
	font-size: 1em;
}
article {
	width: 80vw;
	margin: 1rem auto 0;
}
article > p {
	margin: 1lh 0 0;
}

絶対的な単位

単位 説明
cm メートル法のセンチメートルを表す単位です。1cm96px/2.54に相当します。
mm メートル法のミリメートルを表す単位です。1mm1/10th of 1cmに相当します。
Q メートル法のクオーターミリメートルを表す単位です。1Q1/40th of 1cmに相当します。
in ヤードポンド法のインチを表す単位です。1in2.54cm = 96pxに相当します。
pc 印刷などに使用されるパイカを表す単位です。1pc1/6th of 1inに相当します。
pt 文字や図形のサイズに使用されるポイントを表す単位です。1pt1/72th of 1inに相当します。
px ディスプレイの画素を意味するピクセルを表す単位です。1px1/96th of 1inに相当します。

絶対的な単位の使用例

絶対的な単位は、ピクセルやセンチメートルなど表示する媒体が決まっていたり、計算式で管理することに向いているプロパティに有効です。

CSS
@media screen {
	body {
		font-size: 16px;
		margin: 10px;
	}
}
@media print {
	body {
		font-size: 10pt;
		margin: 2cm 3cm;
	}
}

割合を表す単位

割合を表す単位は、<percentage>型と呼ばれる値で使用します。これは主に基準となる要素の寸法を100%とした場合に、相対的な大きさを表す祭に使用します。

単位 説明
% パーセンテージを表す単位です。基準に対する割合を示します。

割合の使用例

割合を示す単位は、親要素や画面の大きさを基準とした相対的な寸法を表す祭などに有効です。

CSS
main {
	width: 80%;
}
nav {
	width: 20%;
}

角度を表す単位

角度を表す単位は、<angle>型と呼ばれる値で使用します。これはグラデーションやフィルタなどの関数内で使用したり、アニメーションやトランジションなどの効果を作成する祭に使用します。

単位 説明
deg 角度を表す単位です。英語の"degree"を省略した名称です。360degが円に相当します。
grad 角度を表す単位の一種グラディアンです。18世紀末にフランスで提案された"grade"に由来する名前です。400gradが円に相当します。
rad 角度を表す単位の一種ラジアンです。国際単位系において平面角を表します。2πradが円に相当します。
turn 周を表す単位です。1回転を1つの単位で扱います。1turnが円に相当します。

角度の使用例

角度の単位を使用する場面としては、グラデーションやアニメーションのキーフレームが考えられます。

CSS
.gradient_box {
	background: linear-gradient(45deg, black, blue);
}
.cube_anime {
	transform-style: preserve-3d;
	animation: 30s linear 0s infinite normal none running TurnCube;
}
@keyframes TurnCube {
	0%{ transform: rotateX(0deg) rotateY(0deg);}
	100%{ transform: rotateX(360deg) rotateY(360deg);}
}

時間を表す単位

時間を表す単位は、<time>型と呼ばれる値で使用します。これは主にanimationtransitionのタイムラインを操作する祭に使用します。

単位 説明
s 秒を表す単位です。英語の"seconds"が由来です。1sが1秒に相当します。
ms ミリ秒を表す単位です。英語の"milliseconds"が由来です。1000msが1秒に相当します。

時間の使用例

時間を示す単位は、アニメーションやトランジションなどのタイムラインを扱うプロパティで使用します。

CSS
.anim_box {
	animation-name: as_move;
	animation-timing-function: linear;
	animation-duration: 500ms;
	animation-delay: 0s;
	animation-iteration-count: infinite;
}
.exlink {
	color: #02a;
	transition: color 1s;
}
.exlink:hover {
		color: #a20;
}

周期を表す単位

周期を表す単位は、<frequency>型と呼ばれる値で使用します。対応しているブラウザが限定的であるため、活用できるプロパティの登場が待たれます。

単位 説明
Hz ヘルツを表す単位です。1秒間に1回発生する周波数を表します。
kHz キロヘルツを表す単位です。ヘルツのキロ単位となり、1kHz1000Hzに相当します。

解像度を表す単位

解像度を表す単位は、<resolution>型と呼ばれる値で使用します。モニターやスマートフォンなどの画面に対して、1単位あたりのドットの数を表します。

単位 説明
dpi 1インチあたりのドット数を表す単位です。"dots per inch"の略で、画面の解像度の指標として使われます。
dpcm 1センチあたりのドット数を表す単位です。"dots per cm"の略です。
dppx 1ピクセルあたりのドット数を表す単位です。"dots per px"の略です。画素密度の高いディスプレイで有効です。
x 1ピクセルあたりのドット数を表す単位です。画素密度の高いディスプレイで有効です。

CSSリファレンス一覧