CSSの長さの単位~“ch”

“ch”について

“ch”はその要素を表示するのに使用されるフォントの“0(ゼロ、U+0030)”の文字の送り幅を“1ch”と定義した相対単位です。

“1ch”は半角文字のおおよその送り幅です。等幅フォントの場合はちょうど半角文字の送り幅となり、インライン方向の長さを指定するのに使用した場合には1行に収まる文字数を推定することができます。

“1ch”の長さが判断できない場合は“0”の大きさを横幅“0.5em”、高さ“1em”であると仮定して長さを計算します。

“font-size”プロパティの値に使用する場合には親要素のメトリックを使用して長さを計算します。親要素や祖先要素がない場合は“font-size”プロパティの初期値をもとに計算します。

“ch”を使用した長さは親要素や祖先要素の文字の大きさによって変動します。ルート要素の文字の大きさをもとに長さを計算したい場合には“rch”を使用します。

使用例

div.sample-box { font-size: 16px;}

p.font-3ch { font-size: 3ch;}
div.boxw-3ch { width: 3ch;}


文字の大きさ“16px”の親要素
<div class="sample-box">

文字の大きさ
<p class="font-3ch">

猫は、上のかぎり黒くて、ことはみな白き。

</p>

長さ
<div class="boxw-3ch">

width: 3ch;

</div>

</div>

文字の大きさ“16px”の親要素

文字の大きさ

猫は、上のかぎり黒くて、ことはみな白き。

長さ

width:3ch;