CSS 値と単位

CSS 宣言はすべて、プロパティと値のペアから成っています。値には、単一のキーワード、整数、関数、異なる型の組み合わせなど、プロパティに応じてさまざまなデータ型を含めることがあります。また、値には単位を持つものもあれば、持たないものもあります。すべてのプロパティは、CSS 全体で有効な値も受け入れます。CSS 値と単位モジュールでは、CSS プロパティが受け入れる値と単位というデータの型を定義しています。このモジュールでは、CSS プロパティと関数に対して有効な値の設定するには、CSS 値定義構文、つまり形式文法を定義します。

リファレンス

プロパティ

interpolate-size

関数

それ以外にも、 calc-mix(), crossorigin(), first-valid(), if(), integrity(), progress(), random(), random-item(), referrerpolicy(), sibling-count(), sibling-index(), src(), type(), toggle() などの巻子が仕様書では定義されていますが、まだブラウザーでは実装されていません。

データ型

<angle-percentage>
<angle>
<animation-timeline>
<attr-name>
<attr-type>
<attr-unit>
<calc-keyword> (e, pi, infinity, NaN)
<calc-size-basis>
<calc-sum>
<custom-ident>
<dashed-ident>
<dimension>
<easing-function>
<first-valid()>
<frequency>
<frequency-percentage>
<ident>
<integer>
<length-percentage>
<length>
<number>
<percentage>
<position>
<ratio>
<resolution>
<rounding-strategy> (down, up, to-zero)
<string>
<syntax>
<time-percentage>
<time>
<url>
<url-modifier>
<view-timeline-name>

単位

フレックス単位 (fr) およびコンテナー単位 (cqb,cqh,cqi,cqmax,cqmin,cqw)が、それぞれ CSS グリッドレイアウトおよび CSS 条件付きルールモジュールで定義されています。

単位の分類

絶対的な長さの単位 (cm, in, mm, pc, pt, px, Q)
角度の単位 (deg, grad, rad, turn)
既定ビューポート単位 (vb , vh, vi , vmax, vmin, vw)
動的ビューポート単位 (dvb, dvh, dvi, dvmax, dvmin, dvw)
周期の単位 (Hz, kHz)
大ビューポート単位 (lvb, lvh, lvi, lvmax, lvmin, lvw)
ローカルフォント相対長 (cap, ch ,em, ex, ic, lh)
物理的な単位 (cm, in, mm, pc, pt, Q)
相対的な長さの単位 (cap, ch, em, ex, ic, lh, rem, rlh, vb, vh, vi, vmax, vmin, vw)
解像度の単位 (dpcm, dpi , dppx, x)
ルートフォント相対長 (rcap ,rch, rem, rex, ric, rlh)
小ビューポート単位 (svb, svh, svi, svmax, svmin, svw)
時間の単位 (ms, s)
ビューポート単位 (dvh, dvw, lvh, lvw, svh, svw, vb , vh, vi , vmax, vmin, vw)
視覚角度単位 (px)

主要概念

ガイド

CSS データ型: CSS プロパティおよび関数によって受け入れられる典型的な値を定義する CSS データ型についての紹介です。
数値データ型: 数値データ型の概要で、整数、数値、パーセント値、寸法、相対寸法および絶対寸法、角度、時刻などの単位など。
テキストデータ型: テキストデータ型（定義済みのキーワード値、グローバル CSS キーワード値、 URL など）の概要。
CSS 値関数: CSS プロパティの CSS 値を返すために、特別なデータ処理や計算を呼び出す CSS 文の概要。
CSS 数学関数の使用: プロパティ値を数式で書くことができる CSS の数学関数。
値定義構文: CSS プロパティおよび関数の有効な値の設定するには、使用されている形式文法。
学習: 値と単位: 最も頻繁に使用される値の型を見ていき、それらが何なのか、また、これがどのように動作するのかを見ていきます。

仕様書

Specification
CSS Values and Units Module Level 3
CSS Values and Units Module Level 4
CSS Values and Units Module Level 5