CSSの単位まとめ 第3回

前回はremでした。今回は恥ずかしながら初めて知った単位についてまとめてみたいと思います。

ex

ざっくり言うと、親要素の半角小文字「x」の大きさが1ex。

さっそくHTML

<div class="font-size16px">
    <p class="font-size2ex">フォントサイズ16pxの「X」のサイズの2倍
        <span class="font-size1ex">ォントサイズ16pxの「X」のサイズ</span>
    </p>
</div>

CSS

.font-size16px {
    font-size: 16px;
}

.font-size1ex{
    font-size: 1ex;
}

.font-size2ex {
    font-size: 2ex;
}

結果

フォントサイズ16pxの「X」のサイズの2倍 フォントサイズ16pxの「X」のサイズ

まとめ

なぜ「x」なのかよくわかりませんが、激しく扱いづらい。フォントファミリーによってサイズが変わるということなのだろうか。半分くらいのサイズになるってことか。使う機会はあまりないと思うけれど、興味深くはあります。長くなりそうなので、フォントファミリーの実験は気が向いたらすることにします。