CrateX.app ロゴ

CrateX.app

CSS 単位変換

px、em、rem、%、vw、vh などの CSS 単位間で変換、レスポンシブブレークポイント対応

使用方法

🚀 かんたん開始

  • 値と単位を入力：例 16 + px、または 1 + rem
  • コンテキスト設定：ルート/親のフォントサイズ、ビューポートサイズ、DPI を設定（rem/em/vw/vh/pt/cm などに影響）
  • 結果表示：他の単位が即時計算され、コピー可能
  • ブレークポイント：モバイル/タブレット/デスクトップを切替えて画面別に検証

📌 よくある用途

  • 用途：レスポンシブレイアウト、デザインから開発への受け渡し、密度/印刷の対応、スタイル規約の統一

🧭 使い方のヒント

  • ベース設定：ルート 16px は一般的で、rem ↔ px の計算が容易
  • テキストは rem 推奨：全体スケールとアクセシビリティ向上。コンポーネント内の相対スケールには em
  • レイアウトにはビューポート単位：ブレークポイントと clamp/min/max を併用
  • 小数と丸め：可読性を損なわない適切な精度に

🎛️ パラメータとコンテキスト

  • REM base (Root Font Size): rem ↔ px の基準。Web では 16px が一般的（1rem≈16px）。デザイン基準が異なる場合は一時的に調整。
  • EM base (Parent Font Size): em と %（参照=フォントサイズ）の基準。コンポーネント局所のスケールに有効。
  • % の参照：フォントサイズ / 幅 / 高さ から選択。レイアウトなら幅/高さ、タイポグラフィならフォントサイズ。
  • ブレークポイントのプリセット：ビューポートサイズも同期して素早く検証（実行時のメディアクエリとは別）。
  • ビューポート幅/高：vw/vh/vmin/vmax と %（幅/高）の換算に使用。実機ではアドレスバー/セーフエリア/スクロールバーの影響あり。
  • DPI：pt/pc/in/cm/mm/q ↔ px の換算用。既定は 96。印刷/HiDPI は実機値に設定。
  • Tips：1) 16px と 96 DPI を基準に；2) レイアウトの % はブレークポイント切替で検証；3) これらは設計時の目安で、最終計算はブラウザに準拠。

⚠️ 制限と互換性

  • % の参照はプロパティに依存（width/height/line-height で挙動が異なる）。本ツールは一般的な前提で推定
  • ex/ch はフォントメトリクスに依存し、フォント/ブラウザで差異
  • ビューポート単位はアドレスバー/セーフエリア/スクロールバーの影響を受けるため誤差あり
  • 物理単位 ↔ px は DPI に依存。印刷/HiDPI では要検証

🔒 プライバシーとセキュリティ

  • すべての処理はブラウザ内で完結し、データはお使いのデバイスから外部に送信されません

❓ よくある質問

rem と em の違いは？

rem はルート基準（全体スケール向け）、em は親基準（コンポーネント内スケール向け）

px と rem はどちらを使うべき？

レイアウト/テキストは rem を優先（a11y）。ピクセル単位の精密さが要るアイコン/境界線は px も可

vw/vh が端末で異なるのはなぜ？

モバイルのアドレスバー/セーフエリア/スクロールバーが影響。clamp()/min()/max() とブレークポイントを併用

画面ピクセルを印刷単位に換算するには？

DPI（例：96/72/300）を設定。ここでの換算は概算であり、印刷は ICC/プルーフで検証

CSS Unit Converter - px em rem vw vh pt Calculator - CrateX.app