CSS単位変換｜px・rem・em・vw・vh・pt・cm・mm を即変換
px・rem・em・vw・vh・%・pt・cm・mmなど9種類のCSS単位を相互変換。ルートフォントサイズ・ビューポートサイズをカスタマイズ可能。フロントエンド開発に最適な無料ツール。
詳細設定
ビューポートサイズ（vw・vh 用）
このツールについて
使い方・特徴・補足情報
CSS単位変換とは
CSS単位変換ツールは、CSS で使う長さの単位を相互に変換するツールです。1つ入力すると、全単位の結果が一覧で並びます。
対応は px・rem・em・vw・vh・%・pt・cm・mm の9種類です。デザインカンプの値や印刷用の物理単位まで一画面で扱えます。
ルートフォントサイズやビューポートサイズも変えられます。実際の開発環境に合わせた値を確認できます。
👤 こんな人におすすめ✨
CSSを書くフロントエンド開発者
✅ 楽になること
px・rem・vwなどCSS単位の変換
✍️ 避けたい手間
単位換算の計算ミス
解決できる困りごと
- px と rem を行き来する際の換算ミスを避けやすい
- レスポンシブ設計で vw/vh の値を電卓で叩く手間を省ける
- 既存スタイルを別単位に置き換えるリファクタ前に、結果を見比べて判断できる
使い方
- 「変換する値」に数値を入力し、変換元の単位をセレクトボックスで選ぶ
- 入力と同時に全単位への変換結果が一覧表示される
- コピーしたい単位の「コピー」ボタンをクリックしてCSSコードをクリップボードにコピーする
- 「詳細設定」でルートフォントサイズ・親要素フォントサイズ・ビューポートサイズを変更して実環境に合わせる
使用例
デザインカンプの px を rem に変換
ベースフォントサイズ 16px の前提で、デザインから取得した 24px を rem に置き換える例です。
入力
24px（ベース 16px）
出力
1.5rem / 1.5em / 18pt
ヒーローセクションを vw 指定に
ビューポート幅 1440px の環境で 720px のセクション幅を vw に変換する例です。レスポンシブ用に書き換えるときに使います。
入力
720px（ビューポート幅 1440px）
出力
50vw / 45rem（ベース 16px）
活用シーン
デザインカンプのpx値をremに変換
Figma で測った px を、ベースフォントサイズを見ながら rem へ直せます。24px が何 rem かを即座に確認できます。
レスポンシブのvw・vh変換
px と vw の対応を確認できます。ビューポート幅をデスクトップ（1920px）やスマホ（375px）へ切り替えて試せます。
印刷用CSSのpt・cm・mm換算
印刷向けスタイルでは pt や cm の物理単位を使います。画面の px から印刷サイズへの換算を、手早く確認できます。
emとremの違いを確かめる
em は親要素、rem はルート要素のフォントサイズが基準です。それぞれの基準値を個別に設定し、違いを見比べられます。
フォントサイズの調整・確認
rem 指定のとき、ルートフォントサイズを 16px や 62.5%（10px）へ変えて、実際に表示される px を確認できます。
CSSトークンの単位統一
px・rem・em が混在したデザイントークンを、一つの単位へそろえる下作業に使えます。各値を素早く相互変換できます。
技術的な解説
補足: 仕組み
このツールは px を中間表現にして、各単位を相互変換します。
絶対単位は物理定義から計算します。1inch = 96px を基準に 1pt ≈ 1.333px、1cm ≈ 37.795px を求めます。
相対単位は参照先が要ります。rem はルートの、em は親要素の font-size 基準で、vw はビューポート幅の100分の1です。
浮動小数点誤差を避けるため、toFixed(6) で小数第6位に丸めて表示します。
もっと詳しく
62.5%テクニックで rem を計算しやすくする理由
html { font-size: 62.5%; } を置くと、ルートが 16px から 10px になります。「1.6rem = 16px」のように、rem を10倍するだけで px へ換算できます。
暗算しやすくなりますが、ユーザーのフォント設定に追従する拡大率は保たれます。ルートを 10 に設定すると、この環境の換算値を確認できます。
vw 指定がデザインカンプ通りにならない落とし穴
カンプの px をそのまま vw にすると、想定幅以外では大きさが変わります。1440px で 720px=50vw でも、375px では 50vw が 187.5px にしかなりません。
vw は画面幅への比率なので、固定したい余白やフォントには clamp() で下限・上限を併用するのが実務的です。プリセットで各端末の実寸を先に確認できます。
よくある質問
remとemの違いは何ですか？
rem はルート要素（html）の font-size、em は親要素の font-size を基準とします。本ツールでは「詳細設定」で、それぞれの基準フォントサイズを個別に変更できます。
ブラウザのデフォルトフォントサイズは何pxですか？
ほとんどのブラウザで 16px のため、1rem = 16px になります。html に 62.5%（= 10px）を置き、1rem = 10px として扱いやすくする手法もよく使われます。
vwやvhのビューポートサイズはどう変更しますか？
「詳細設定」で「ビューポートサイズ」の幅・高さを変更できます。「デスクトップ」「iPad」「スマホ」などのプリセットボタンからも、よく使うサイズを選べます。
関連ツール
同じカテゴリの他のツールも合わせてどうぞ。