CSSで使用される単位と値

CSSの単位と値

CSSの宣言は、全てプロパティと値の組を含みます。

プロパティによって、その値は単純な整数やキーワードから、一連のキーワード、単位付きの値、単位なしの値などを含みます。

テキストのデータ型

• <custom-ident> ユーザー定義のキーワード
• <ident> プロパティごとの定義済みキーワードやCSS全体での定義済みキーワード
• <string> 一般的なテキストデータ
• <url> 参照するファイルのURLなど

CSSの値がテキストの場合、基本は通常のテキストを表す <string> か、CSS識別子を表す <ident> のどちらかになります。

<string> の場合は、”（単一引用符・シングルクオート）か、””（二重引用符・ダブルクオート）のどちらかで囲みます。

逆に、<ident> や <custom-ident> の場合は、引用符で囲んではいけません。

img {
  float: left;  /* 値は<ident>型*/
}
img::after{
  content: 'This is my content.';  /* 値は<string>型 */
}

CSS仕様では、キーフレームアニメーション、フォントファミリ名、グリッド領域など、Web開発者が定義できる値は、<custom-ident> 、 <string> 、またはその両方としてリストされています。

特殊な例として、<url> があり、プロパティ値としてURLを表すような場合に使用されます。

<url> の場合は、関数表記を使って <string> のURLを受け入れます。

p {
  background-image: url('./images/background.png');  /* 相対URLを使用*/
  background-image: url('https//www.exammple.com/images/background.png'); /* 絶対URLを使用*/
}

数値データ型

• <integer> 整数値
• <number> 実数値（整数値、小数値）
• <dimension> 距離などを表す数値全般で、<number> 型と単位を表すキーワードの組み合わせ
  • <length> 距離を表す数値
  • <angle> 角度を表す数値
  • <time> 時間の長さを表す数値
  • <frequency> 周波数を表す数値（ただし、これが使用されているCSSプロパティは今のところ無い）
  • <resolution> 解像度を表す数値
• <percentage>

一部のプロパティは、<length> または <percentage> など、2つのタイプのいずれかである数値を受け入れます。

距離を表す単位

相対的な値を表す単位

単位名	説明
em	その要素の font-size の計算値を表します。font-size プロパティ自身に使われた場合は、要素に継承されたフォントの大きさを表します。
ex	その要素の font における x-height です。 'x' の文字を持つフォントでは一般的に、フォントにおける小文字の高さに相当します。多くのフォントでは 1ex ≒ 0.5em です。
ch	その要素の font における "0" の幅です。
rem	ルート要素（通常は ）の font-size を表します。ルート要素の font-size で使うと初期値を表します。 多くのブラウザーでは既定値は 16px ですが、ユーザー設定によって変わる可能性があります。
vw	ビューポートの幅の1%を1vwとする値です。
vh	ビューポートの高さの1%を1vhとする値です。
vmin	vw と vh の小さい方です。
vmax	vw と vh の大きい方です。

絶対的な値を表す単位

単位名	説明	換算
cm	センチメートル	1cm = 96px/2.54
mm	ミリメートル	10mm = 1cm
in	インチ	1in = 2.54cm = 96px
pc	パイカ	16pc = 1in
pt	ポイント	72pt = 1in
px	ピクセル	96px = 1in

角度を表す単位

単位名	説明	円一周の値
deg	度数法 (度) で表した角度です。	360deg
grad	グラードで表した角度です。	400grad
rad	弧度法 (ラジアン) で表した角度です。	約6.2832rad *1rad = 180/π
turn	回転数で表した角度です。	1turn

時間を表す単位

単位名	説明	換算
s	秒
ms	ミリ秒	1000ms = 1s

周波数を表す単位

単位名	説明	換算
Hz	ヘルツ（1秒あたりの発生数）
kHz	キロヘルツ	1kHz = 1,000Hz

解像度の単位

単位名	説明	換算
dpi	1インチあたりのドット数	1dpi ≒ 0.39dpcm
dpcm	1cmあたりのドット数	1dpcm ≒ 2.54dpi
dppx, x	1ピクセルあたりのドット数 x は dppx の別名。	1dppx = 96dpi

特殊なデータ型

• <color>  色を表すキーワードやRGB値など
• <image>  二次元の画像を表す
• <position>  要素ボックスからの相対的な位置を示す座標値

値を定義するための関数

• calc()
• min()
• max()
• clamp()
• toggle()
• attr()