rch unit
rchは、ルート要素のフォントにおける「0」文字の幅を基準とするフォント相対長さの単位です。ch単位がその要素自身のフォントを基準とするのに対し、rchは常にルート要素のフォントを基準にします。一貫した文字幅ベースのレイアウトを構築する際や、入力フィールドの幅設定などで活用されます。
概要
rchは、ルート要素のフォントにおける「0」文字の幅を基準とするフォント相対長さの単位です。ch単位がその要素自身のフォントを基準とするのに対し、rchは常にルート要素のフォントを基準にします。一貫した文字幅ベースのレイアウトを構築する際や、入力フィールドの幅設定などで活用されます。
対応ブラウザ
デスクトップ
Chrome 111+
Edge 111+
Safari 17.2+
Firefox 147+
モバイル
Chrome Android 111+
Safari iOS 17.2+
Firefox Android 147+
基本構文
CSS
.input-field {
width: 30rch;
}
.sidebar {
max-width: 40rch;
}実務での使いどころ
-
文字幅ベースのレイアウト
ルートフォントのゼロ文字幅を基準にした一貫性のあるサイズ指定で、テキストコンテンツに最適な幅を設定します。
注意点
- プロポーショナルフォントではゼロ文字の幅が他の文字と大きく異なる場合があるため、実際の表示を確認してください。
アクセシビリティ
- rch単位はルートのフォントサイズ変更に追従するため、ユーザーのアクセシビリティ設定を尊重した柔軟なレイアウトが可能です。