ic unit
ic単位は漢字や仮名などのCJK文字の幅を基準とした長さの単位です。ch単位がラテン文字の「0」の幅を基準とするのに対し、icは全角文字の幅を基準とします。日本語・中国語・韓国語のテキストレイアウトで、文字数に基づいた正確なサイズ指定が可能になります。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.types.length.ic | 106 | 106 | 97 | 15.4 | 106 | 15.4 |
基本構文
CSS
.text-box {
width: 20ic;
text-indent: 1ic;
}
input {
width: 10ic;
}ライブデモ
実務での使いどころ
-
日本語テキストの文字数基準レイアウト
全角文字の幅を基準にテキストエリアの幅を設定し、日本語コンテンツに最適化されたレイアウトを構築します。
注意点
- フォントによってic単位の実際のサイズが異なるため、使用するフォントが確定している場合に最も正確に機能します。
アクセシビリティ
- ic単位でフォントサイズを設定する場合でも、ユーザーのフォントサイズ設定によるスケーリングが正しく機能することを確認してください。