cap unit
cap 単位はフォントの大文字の高さ（キャップハイト）を1単位とする。アイコンやインラインの装飾要素を大文字テキストの高さに正確に揃えたい場合に有用。em がフォントサイズ全体に対する比率であるのに対し、cap は視覚的な大文字の高さに基づくため、より精密なタイポグラフィ調整が可能。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.types.length.cap | 118 | 118 | 97 | 17.2 | 118 | 17.2 |
基本構文
CSS
.inline-icon {
/* Align the icon to the height of a capital letter */
width: 1cap;
height: 1cap;
vertical-align: middle;
}
.badge {
/* Adjust badge size based on the height of a capital letter */
height: 1.5cap;
min-width: 1.5cap;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}ライブデモ
実務での使いどころ
-
インラインアイコンの整列
テキスト横のアイコンサイズを cap 単位で指定し、大文字の高さにぴったり合わせる。
注意点
- cap の値はフォントによって異なるため、フォント変更時にレイアウトが崩れる可能性がある。
アクセシビリティ
- cap 単位はフォントメトリクスに基づくため、ユーザーがフォントを変更しても相対的なサイズ関係が維持される利点がある。