本文へスキップ
CrateX.app ロゴ

CrateX.app

CSS単位変換

CSS単位変換

CSS単位変換で px、rem、em、%、vw、vh、pt を相互変換できます。ルート/親フォント、ビューポート、DPI を指定してレスポンシブ実装の寸法確認に使えます。

ピクセル
px
タップして単位を切り替え

Length Units

Typography

Viewport

Percentage

ルートフォントサイズに相対
rem
タップして単位を切り替え

Length Units

Typography

Viewport

Percentage
CSS単位変換

かんたんスタート

1
値と単位を入力：例 16 + px、または 1 + rem
2
まず変換元を選んで値を入力し、次に変換先を選択。「入れ替え」で素早く切替。
3
モバイル: ドロワー右上の矢印で 変換元/変換先 を切替。
4
設定は rem/em/%/vw/vh で有効、絶対単位では無効。
5
結果表示：他の単位が即時計算され、コピー可能
6
ブレークポイント：モバイル/タブレット/デスクトップを切替えて画面別に検証

よくある利用シーン

用途

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

補足シナリオ

pxからem、emからpx、vwからpx も同じ確認フローでまとめて扱え、コピーや書き出し前の確認を進めやすくします。

使い方のヒント

ベース設定：ルート 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 では要検証

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

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

よくある質問

4

次の作業に役立つ関連ツールです。