Pixel
Root EM
EM
Percent
V-Width
V-Height
Quick Presets
数値を変更すると全単位を自動換算。 右上のコピーボタンで単位付きコードを取得できます。
Advertisement
CSS ユニット変換ツールとは？
本ツールは、Webデザインやコーディングにおいて重要なpx（ピクセル）と、rem、em、vw、vhなどの相対単位を相互に一括変換できる高機能計算ツールです。 基準となるフォントサイズ（Base Size）やビューポートの大きさを自由にカスタマイズできるため、最新のレスポンシブデザイン手法に則った正確な値を即座に算出できます。
こんなシーンで便利です
レスポンシブデザインの実装
固定値（px）を相対値（rem）に変換し、ブラウザ設定に応じて文字サイズが可変するアクセシビリティに配慮した設計に役立ちます。
Figmaからのコーディング
デザイン上のpx値を貼り付けるだけで自動計算。手計算によるミスを防ぎ、作業スピードを加速させます。
Fluid Typography
vw（Viewport Width）を使用した流動的なサイズ指定も、基準幅を入力するだけで瞬時にシミュレーションが可能です。
UIパーツの設計
親要素に応じた em 値の算出など、コンポーネント指向のスタイル設計に必要な細かい数値計算をサポートします。
使い方は簡単 4ステップ
- 「基準フォントサイズ（通常は16px）」を設定します。
- px や rem など、手元にある数値をいずれかの入力欄に打ち込みます。
- 他の全単位が同期して表示されるので、右上のコピーボタンでCSSコードを取得します。
- 必要に応じて Viewport（画面幅・高さ）を変更し、vw/vh の変動を確認します。
※Viewportを変更すれば、vw/vh の値もリアルタイムに反映されます。
ご利用時の注意点
- rem と em の違い：rem は root em の略で html 要素を基準にします。em は親要素を基準にするため注意してください。
- 丸め処理：計算結果は小数点第4位まで表示されます。必要に応じてコピー後に調整してください。
- ブラウザの最小サイズ：多くのブラウザでは 10px 以下のフォントサイズは正しく表示されない場合があるためご注意ください。
Advertisement
PX・REM・EM 変換早見表（基準16px）
一般的なブラウザのデフォルトサイズ（16px）を基準とした変換一覧です。
| ピクセル (px) | レム (rem / em) | 使用シーンの目安 |
|---|---|---|
| 10px | 0.625rem | 注釈・非常に小さなテキスト |
| 12px | 0.75rem | 補足説明・キャプション |
| 14px | 0.875rem | 標準的なサブテキスト |
| 16px | 1rem | ブラウザ標準・本文（Base） |
| 18px | 1.125rem | やや大きめの本文・リード文 |
| 20px | 1.25rem | 小見出し・カードタイトル |
| 24px | 1.5rem | h3 相当の見出し |
| 32px | 2rem | h2 相当の見出し |
| 40px | 2.5rem | h1 相当・ヒーローセクション |
| 48px | 3rem | 特大タイトル・バナー |
| 64px | 4rem | デザインアクセント |
【レスポンシブ対応のポイント】
現代のWeb制作では、アクセシビリティの観点からフォントサイズを rem で指定することが推奨されます。 これは、ユーザーがブラウザ設定で文字サイズを変更した際に、レイアウトが適切に追従するためです。
【vw・vh（ビューポート単位）の活用】vw (Viewport Width) は画面幅を基準にするため、Fluid Typography（流動的タイポグラフィ）の実装に最適です。 例えば calc(1rem + 1vw) のように指定することで、デバイスサイズに応じて滑らかに変化する文字サイズを実現できます。
【デザインツールとの連携】
FigmaやAdobe XDで作成されたデザインデータは通常 px 単位です。 コーディング時に本ツールを使用することで、16px基準だけでなく、プロジェクトごとの独自基準（10pxベース等）に合わせた変換も一瞬で行えます。
よくある質問（FAQ）
Q.業務で使用している数値を入力しても安全ですか？
A. はい、完全に安全です。本ツールに入力された数値はすべてお客様のブラウザ内で計算され、サーバーへのデータ送信は一切行われません。
Q.オフライン環境でも計算できますか？
A. 一度ページを読み込めば、計算処理自体に通信は必要ありません。
Q.変換されたデータはどこかに保存されますか？
A. いいえ。ページをリロードすると入力内容はクリアされます。当サイトが入力履歴を保持することはありません。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。