ch unit
ch 単位はフォントのゼロ文字の幅を基準とするため、テキストコンテンツの幅指定に最適です。例えば max-width: 70ch は約70文字幅となり、読みやすい行長を設定できます。フォントサイズやフォントファミリーに応じて自動的にスケールするため、レスポンシブで可読性の高いタイポグラフィ設計に活用されます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.types.length.ch | 27 | 12 | 1 | 7 | 27 | 7 |
注釈 2件
実装メモ
- Firefox 1 から Firefox 3 まで、「ch」は M 文字の幅でした。
- Firefox 1 から Firefox 3 まで、`ch` は `border-width` および `outline-width` CSS プロパティでは機能しませんでした。
基本構文
CSS
.article-body {
max-width: 70ch;
margin: 0 auto;
}
input {
width: 20ch;
}ライブデモ
実務での使いどころ
-
最適な行長の設定
本文テキストの最大幅を ch 単位で設定し、読みやすい行長（45〜75文字程度）を維持できます。
注意点
- ch 単位はゼロ文字の幅に基づくため、プロポーショナルフォントでは実際の文字数と一致しません。等幅フォントでは文字数と正確に一致します。
アクセシビリティ
- ch 単位で行長を制御することで、読みやすさが向上します。WCAG 2.1 では1行あたり80文字以内を推奨しています。