PX ↔ Rem計算機

PX ↔ Rem計算機とは？

PX（ピクセル）値と Rem（root em）を相互（双方向）でリアルタイムに計算できる小さなユーティリティです。固定ピクセルの数値を Rem に換算したり、Rem を Px に戻したりして、レスポンシブデザインやアクセシビリティ対応に役立てられます。

主な機能

• PX ↔ Rem の即時計算（双方向）
• 基準フォントサイズの変更（デフォルト 16px）
• 表示の小数桁数（0〜2）の切り替え
• よく使う値の一覧（プリセット）からワンクリックでコピー

クイックスタート（3ステップ）

1. 基準フォントサイズを確認・変更（通常は 16px）。
2. 計算したい PX または Rem を入力。結果が即座に表示されます。
3. コピーボタンで値をクリップボードにコピーして、コードに貼り付けてください。

使う場面（短く）

• デザインを Rem ベースに計算するとき。
• アクセシビリティのために相対単位を採用するとき。
• デザインシステムの一貫性をチェックするとき。

計算式と換算例

基本式:

rem = px ÷ 基準フォントサイズ(px)
px = rem × 基準フォントサイズ(px)

例（基準 16px）:

• 8px → 0.5rem
• 16px → 1rem
• 24px → 1.5rem
• 32px → 2rem

/* 計算例 */
rem = px / 16
px  = rem * 16
24px -> 24 / 16 = 1.5rem
1.5rem -> 1.5 * 16 = 24px

よく使うプリセット（抜粋）

• PX: 8, 12, 14, 16, 18, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 80, 96
• Rem（基準16px）: 0.25, 0.5, 0.75, 1, 1.125, 1.25, 1.5, 1.75, 2, 2.25, 2.5, 3, 3.5, 4, 5, 6, 8

推奨設定（実務向け）

• 基準フォントサイズ: 8〜128px（推奨 16px）
• PX 値: 0〜999（多くの UI ケースで十分）
• Rem 値: 0〜64（必要に応じて拡張可）
• 表示桁数: 0〜2（通常は 0 または 1）
• スピナー step: PX = 0.5、Rem = 0.1（直接入力は任意）

よくある質問（FAQ）

Q: PX の step を 0.5 にする理由は？
A: 実務では整数 px が中心ですが、ボーダーや微調整で半ピクセルが便利な場面が多いためです。0.1 は視認上の差が小さく、操作性が落ちることがあります。

Q: 小数点以下 2 桁の表示は必要？
A: 高密度ディスプレイや特定のデザイン調整では有用ですが、多くのケースでは 0〜1 桁で十分です。