CSS単位変換ツール
CSSの長さの単位（px・rem・em・pt・%）をブラウザー内でリアルタイムに変換。ルートフォントサイズを設定すると、すべての単位が即座に更新されます。
すべての変換はブラウザー内でローカルに計算され、入力した値がアップロードされることはありません。
CSSの色を扱っていますか？CSSカラー変換ツールをお試しください。
CSS単位変換ツール について
このCSS単位変換ツールは、ある単位で入力した長さを、他のすべてのCSS単位（px・rem・em・pt・%）へ一度に変換します。いずれかのフィールドに値を入力すると残りがリアルタイムに更新されるため、px to rem や pt to px の結果を手計算なしで読み取れます。ルートフォントサイズの入力欄（デフォルト16px）が rem・em・% の関係を制御し、ブラウザーがページのフォントサイズに対して相対単位を解決する仕組みを再現します。組み込みのクイックリファレンスは、デザイナーがよく使うpx→remの値（12・14・16・24・32など）を選んだ基準値で表示します。各結果にはコピーボタンが付いており、そのままスタイルシートに貼り付けられます。すべてはブラウザー内で動作するため、入力した値はお使いのデバイスに留まります。
機能
- いずれかのフィールドに入力した瞬間に px・rem・em・pt・% を相互変換
- 設定可能なルートフォントサイズが rem・em・% を制御し、結果がCSSと一致
- CSSの96/72係数を用いた正確なpt変換（1pt = 1.3333px）
- % をルートフォントサイズに対する割合として扱う（フォント相対のCSSと同様）
- 選んだ基準値での一般的なpx→rem値（12・14・16・24・32）のクイックリファレンス表
- 結果を適切な精度に丸め、末尾のゼロを落としてきれいな値に
- 各単位にワンクリックコピー（単位の接尾辞付き）
- 前回の値と基準フォントサイズを次回訪問時まで記憶
CSS単位変換ツール の使い方
- ブラウザーのデフォルト16pxと異なる場合は、ルートフォントサイズを設定します。
- いずれかの単位フィールド（px・rem・em・pt・%）に値を入力します。
- 他のすべての単位での相当値がリアルタイムに更新されるのを確認します。
- 単位の隣のコピーボタンをクリックして、接尾辞付きで値を取得します。
- 選んだ基準値での一般的なpx→remのペアにはクイックリファレンス表を使います。
例
入力
/* root font-size: 16px */
.card { padding: 24px; }
出力
.card { padding: 1.5rem; }
/* 24px = 1.5rem = 18pt = 150% at base 16px */
16pxの基準では、24pxは1.5remに相当します。レイアウトをremに切り替えるのに便利です。
よくあるエラーとトラブルシューティング
- pxは正しいのに rem や % の結果がおかしく見える。 — ルートフォントサイズを確認してください。rem・em・% はその基準値に対して解決されるため、:root や html 要素の font-size に合わせて設定します。
- ptがデザインツールで見る値と一致しない。 — この変換ツールは 1pt = 96/72 px（1.3333px）というCSSの定義を使います。印刷やDTPのツールは72dpiを前提とすることがあり、その場合は 1pt = 1px になります。
- em と rem が同じ数値になるが、異なると思っていた。 — この変換ツールは簡潔さのため両方に単一の基準値を使います。実際のCSSでは em は要素自身のフォントサイズ、rem はルートに対する相対なので、親が font-size を変えたときだけ両者は分かれます。
- ルートフォントサイズを空にするとフィールドがクリアされる。 — 空またはゼロの基準値は無効として扱われ、16pxにフォールバックします。rem・em・% を自分で制御するには正の数を入力してください。
よくある質問
- pxをremに変換するには?
- ピクセル値をpxフィールドに入力してremフィールドを読みます。remは値をルートフォントサイズで割ったものなので、デフォルトの16px基準では16pxが1rem、24pxが1.5remになります。
- remをpxに変換するには?
- 値をremフィールドに入力してpxを読みます。rem to px は値をルートフォントサイズで掛けたものなので、16px基準での2remは32pxです。
- 変換ツールはどの基準フォントサイズを使いますか?
- 標準のブラウザーのルートフォントサイズである16pxがデフォルトで、「Root font size」フィールドで変更できます。その基準値がすべての rem・em・% の結果を制御し、スタイルシートと一致させます。
- ここでなぜ 1pt が 1.3333px になるのですか?
- CSSでは 1pt を 1/72 インチ、1px を 1/96 インチと定義しているため、1pt = 96/72 px = 1.3333px です。だからこそ12ptが本文によく使われる16pxにちょうど変換されます。
- em と rem の違いは何ですか?
- remはルートフォントサイズに対する相対、emは要素自身のフォントサイズに対する相対です。このツールは簡潔さのため両方に単一の基準を使うため同じ値になります。rem側をモデル化するにはルートフォントサイズを設定してください。
- 変換はサーバーで行われますか?
- いいえ。CSS単位の変換は単純な算術で完全にブラウザー内で実行されるため、入力した値はお使いのデバイスに留まります。
関連ツール
すべての ArrayKit ツール