CSS のサイズ単位（px rem em vh）
UI の文字サイズは rem を基本とし、細い罫線など必要なときだけ px を使います。
| 単位 | 基準 | よくある用途 |
|---|---|---|
| px | デバイスピクセル（CSS ピクセル） | 罫線、正確なアイコン |
| rem | ルート要素のフォントサイズ | 文字サイズ、余白 |
| em | 親要素のフォントサイズ | コンポーネント内のサイズ指定 |
| % | 親要素のプロパティ | 幅、フレキシブルレイアウト |
| vw | ビューポート幅の 1% | フルブリードセクション |
| vh | ビューポート高さの 1% | ヒーロー高さ（モバイル UI に注意） |
| vmin / vmax | ビューポートの短い/長い辺 | ほぼ正方形のレスポンシブサイズ |
| ch | 「0」のグリフ幅 | コードブロック、等幅フィールド |
| ex | フォントの x ハイト | まれな微調整タイポグラフィ |
| svh / lvh / dvh | 小/大/動的ビューポート | モバイルブラウザー対応の高さ |
注記
- モバイルの 100vh は非表示のブラウザーバーを含むことがあります。対応環境では dvh/svh を優先してください。
- ユーザーのフォントサイズ設定は rem に影響します。アクセシビリティの観点では通常むしろ好都合です。
よくある質問
- 1rem は何 px？
- 1rem はルート要素のフォントサイズに等しく、既定の 16px 環境では 16px です。
- em と rem の違いは？
- rem は常にルートのフォントサイズ基準、em は現在の要素が継承したフォントサイズ基準です。
- モバイルで 100vh がずれるのはなぜ？
- モバイルブラウザーはアドレスバーを表示・非表示するため 100vh が表示領域より大きくなることがあり、対応環境では dvh や svh を使います。