【CSS】ex、ic、chの単位について

どうも、くまだです。

CSSにはいろいろな単位がありその中のex、ic、chの単位について。

CSSの単位 ex

CSSの単位「ex」は、フォントの「x」などの小文字の高さ（x-height）になります。

なので、半角欧文の小文字高さ「x」を1ということになります。

以下のように指定できます。

.box {
    font-size: 10px;
    height: 1ex;
}

font-sizeが10pxのとき、小文字xの高さが5.43pxになるので、heightの1exは5.43pxになります。検証ツールで確認できます。

CSSの単位「ic」は全角文字の水（U+6C34）の幅を1icと表します。

コードは以下のように指定します。1icで日本語1文字分の幅のイメージです。

.box {
    width: 1ic;
}

CSSの単位「ch」は「0」の幅を表します。

1chとすれば、英語や数字で1文字分の幅のイメージです。

.box {
    width: 1ch;
}

ex、ic、chなどの単位はマイナーなのであまり出番はないかもしれないですが、こういう単位もあるよと頭の片隅に置いておくといいかもしれません。

今回は短いですが、ここまで読んでくださりありがとうございました。