CSS 長さ単位の使い分けメモ

※当サイトはアフィリエイト広告を使用しています。

CSS には多くの長さ単位がありますが、実際の実装で「どこで何を使うべきか」迷うことも多いです。
このメモは、長さ単位の使い分けルールを整理しておくためのものです。
目的は デザインの一貫性 と ユーザー操作（文字サイズ変更など）による崩れ防止 にあります。普段の実装で悩んだときの参照用ノートとしてまとめています。

Webで使える長さ単位まとめ

CSS で利用できる長さ単位は大きく分けて「絶対単位」「相対単位」「パーセント」「ビューポート基準」の4系統があります。
特徴を押さえておけば使いどころを見極めやすくなります。

絶対単位

• px: CSS ピクセル。もっとも基本的で安定しているが、柔軟性は低い。

フォント基準の相対単位

• em: 親や自身のフォントサイズを基準にする。コンポーネント内部で調整するのに便利。
• rem: ルート (html) のフォントサイズを基準にする。サイト全体のスケールを統一するのに有効。
• ex: 小文字「x」の高さ基準。実務で使うことはほとんどない。
• ch: 「0」の幅を基準とする。入力欄の幅指定に便利。
• lh / rlh: 行の高さを基準にできる単位。余白や高さをテキストに比例させられる。
• cap: 大文字の高さ基準。細かいタイポグラフィ調整に。
• ic: 全角文字の幅基準。日本語サイトなど CJK 文字に有効。
• qi: 1/4em の長さ。細かい文字組みに対応可能。

パーセント指定

• %: 親要素に対する割合で指定。柔軟なレイアウトを作るために不可欠。

ビューポート基準の単位

• vw: ビューポート幅の 1%。
• vh: ビューポート高さの 1%。ただしモバイルではアドレスバーの影響で値が揺れる。
• vmin: ビューポートの幅と高さの小さい方の 1%。
• vmax: ビューポートの幅と高さの大きい方の 1%。

モバイル対応の新しい viewport 単位

• dvw / dvh: Dynamic Viewport。アドレスバーの表示/非表示に追随し、実際の可視領域にフィットする。
• svw / svh: Small Viewport。アドレスバー非表示前提で安定した値を取る。
• lvw / lvh: Large Viewport。アドレスバーを含めた最大サイズ基準。
• vi / vb: 書字方向に依存する viewport 単位。縦書きサイトに有効。

用途別おすすめ単位

単位はただ知っているだけではなく、用途ごとに適切に選ぶことが大切です。以下は実務でのおすすめパターンです。

• ボーダー → px : 1px 精度が求められるため、相対単位は避ける。
• ボックス/テキストシャドウ → px : 見た目を固定したい部分。
• フォントサイズ → rem を基本、コンポーネント内部では em を活用。
• 行間 (line-height) → 単位なしの数値か lh がベスト。アクセシビリティに強い。
• 文字間 (letter-spacing) → em : フォントサイズに比例して自然に調整可能。
• レイアウト幅/高さ → %, vw, vh, dvh, rem など。全画面表示では dvh を優先。
• 入力欄/コード幅 → ch : 文字数基準で調整できるのでフォントサイズ変更にも強い。

デザイン崩れを防ぐコツ

単位の使い分けを間違えると、文字サイズ変更やデバイス幅の違いで簡単にデザインが崩れます。最低限のコツは以下のとおりです。

• フォントや余白 → rem / em / lh を使う。
• レイアウト → % / vw / vh / dvh を組み合わせる。
• 固定が必要な部分（ボーダー、影、アイコンなど） → px を最小限に。
• 入力欄 → ch を使って「文字数ベース」で安定させる。

まとめ

CSS の長さ単位は数が多いですが、使い分けルールを押さえておけば迷う場面は減ります。
ユーザー操作や拡大縮小に柔軟に対応しつつ、モバイル環境の特殊な挙動にも備えることができます。
結果として、チーム全体で一貫性のあるスタイルを維持できるのが最大のメリットです。