CSS3

値と単位

<length>

  編集:2022.07.13 by T.A.

距離の単位:<length>型

相対単位
単位意味
em 要素のフォントサイズ
ex 要素のフォントの「x」の高さ
cap 要素のフォントの cap-高さ(大文字の名目上の高さ)
ch 要素のフォントにおける半角グリフの代表的な文字送り幅 ― 文字“0”(U+0030 ZERO)のグリフで表現される。
ic 要素のフォントにおける全角グリフの代表的な文字送り幅 — 文字“水”(CJK 表語文字:U+6C34)のグリフで表現される。
rem 根要素のフォントサイズ
lh 要素の行高さ
rlh 根要素の行高さ
vw 表示域の横幅の 1%
vw ユーザーエージェント既定の表示域サイズの横幅の 1% に等しい
svw 小さい表示域サイズの横幅の 1% に等しい
lvw 大きい表示域サイズの横幅の 1% に等しい
dvw 動的な表示域サイズの横幅の 1% に等しい
vh 表示域の縦幅の 1%
vh ユーザーエージェント既定の表示域サイズの縦幅の 1% に等しい
svh 小さい表示域サイズの縦幅の 1% に等しい
lvh 大きい表示域サイズの縦幅の 1% に等しい
dvh 動的な表示域サイズの縦幅の 1% に等しい
vi 表示域のサイズ ― 根要素の行内軸におけるそれ ― の 1%
vi ユーザーエージェント既定の表示域サイズ
svi 小さい表示域サイズ
lvi 大きい表示域サイズ
dvi 動的な表示域サイズ

これらの ― 当のボックス【これらの単位を利用しているボックス】の行内軸におけるそれ ― の 1% に等しい。

vb 表示域のサイズ ― 根要素のブロック軸におけるそれ ― の 1%

初期包含ブロック…

vb ユーザーエージェント既定の表示域サイズ
svb 小さい表示域サイズ
lvb 大きい表示域サイズ
dvb 動的な表示域サイズ

これらの ― 当のボックス【これらの単位を利用しているボックス】のブロック軸におけるそれ ― の 1% に等しい。【“初期包含ブロック”は、どう関係する?】

vmin 表示域の小さい方の次元の 1%
vmin vw、vh のうち小さい方に等しい。
svmin svw、svh のうち小さい方に等しい。
lvmin lvw、lvh のうち小さい方に等しい。
dvmin dvw、dvh のうち小さい方に等しい。
vmax 表示域の大きい方の次元の 1%
vmax vw、vh のうち大きい方に等しい。
svmax svw、svh のうち大きい方に等しい。
lvmax lvw、lvh のうち大きい方に等しい。
dvmax dvw、dvh のうち大きい方に等しい。

プロパティ値の継承において、要素が継承するのは、親に指定された相対値ではなく、親の算出値である。

絶対単位
単位 名前 他の単位との関係
cm センチメートル(centimeter) 1cm=(96÷2.54)px
mm ミリメートル(millimeter) 1mm=(1÷10)cm
Q 四分ミリメートル(quarter-millimeter) 1Q=(1÷40)cm
in インチ(inch) 1in=2.54cm=96px
pc パイカ(pica) 1pc=(1÷6)in=12pt †
pt ポイント(point) 1pt=(1÷72)in
px ピクセル(pixel:“画素”) 1px=(1÷96)in

【Q に限って大文字になっている理由は不明。(文字大小無視なので、q と書いても妥当になる。)】


テスト
HTML:

ここに表示
HTML:

ここに表示
スクリプト:


スクリプト:



表示内容:
表示内容: