CSS 単位変換
ルートフォントサイズ、親要素のフォントサイズ、ビューポート、DPI、% の基準を指定して、px、rem、em、%、vw、vh、vmin、vmax、pt、cm、mm、q、ex、ch をブラウザ内で 1 対 1 に換算します。
ピクセル
px
タップして単位を切り替え
長さの単位
タイポグラフィ
ビューポート
パーセント
ルートフォントサイズに相対
rem
タップして単位を切り替え
長さの単位
タイポグラフィ
ビューポート
パーセント
CSS 単位変換値を入力し、変換元単位を選択変換先単位を選択、または入れ替えで反転必要に応じて rem/em/%/vw/vh の条件を設定変換結果をコピーvw/vh 確認用にビューポートプリセットを切り替え
かんたんスタート
1
2
3
4
5
よくある利用シーン
用途
レスポンシブレイアウト、デザインから開発への受け渡し、密度/印刷の対応、スタイル規約の統一
使い方のヒント
ベース設定：ルート 16px は一般的で、rem ↔ px の計算が容易
テキストは rem 推奨：全体スケールとアクセシビリティ向上。コンポーネント内の相対スケールには em
レイアウト見積もりにはビューポート単位を使用。極端な値を避けるため、ブレークポイントや min/max 制約と組み合わせます。
小数と丸め：可読性を損なわない適切な精度に
パラメータとコンテキスト
REM 基準（Root Font Size）：rem ↔ px の換算を決めます。Web では 16px が一般的です（1rem≈16px）。デザイン基準が異なる場合は一時的に調整します。
EM 基準（Parent Font Size）：em と %（基準がフォントサイズの場合）の換算を決めます。コンポーネント内の相対スケールに使えます。
% の基準：フォントサイズ / 幅 / 高さから選択します。レイアウトなら幅/高さ、タイポグラフィならフォントサイズを使います。
ブレークポイントプリセット：モバイル / タブレット / デスクトップ / 大画面に合わせてビューポートサイズも切り替えます。見積もり用であり、実行時の media query ではありません。
ビューポートサイズ：vw/vh/vmin/vmax と %（幅/高さ基準）の換算に使います。実機ではアドレスバー、セーフエリア、スクロールバーで差が出ます。
DPI（1 インチあたりのドット数）：物理単位 pt/pc/in/cm/mm/q ↔ px の換算に使います。既定の CSS 推定値は 96 DPI です。カスタム値は印刷/デバイスの見積もりであり、ブラウザの最終レイアウト計算ではありません。
ヒント: 1) 16px と 96 DPI は一般的な基準です。2) レイアウトの % はブレークポイントを切り替えて確認します。3) これらの設定は設計時の見積もり用で、ブラウザの最終 DOM/CSS 計算を置き換えるものではありません。
制限事項と互換性
% の基準は CSS プロパティ、包含ブロック、レイアウトモードによって変わります。このツールは実際の親/コンテナ測定ではなく、選択したフォントサイズ/ビューポート幅/ビューポート高さを使って見積もります。
ex/ch はここでは親要素のフォントサイズから近似します。フォントメトリクス検査ではないため、フォントやブラウザによって差が出ます。
従来の vw/vh/vmin/vmax はスクロールバー、アドレスバー、セーフエリアの影響を受けます。このツールは dvh/svh/lvh、vi/vb、safe-area、コンテナクエリ単位を計算しません。
物理単位 ↔ px は設定した DPI 推定値を使います。印刷や HiDPI の確認は、実機または校正での検証が必要です。
プライバシーとセキュリティ
処理はブラウザ内で実行されます。入力値、From/To 単位、単位ごとのキャッシュ値、ルートフォントサイズ、親要素のフォントサイズ、viewport、DPI、% の基準、ブレークポイントの選択は、現在のブラウザセッションまたはブラウザストレージに残る場合があります。ワークスペースを保存するか WebDAV 同期を有効にした場合、これらの値は同期設定に従って保存されることがあります。変換結果は現在の値、単位、コンテキスト設定から再計算され、別の結果として保存されません。このページは URL を取得せず、サーバー側変換のために値を送信しません。共有端末では、必要に応じて値、設定、サイトデータを消去してください。
よくある質問
rem はルート基準（全体スケール向け）、em は親基準（コンポーネント内スケール向け）
レイアウト/テキストは rem を優先（a11y）。ピクセル単位の精密さが要るアイコン/境界線は px も可
モバイルのアドレスバー、セーフエリア、スクロールバーがビューポートに影響します。ブレークポイントと min/max 制約を併用してください。
DPI（例：96/72/300）を設定。ここでの換算は概算であり、印刷は ICC/プルーフで検証