CSS 単位変換
ルートフォントサイズ、EM 基準フォントサイズ、ビューポート、% の基準を指定して、px、rem、em、%、vw、vh、vmin、vmax、pt、pc、in、cm、mm、q、ex、ch をブラウザ内で 1 対 1 に換算します。CSS の絶対単位には固定比率 1in = 96px が適用されます。
px
タップして単位を切り替え
長さの単位
タイポグラフィ
ビューポート
パーセント
rem
タップして単位を切り替え
長さの単位
タイポグラフィ
ビューポート
パーセント
CSS 単位変換値を入力し、変換元単位を選択変換先単位を選択、または入れ替えで反転必要に応じてルート、EM 基準、%、ビューポートの条件を設定します。EM には、そのプロパティで実際に使用されるフォントサイズを指定してください。変換結果をコピー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 基準フォントサイズ：そのプロパティで実際に使用されるフォントサイズを入力します。em は通常、現在の要素の算出フォントサイズを使用します。font-size などのフォント相対プロパティでは、親要素のフォントサイズを使用してください。この基準は ex/ch の近似、および「フォントサイズ」を選択した場合の % にも使用されます。
% の基準：フォントサイズ / 幅 / 高さから選択します。レイアウトなら幅/高さ、タイポグラフィならフォントサイズを使います。
ブレークポイントプリセット：モバイル / タブレット / デスクトップ / 大画面に合わせてビューポートサイズも切り替えます。見積もり用であり、実行時の media query ではありません。
ビューポートサイズ：vw/vh/vmin/vmax と %（幅/高さ基準）の換算に使います。実機ではアドレスバー、セーフエリア、スクロールバーで差が出ます。
ヒント: 1) 16px はルートと EM 基準として一般的ですが、そのプロパティで実際に使用されるフォントサイズを指定してください。2) レイアウトの % はブレークポイントを切り替えて確認します。3) これらの設定は設計時の見積もり用で、ブラウザの最終 DOM/CSS 計算を置き換えるものではありません。絶対単位には常に 1in = 96px が適用されます。
制限事項と互換性
% の基準は CSS プロパティ、包含ブロック、レイアウトモードによって変わります。このツールは実際の親/コンテナ測定ではなく、選択したフォントサイズ/ビューポート幅/ビューポート高さを使って見積もります。
ex/ch はここでは EM 基準フォントサイズに基づく近似値です。フォントメトリクスを検査するものではないため、フォントやブラウザによって結果が異なります。
従来の vw/vh/vmin/vmax はスクロールバー、アドレスバー、セーフエリアの影響を受けます。このツールは dvh/svh/lvh、vi/vb、safe-area、コンテナクエリ単位を計算しません。
CSS の絶対単位の換算には固定比率 1in = 96px が適用されます。画面上の物理ピクセルと印刷サイズの対応付けには、別途デバイス/印刷用のワークフローが必要ですが、このツールでは提供していません。
プライバシーとセキュリティ
処理はブラウザ内で実行されます。入力値、From/To 単位、単位ごとのキャッシュ値、ルートフォントサイズ、EM 基準フォントサイズ、ビューポート、% の基準、ブレークポイントの選択は、現在のブラウザセッションまたはブラウザストレージに残る場合があります。ワークスペースを保存するか WebDAV 同期を有効にした場合、これらの値は同期設定に従って保存されることがあります。換算結果は現在の値、単位、コンテキスト設定から再計算され、別の結果として保存されません。このページは URL を取得せず、サーバー側変換のために値を送信しません。共有端末では、必要に応じて値、設定、サイトデータを消去してください。
よくある質問
rem はルートフォントサイズに相対します。em は通常、現在の要素の算出フォントサイズを使用しますが、font-size などのフォント相対プロパティでは親要素のフォントサイズを使用します。そのプロパティで実際に使用されるフォントサイズを EM 基準に設定してください。
レイアウト/テキストは rem を優先（a11y）。ピクセル単位の精密さが要るアイコン/境界線は px も可
モバイルのアドレスバー、セーフエリア、スクロールバーがビューポートに影響します。ブレークポイントと min/max 制約を併用してください。
CSS の px 換算には 1in = 96px が適用され、画面から印刷への物理的な換算ではありません。物理ピクセル、プリンター解像度、ICC/プルーフ、最終出力には、別途デバイス/印刷用のワークフローを使用してください。