CSSの長さの単位~“ex”

“ex”について

“ex”はその要素の最初の使用可能なフォントの“x-height”を“1ex”と定義した相対単位です。

多くの場合、“x-height”は小文字の“x”の高さです。一般的なフォントでは“1ex”はアルファベットの小文字の大きさと同じであり、“1ex≒0.5em”であることが多いです。

フォントによっては“x-height”を算出するためのメトリックが定義されています。メトリックが欠落している場合は小文字の高さから“x-height”を推測します。“x-height”を推測できない場合は“1ex”は“0.5em”と仮定します。

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

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

使用例

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

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


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

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

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

</p>

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

width: 3ex;

</div>

</div>

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

文字の大きさ

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

長さ

width:3ex;