CSS 単位変換（px ↔ rem ↔ em ↔ vw/vh ↔ pt ↔ %）無料・登録不要
CSS で使う 7 単位（px / rem / em / vw / vh / pt / %）を一括相互変換。root font-size / 親要素 / ビューポート幅 等の基準を自由設定。
入力値
基準値の調整
変換結果（7 単位一括）
| 単位 | 値 | CSS | コピー |
|---|---|---|---|
px 絶対指定（ピクセル） | 16 | 16px | |
rem root font-size 基準 | 1 | 1rem | |
em 親要素 font-size 基準 | 1 | 1em | |
vw ビューポート幅 1% | 1.1111 | 1.1111vw | |
vh ビューポート高 1% | 1.7778 | 1.7778vh | |
pt 1pt = 1/72 inch ≒ 1.333px | 12 | 12pt | |
% 親要素サイズ基準 | 2 | 2% |
各単位の特徴と使い分け
- px（ピクセル）: 絶対指定。デバイス独立性なし。border / 線幅で使う
- rem: root font-size 基準（通常 16px）。アクセシビリティ推奨。font-size / margin / padding に
- em: 親要素 font-size 基準。階層で値が伝播するため line-height / icon サイズに
- vw / vh: ビューポート 1% 基準。Hero タイトル / フルスクリーンレイアウトに
- pt（ポイント）: 印刷用（1pt = 1/72 inch ≒ 1.333px）。Web では通常使わない
- %: 親要素基準。width / height で使う
ユーザーがブラウザ設定で root font-size を変更した時、rem 単位ならフォントも一緒にスケールします。px だと固定で変わらず、視覚障害者・高齢者のアクセシビリティ低下。WCAG 2.2 SC 1.4.4「テキストサイズ変更 200%」要件も rem が満たしやすい。
良いCSS 単位変換（px ↔ rem ↔ em ↔ vw/vh ↔ pt ↔ %）の判断基準
px から rem への移行や、デザインカンプの px 値を CSS に落とし込むときに使う変換ツールです。変換結果をコピーする前に、下の基準で「前提となる基準値が実環境と合っているか」を確認すると、貼り付けた後のサイズずれを防げます。
root font-size の前提を実環境と合わせたか
rem は root 要素（html）の font-size を基準に計算されます。プロジェクトの CSS で html の font-size を 16px 以外に変更している場合、ツール側の基準値も同じ値に設定しないと、変換結果が実際の表示とずれます。まず自分のプロジェクトの root font-size を確認してから変換します。
px と rem の使い分けの方針を決めているか
一般に、font-size や余白などユーザー設定に応じてスケールしてほしい値は rem、border の太さなど絶対値で固定したい値は px が使われます。変換する前に「この値はスケールすべきか、固定すべきか」を考えると、機械的に全部 rem 化して細部が崩れる事態を避けられます。
em の場合は親要素の font-size を確認したか
em は親要素の font-size 基準なので、同じ em 値でも置く場所によって実際のサイズが変わります。変換時に設定した親要素の font-size が、実際にそのスタイルを適用する要素の親と一致しているかを確認します。
vw / vh はどの画面幅を想定した値か明確か
vw / vh はビューポートのサイズで実寸が変わる単位です。変換結果の px 値は「設定したビューポート幅でのサイズ」でしかないため、モバイルとデスクトップの両方の幅で値を確認してから採用します。
小数点以下の丸め方を確認したか
px から rem への変換では割り切れない値（例: 20px ÷ 16 = 1.25rem は割り切れますが、15px ÷ 16 = 0.9375rem のような細かい値）が出ます。桁数の長い値をそのまま使うか、キリのいい値に寄せるかをプロジェクトの方針として決めておくと、コードの一貫性が保てます。
変換後の値を実際のブラウザで確認したか
計算上は正しくても、適用先の要素に別のスタイルが効いていて見た目が想定と違うことはよくあります。変換した値を本番コードに入れる前に、実際のブラウザで表示を確認します。
ありがちな失敗例（NG → 改善）
NGhtml の font-size を 62.5%（10px 相当）にしているプロジェクトで、基準 16px のまま変換した rem 値を貼り付ける。
改善先にプロジェクトの root font-size を確認し、ツールの基準値を同じ値に設定してから変換する。
→ rem の実寸は root font-size に依存します。基準が違うと、計算は合っていても表示サイズが大きくずれます。
NG既存 CSS の px を一括で rem に置き換え、1px の border まで 0.0625rem にする。
改善スケールさせたい値（文字サイズ・余白）だけ rem 化し、固定したい細い線などは px のまま残す。
→ すべてを rem にするのが正解とは限りません。値の役割ごとに単位を選ぶほうが、意図の伝わる CSS になります。
NGデスクトップ幅で計算した vw 値をそのまま使い、モバイルでの表示を確認しない。
改善vw を使う値は、最小幅と最大幅の両方のビューポートで実寸を確認してから採用する。
→ vw は画面幅に比例して変わるため、片方の幅だけで決めると、もう片方で小さすぎたり大きすぎたりします。
CSS 単位変換（px ↔ rem ↔ em ↔ vw/vh ↔ pt ↔ %）の使い方
- 1テキストを入力またはペーストします
- 2「変換する」ボタンをクリックします
- 3結果を確認してコピーします
よくある質問
CSS 単位変換（px ↔ rem ↔ em ↔ vw/vh ↔ pt ↔ %）は無料ですか？
はい、完全無料でご利用いただけます。会員登録も不要です。
スマートフォンでも使えますか？
はい、スマートフォン・タブレット・PCなど、ブラウザがあればどのデバイスでもご利用いただけます。
対応している画像形式は？
PNG、JPG、WebP、GIF、SVG形式に対応しています。
関連ツール
CSS 単位変換（px ↔ rem ↔ em ↔ vw/vh ↔ pt ↔ %）について
CSS 単位変換が解決する課題
CSS で「20px は rem でいくつ？」「2.5rem は em で？」「100vw は px で？」を毎回手計算するのは面倒。さらに root font-size を 14px に変更している場合 / 親要素 font-size が違う場合 / ビューポート幅でレスポンシブ確認したい場合は、計算式が複雑になります。本ツールは 7 単位（px / rem / em / vw / vh / pt / %）を一括相互変換 + root font-size / 親要素 font-size / vw / vh / 親要素サイズの 5 基準値を自由設定可。すべての単位値を一画面で同時確認 + ワンクリックコピーで CSS 実装が即終わります。
7 単位の特徴と使い分け
【px（ピクセル）】絶対指定。border / 細い線 / 印刷物ベースの絶対値で使う。デバイス独立性なし。
【rem】root 要素（<html>）の font-size 基準。通常 1rem = 16px。アクセシビリティ最強。font-size / margin / padding / gap に。
【em】親要素の font-size 基準。階層で値が伝播するため line-height / アイコンサイズ / 微調整に。
【vw】ビューポート幅 1%（1440px 画面なら 1vw = 14.4px）。Hero タイトル・フルスクリーン UI に。
【vh】ビューポート高 1%。フルハイトレイアウトに。
【pt（ポイント）】1pt = 1/72 inch ≒ 1.333px。印刷物用。Web では通常使わない。
【%】親要素サイズ基準。width / height で使う。
rem 単位推奨の理由（アクセシビリティ）
【ユーザー設定対応】ユーザーがブラウザ設定（Chrome / Safari の「フォントサイズ」等）で root font-size を変更した時、rem 単位ならフォント・余白も一緒にスケールする。px だと固定で変わらない。
【WCAG 2.2 SC 1.4.4】「テキストサイズ変更 200% で正常動作」要件 → rem が満たしやすい。
【ズーム対応】Ctrl + / -（ブラウザズーム）でも rem は適切にスケール。
【メディアクエリ rem 化】@media (min-width: 48rem) のように rem 単位を使うとユーザー設定影響を受ける（最近の推奨パターン）。
こんなシーンで使えます
【1. Figma → CSS 実装】デザイナーから受け取った px 値（24px ヘッダー高さ等）を rem に一括変換して実装。
【2. Tailwind CSS 設定】tailwind.config.js の theme.spacing / theme.fontSize で px ↔ rem 変換が必要な時に。
【3. レスポンシブ確認】「Hero タイトル 48px は 1440vw でいくつ？」「モバイル 375 では？」をビューポート幅変更で即確認。
【4. 親要素 em ↔ px 計算】「icon は 0.875em → 親 18px font なら 15.75px」のような em の計算。
【5. 印刷物 ↔ Web デザイン**】Adobe Illustrator から CSS への 12pt → 16px 変換。
【6. 既存 CSS のリファクタ**】px 大量使用の古い CSS を rem に統一する移行作業。
よくある失敗と注意点
1つ目: root font-size を独自設定（14px 等）にして rem 計算が狂う → 本ツールの「root font-size」設定を実環境と一致させる。
2つ目: em が親要素で予想外スケール → ネスト階層で値が伝播するため、3 階層下では「0.875em × 0.875em × 0.875em」と縮小する。em は近い親 1 階層程度で使う。
3つ目: vw を margin / padding に多用 → スマホで余白が小さすぎる / デスクトップで大きすぎる。clamp() と組み合わせる。
4つ目: pt を Web で使う → 印刷用。Web では px / rem 推奨。
5つ目: % を height で使う → 親要素 height が auto だと反映されない。要事前確認。
6つ目: 計算精度の罠 → 16px / 14 = 1.142857...rem。小数点 4 桁で丸めて使う（本ツールは自動丸め）。
実装スニペット
【一般的なフォントサイズスケール（rem ベース）】 ```css html { font-size: 16px; /* 通常 */ }
h1 { font-size: 3rem; /* 48px */ } h2 { font-size: 2.25rem; /* 36px */ } h3 { font-size: 1.5rem; /* 24px */ } p { font-size: 1rem; /* 16px */ } small { font-size: 0.875rem; /* 14px */ } ```
【spacing スケール】 ```css .section { padding: 4rem 1rem; /* 64px 16px */ } .card { padding: 1.5rem; /* 24px */ } .gap-4 { gap: 1rem; /* 16px */ } ```