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 ↔ %）の使い方
- 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 */ } ```