2025年、CSSでの高さや幅、余白等における推奨単位

Web制作において、CSSの単位選びはデザインの柔軟性やレスポンシブ対応に大きく影響します。2025年時点での最新の推奨単位とその使用例を整理しました。

1. 高さ・幅の推奨単位

推奨単位: rem / % / vw・vh

• rem（ルートのフォントサイズ基準）
  • ユーザーのアクセシビリティ設定に応じて拡大・縮小されるため、可読性を確保しやすい。
  • 例: width: 20rem;（16px基準で320px）
• %（親要素基準）
  • レスポンシブなデザインに適し、フレキシブルなサイズ調整が可能。
  • 例: width: 80%;
• vw・vh（ビューポート基準）
  • ビューポート（画面サイズ）に応じた調整ができる。
  • 例: width: 50vw;（画面幅の50%）
  • 注意: 縦方向のvhはモバイル端末で意図しない挙動を起こすことがあるため、svh（Small Viewport Height）の使用も検討。

2. 余白（マージン・パディング）の推奨単位

推奨単位: rem / % / ch

• rem（推奨）
  • 例: margin: 2rem;
• %（レスポンシブ対応向け）
  • 例: padding: 5%;
• ch（文字幅基準）
  • 文字ベースの調整が必要な場合に有効。
  • 例: padding: 2ch;

3. フォントサイズの推奨単位

推奨単位: rem / em

• rem（推奨）
  • 例: font-size: 1.2rem;（ベースフォントサイズ×1.2）
• em（親要素基準）
  • 例: font-size: 1.5em;（親要素のフォントサイズ×1.5）

4. ボーダー・影の推奨単位

推奨単位: px / rem

• ボーダー: px（精密なデザイン調整向け）
  • 例: border-width: 2px;
• 影: rem（拡大縮小に対応）
  • 例: box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.2);

5. min() / max() / clamp() の活用

CSSのmin()、max()、clamp()関数を活用することで、より柔軟なサイズ調整が可能になります。

• min(value1, value2)
  • 指定した値のうち小さい方を適用。
  • 例: width: min(50vw, 600px);（ビューポート幅の50%または最大600pxの小さい方を選択）
• max(value1, value2)
  • 指定した値のうち大きい方を適用。
  • 例: height: max(100px, 10vh);（100pxまたはビューポート高の10%の大きい方を選択）
• clamp(min, preferred, max)
  • 最小・推奨・最大の範囲を指定し、最適なサイズを適用。
  • 例: font-size: clamp(1rem, 2vw, 2rem);（1rem以上、2vwを基準にしつつ、最大2remまで）

これらの関数を使うことで、レスポンシブデザインをより柔軟に調整できます。

6. まとめ（推奨単位一覧）

CSSの単位選びはデザインのスケーラビリティやユーザー体験に影響を与えます。2025年のトレンドに合わせ、適切な単位を選択しましょう。