CSS単位変換ツール（px / rem / em）
換算値
px16px
rem1rem
em1em
pt12pt
%100%
関連する外部サイト
一部のリンクはアフィリエイトリンクを含みます。
関連ツール
カラーフォーマット変換色をHEX/RGB/HSL/HSV/CMYKに変換し、CSS・SwiftUI・Android・Flutter向けの貼り付け用コードをコピー。すべてブラウザ内で動作。Base64 変換テキストと Base64 を相互変換。日本語・絵文字も文字化けしない（UTF-8 対応）、URL セーフ Base64、画像を data URL に変換。ブラウザ完結・送信なし。Flexbox プレイグラウンドflex-direction/justify-content/align-items/wrap/gap をボタンで切り替え、ライブプレビューしながらCSSをコピー。ブラウザ完結・送信なし。CSS clamp() ジェネレーター最小/最大サイズとビューポート範囲から、レスポンシブな文字/余白用の流体 CSS clamp() を生成しプレビュー。ブラウザ完結・送信なし。
px・rem・em・pt・%のCSS単位を相互変換します。remはルートフォントサイズに、emと%は親（ベース）フォントサイズに依存するため、両方を設定できます（デフォルトはブラウザ標準の16px）。値を入力して単位を選ぶと、すべての換算値が一覧表示されます。
使い方
- 値を入力し、元の単位を選択します。
- ルートフォントサイズと、em・%用のベースサイズを設定します。
- 各単位の換算値を確認またはコピーします。
仕組み
すべての値はまずpxに変換されます。remはルートフォントサイズ倍、emはベース（親）フォントサイズ倍、ptはCSSの96/72の比率、%はベースサイズに対する割合として計算します。pxからそれぞれの単位へ逆変換することで、例えば16pxルートで1.5remは24px、12ptは16pxとなります。
機能
全単位を一覧表示
1つの値に対して、px・rem・em・pt・%をまとめて確認できます。
カスタムルート・ベース
rem・em・%が依存するルートフォントサイズと親フォントサイズを自由に設定できます。
任意の単位をコピー
CSSに必要な値を1クリックでコピーできます。
プライバシー重視・即時変換
すべての変換はブラウザ内で完結し、データは送信されません。
活用シーン
レスポンシブデザイン
ピクセル値のデザインをスケーラブルなremに変換します。
アクセシビリティ
ユーザーのフォントサイズ設定を尊重するremを活用できます。
コンポーネント
コンポーネントのフォントサイズを基準にemの値を算出します。
印刷スタイル
印刷用CSSのptとpxを相互変換します。
注意事項
- remはルート（html）フォントサイズを基準とします。
- emと%は親（ベース）フォントサイズを基準とします。
- ptは標準の96/72の比率を使用します（1pt ≈ 1.333px）。
- 計算はすべてデバイス上で行われ、データは送信されません。
よくある質問
- remとemの違いは何ですか？
- remはルートフォントサイズを基準にしますが、emは親要素のフォントサイズを基準にします。両方のサイズをここで設定できます。
- デフォルトが16pxなのはなぜですか？
- ほとんどのブラウザのルートフォントサイズのデフォルトが16pxなので、変更しない限り1rem = 16pxになります。
- ptはどのように変換されますか？
- CSSの96/72の比率を使用するため、1ptは約1.333px、12ptは16pxになります。
- %は何を基準に変換されますか？
- emと同様に、ベース（親）フォントサイズを基準にします。100%はベースサイズと同じです。
- データはアップロードされますか？
- いいえ。すべての変換はブラウザ内で完結し、データがデバイスの外に送られることはありません。