CSSで使える単位の一覧：スタイルシートで扱える単位の解説

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

長さを表す単位

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

相対的な長さを表す単位

相対的な長さを表す単位の使用例

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

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

絶対的な長さを表す単位

絶対的な長さを表す単位の使用例

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

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

割合を表す単位

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

割合の使用例

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

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

角度を表す単位

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

角度の使用例

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

.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>型と呼ばれる値で使用します。これは主にanimationやtransitionのタイムラインを操作する祭に使用します。

時間の使用例

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

.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>型と呼ばれる値で使用します。対応しているブラウザが限定的であるため、活用できるプロパティの登場が待たれます。

解像度を表す単位

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

CSSリファレンス一覧