CSS単位コンバーター
値を一度入力すれば、px・rem・em・pt・%・vw・vh というすべてのCSS長さ単位で確認できます。ルートフォントサイズ・親フォントサイズ・ビューポートは自由に選択可能。どの結果もワンタップでコピーできます。
よく使う変換
すべての単位に変換
rem・em・% はフォントサイズに、vw・vh はビューポートに依存します。px と pt は固定比です（1pt = 1.3333px）。既定値と異なる場合は上のコンテキストを調整してください。
px → rem 早見表（ルート = 16px）
| px | rem | pt |
|---|---|---|
| 8px | 0.5rem | 6pt |
| 10px | 0.625rem | 7.5pt |
| 12px | 0.75rem | 9pt |
| 14px | 0.875rem | 10.5pt |
| 16px | 1rem | 12pt |
| 18px | 1.125rem | 13.5pt |
| 20px | 1.25rem | 15pt |
| 24px | 1.5rem | 18pt |
| 32px | 2rem | 24pt |
| 48px | 3rem | 36pt |
既定のルートフォントサイズ16pxでは、ピクセルを16で割ると rem、0.75を掛けると pt（ポイント）になります。
CSS単位コンバーターについて
CSSには長さを表す方法が複数あり、適切な単位を選べるかどうかで、きれいにスケールするレイアウトか崩れるレイアウトかが決まります。このコンバーターは1つの値を一度にすべての主要なCSS単位へ変換します。px（ピクセル）は絶対的な基準単位で、CSSでは1ピクセルが1/96インチと定義されています。rem はドキュメントのルートフォントサイズ（<html> 要素）を基準とし、既定では16pxなので 1rem = 16px、1.5rem = 24px となります。rem はサイズ指定の現代的な標準であり、ルートの値を1つ変えるだけでページ全体が再スケールするため、アクセシビリティに優れています。em は現在の要素の親フォントサイズを基準とするため、入れ子にすると累積します。pt（ポイント）は印刷用の単位で 1pt = 1/72インチ = 1.3333px に固定されており、12pt = 16px です。font-size のコンテキストでの % は親フォントサイズに等しく、100% は 1em と同じになります。vw と vh はビューポートの幅と高さの1%で、可変かつ全画面のレイアウトに最適です。詳細パネルで独自のルートフォントサイズ・親フォントサイズ・ビューポートサイズを設定できます。妥当な既定値（16/16/1920×1080）により、日常的な px↔rem の用途はそのままカバーできます。
CSS単位の変換方法
- 1 値を入力し、その値の単位を選びます（例: 24 px や 1.5 rem）。
- 2 結果グリッドで他のすべての単位での同等の値を確認し、各カードのコピーボタンを押すと貼り付けられる形式（例: 「1.5rem」）でコピーできます。
- 3 プロジェクトが 16px / 1920×1080 の既定値を使っていない場合は、詳細パネルを開いてルートフォントサイズ・親フォントサイズ・ビューポートサイズを変更してください。
変換の計算式
すべての変換は固定のCSS比率を用いてピクセルを経由します。 rem = px ÷ ルートフォントサイズ（既定16）— よって px = rem × 16。 em = px ÷ 親フォントサイズ（既定16）。 pt = px × 0.75。これは 1px = 1/96インチ、1pt = 1/72インチ であるため、1pt = 96/72 px = 1.3333px、1px = 0.75pt となります。 % = px ÷ 親フォントサイズ × 100（font-size のパーセンテージ。100% = 親のフォントサイズで、1em と同じ）。 vw = px ÷ ビューポート幅 × 100、vh = px ÷ ビューポート高さ × 100。 既定値では 16px = 1rem = 1em = 100% = 12pt = 0.8333vw = 1.4815vh となります。ルートフォントサイズなどの基準が0に設定されると、対応する単位は未定義となり、無限大ではなく「—」と表示されます。
よくある質問
1rem は何 px ですか？
既定では 1rem = 16px です。rem はルート（<html>）フォントサイズを基準とし、ブラウザはそれを初期状態で16pxに設定するためです。したがって 1.5rem = 24px、2rem = 32px となります。ルートフォントサイズを変更すると（例えば計算を簡単にするため10pxにすると）、1rem はその値になります（16px は 1.6rem になります）。詳細パネルで独自のルートフォントサイズを設定すると、コンバーターは即座に再計算します。
px から rem への計算式は？
rem = px ÷ ルートフォントサイズ、逆は px = rem × ルートフォントサイズ です。既定の16pxルートでは、ピクセル値を16で割ると rem になります: 24px ÷ 16 = 1.5rem、10px ÷ 16 = 0.625rem。フォントサイズや余白には px より rem が好まれます。ユーザーのブラウザのフォントサイズ設定を尊重し、アクセシビリティに優れるためです。
既定のルートフォントサイズは？
主要なブラウザすべての既定のルートフォントサイズは16pxで、<html> 要素に適用されます。これが rem の基準となるため、あなた（またはスタイルシート）が上書きしない限り 1rem = 16px です。このコンバーターはルートと親のフォントサイズの両方で16pxを既定値として使用しています。詳細パネルでどちらも変更し、自分のプロジェクトに合わせられます。
px と pt の違いは？
px（ピクセル）は画面用の標準単位で、CSSでは1/96インチと定義されています。pt（ポイント）は伝統的な印刷/タイポグラフィの単位で、1/72インチに等しいです。そのため比率は固定で 1pt = 96/72 px ≈ 1.3333px、1px = 0.75pt となります。よって 12pt = 16px で、12ptの印刷文書と16pxの画面見出しが同じ大きさに見えるのはこのためです。Webには px（または rem）を使い、pt は印刷用スタイルシートに取っておきましょう。
関連ツール
UnitConv をさらに活用しましょう。カラーコンバーターで HEX・RGB・HSL を相互変換し、CSSグラデーションを生成し、WCAGコントラスト比をチェックし、アスペクト比を求め、メインの単位コンバーターでWebを超えた長さの単位も探せます。