ex unit
フォントの小文字「x」の高さを基準とする相対単位です。テキストの本文サイズに正確に比例するため、アイコンやインライン要素をテキストの高さに合わせる場合に最適です。フォントによってex/emの比率が異なるため、フォント固有のサイジングが必要な場面で活用できます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.types.length.ex | 1 | 12 | 1 | 1 | 18 | 1 |
基本構文
CSS
.inline-icon {
width: 1ex;
height: 1ex;
vertical-align: middle;
}
.superscript {
font-size: 0.8ex;
}ライブデモ
実務での使いどころ
-
インラインアイコンのサイズ調整
テキスト内に配置するアイコンの大きさをex単位で指定し、フォントの小文字の高さに正確に合わせます。
注意点
- ex値はフォントに依存するため、font-familyが変わるとサイズも変化します。フォールバックフォントとの差異に注意してください。
アクセシビリティ
- ex単位はフォントサイズ設定に追従するため、ユーザーのアクセシビリティ設定を自然に尊重します。