[CSS] ic・ch・lh・ex・capの違いとは？文字や行を基準にした相対単位まとめ

CSSにはフォントサイズや画面サイズに応じて変化する「相対単位」が多数存在します。

その中でも ic、ch、lh、ex、cap は、文字や行の大きさを基準にした単位です。

これらを利用することで、
・文字数に合わせた幅指定
・行間に応じた余白調整
・タイポグラフィを意識したレイアウト
を実現できます。

ic とは

ic は「水平方向の全角文字（CJK文字）の幅」を基準にした単位です。
日本語・中国語・韓国語などの全角文字環境を考慮したレイアウトで利用されます。

1ic は、日本語などの全角文字1文字分に近い幅を表します。

使用例

.text {
	width: 20ic;
}

20ic = 全角20文字程度の幅

.indent {
	padding-left: 2ic;
}

2ic = 全角2文字程度の余白

日本語サイトでは ch より自然な結果になる場合があります。

ch とは

ch は「0（ゼロ）」の文字幅を基準にした単位です。

英数字中心のコンテンツでよく利用され、入力フォームやコード表示領域などで文字数ベースの幅指定ができます。

1ch は「0（ゼロ）」1文字分の幅を表します。
固定幅フォントではおおよそ半角1文字分ですが、プロポーショナルフォントでは文字によって幅が異なります。

使用例

input {
	width: 30ch;
}

30ch = 約30文字分

英語圏のWebサイトでよく利用される単位です。

lh とは

lh は要素の line-height を基準にした単位です。

行高に合わせて余白を調整できるため、文章中心のレイアウトとの相性が良い単位です。

使用例

.article p {
	margin-bottom: 1lh;
}

とすると、段落の下に常に「1行分」の余白を確保できます。

フォントサイズが変更されても余白のバランスが崩れにくいため、文章中心のレイアウトで便利です。

ex とは

ex は小文字の「x」の高さ（x-height）を基準にした単位です。
フォントの見た目に合わせて、文字や余白のバランスを調整したい場合に利用できます。

使用例

sup {
	font-size: 0.8em;
	vertical-align: 1ex;
}

文字まわりの細かなレイアウト調整に便利な単位です。

cap とは

cap はフォントの大文字部分の高さを基準にした単位です。

使用例

.icon {
	width: 1cap;
	height: 1cap;
}

見出しやアイコンを文字の高さに揃えたい場合に便利です。

比較的新しい単位のため、利用時はブラウザ対応状況の確認が必要です。

ic・ch・lh・ex・capの違い比較

単位	基準	主な用途
ic	全角文字に近い幅	日本語テキストの幅指定
ch	0（ゼロ）の幅	入力欄・コードブロック
lh	line-height	余白調整
ex	x-height	タイポグラフィ微調整
cap	大文字高さ	アイコンや見出し調整

実務で利用頻度が高いのは ch と lh です。
特に ch は入力フォームやコードブロックの幅指定で便利です。
また、文章主体のサイトでは lh を利用すると、フォントサイズ変更時でも余白バランスを維持しやすくなります。

一方で ic は日本語サイトとの相性が良く、全角文字数を意識したデザインで活用できます。

ex と cap は利用場面こそ限られますが、文字の高さや位置を基準にした繊細なレイアウト調整に活用できます。

ブラウザ対応状況

ch は主要ブラウザで広く対応しています。

lh、ic、cap は比較的新しい単位のため、利用前に最新のブラウザ対応状況を確認しましょう。

特に cap は比較的新しいため、業務利用時は十分な検証が必要です。

まとめ

ic、ch、lh、ex、cap は、文字や行のサイズを基準にしたCSSの相対単位です。
用途に応じて使い分けると柔軟なテキストレイアウトを実現できます。