CSS単位Explained

38 of 38 rows

単位↕	相対基準↕	使用場面↕	例↕
絶対
⤢px	1/96インチ（CSS参照ピクセル）。	固定のUIサイズ指定：ボーダー、ヘアライン、アイコンの寸法。	border: 1px solid #000;
⤢pt	1/72インチ（1pt = 1.333px）。	サイズが実際の紙に対応する印刷用スタイルシート。	font-size: 12pt;
⤢cm	1センチメートル（≈37.8px）。	実世界の寸法が必要な印刷レイアウト。	margin: 2cm;
⤢mm	1ミリメートル（≈3.78px）。	細かい印刷の寸法指定。	padding: 5mm;
⤢in	1インチ（96px = 2.54cm）。	インチで指定する印刷レイアウト。	margin: 1in;
フォント相対
⤢em	要素自身のフォントサイズ（親から継承）。	周囲のテキストと一緒にスケールするスペーシング。	padding: 1em;
⤢rem	ルート要素のフォントサイズ（html要素）。	フォントサイズ：ユーザーのルートフォントサイズ設定を尊重します。	font-size: 1.25rem;
⤢ch	現在のフォントの '0' グリフの送り幅。	読みやすい行の長さ（1行の文字数）を設定。	max-width: 70ch;
⤢ex	現在のフォントのxハイト（小文字 'x' の高さ）。	書体に連動する垂直メトリクス。	line-height: 2ex;
⤢cap	現在のフォントのキャップハイト（大文字の高さ）。	大文字に合わせた、exよりもタイトな垂直メトリクス。	padding-top: 0.5cap;
⤢ic	現在のフォントの「水」という表意文字の送り幅。	CJK文字1文字分のセルに追従するサイズ指定。	width: 4ic;
⤢lh	要素自身の計算済みline-height。	要素をテキストの整数行でサイズ指定。	height: 3lh;
⤢rlh	ルート要素のline-height。	文書の基本行高の倍数でのスペーシング。	margin-block: 2rlh;
ビューポート相対
⤢%	親要素の同じプロパティの値。	包含要素に合わせた流体レイアウト。	width: 50%;
⤢vw	ビューポート幅の1%。	画面幅に合わせたフルブリードのセクション。	width: 100vw;
⤢vh	ビューポート高さの1%。	画面高さいっぱいのヒーローセクションやオーバーレイ。	height: 100vh;
⤢vmin	ビューポートの小さい方の寸法の1%。	どの向きでも画面に収まる要素サイズ。	font-size: 5vmin;
⤢vmax	ビューポートの大きい方の寸法の1%。	ビューポートの支配的な軸を埋める。	font-size: 5vmax;
⤢svh	small viewport高さの1%（ブラウザUIがすべて表示された状態）。	展開したブラウザクロームの上に収まる、モバイルの全高セクション。	height: 100svh;
⤢lvh	large viewport高さの1%（ブラウザUIが隠れた状態）。	ブラウザクロームが縮んでも画面を覆い続ける必要がある背景。	height: 100lvh;
⤢dvh	dynamic viewport高さの1%。ブラウザUIの表示・非表示に追従します。	100vhのモバイル向け修正：ブラウザクロームが出現すると高さが変わります。	height: 100dvh;
⤢svw	small viewport幅の1%。	最も狭いビューポート状態に対応するsvhの幅版。	width: 100svw;
⤢lvw	large viewport幅の1%。	最も広いビューポート状態に対応するlvhの幅版。	width: 100lvw;
⤢dvw	dynamic viewport幅の1%。ブラウザUIに追従します。	クロームとともにビューポートが変化するときのdvhの幅版。	width: 100dvw;
⤢vi	インライン軸に沿ったビューポート寸法の1%（横書きでは幅）。	書字方向に追従するビューポートサイズ指定。	width: 50vi;
⤢vb	ブロック軸に沿ったビューポート寸法の1%（横書きでは高さ）。	縦書きモードでも正しく機能するビューポートサイズ指定。	height: 50vb;
流体
⤢clamp()	最小値と最大値で挟まれた推奨値。	最小値と最大値を超えない流体タイポグラフィ。	width: clamp(320px, 80vw, 1100px);
⤢min()	カンマ区切りの引数のうち最小のもの。	最大値を超えないようにサイズを制限。	width: min(100%, 600px);
⤢max()	カンマ区切りの引数のうち最大のもの。	ビューポートとともに伸びる最小サイズを強制。	width: max(50%, 300px);
角度
⤢deg	1回転の1/360。	回転トランスフォームとグラデーションの角度位置。	transform: rotate(45deg);
⤢rad	ラジアン。1rad ≈ 57.2958deg。	数学的に計算された角度。生成されたトランスフォームなど。	transform: rotate(1.5708rad);
⤢grad	グラジアン。400grad = 1回転。	レガシーまたは測量スタイルの角度値。	transform: rotate(100grad);
⤢turn	1turn = 360°の1回転。	ひと目で読み取れる全回転・半回転。	transform: rotate(0.5turn);
時間
⤢s	1秒。	アニメーションとトランジションの継続時間。	transition: opacity 0.3s;
⤢ms	1ミリ秒（1s = 1000ms）。	短いUIフィードバックのアニメーションと遅延。	animation-duration: 150ms;
解像度
⤢dpi	出力の1インチあたりのドット数。	印刷向けの解像度メディアクエリ。	@media (min-resolution: 300dpi)
⤢dppx / x	px単位あたりのドット数。1dppxは標準の96dpiディスプレイに相当。	Retinaおよび高DPIのメディアクエリ。	@media (min-resolution: 2x)
⤢dpcm	1センチメートルあたりのドット数（1dppx ≈ 2.54dpcm）。	メートル法での解像度メディアクエリ。	@media (min-resolution: 118dpcm)