px / rem 変換
px値とrem値を簡単に行き来できます。基準サイズもカスタマイズでき、CSSでの余白やフォント指定がスムーズに。
▶このツールについて
pxとremを瞬時に相互変換できる計算ツールです。基準フォントサイズ（デフォルト16px）は自由に変更可能。デザインカンプの数値をレスポンシブ・アクセシビリティ対応のCSSに落とし込む際に活躍します。
「Figma上のマージンは24pxだけど、remに直すといくつだっけ…？」コーディングをしていると、電卓で16で割る作業を繰り返していませんか？ このツールにpx値を入れるだけで、すぐにrem単位の数値が表示されます。逆にremからpxに戻すのも簡単。プロジェクトの基準フォントサイズが変わった場合も設定を変えるだけで済むので、CSSやTailwindなどで余白や文字サイズを設計する際の心強い相棒になります。
ツール操作
px
rem
使い方
- pxまたはremの値を入力欄に入力します
- 相互に変換された値が即座に表示されます
- 基準フォントサイズ（デフォルト16px）は変更可能です
いつ使うか
デザインのpx指定をremに変換したい、アクセシブルなフォントサイズ設計、レスポンシブ対応の余白計算に。
使用例
16px = 1rem、24px = 1.5rem（基準16px時）。
よくある質問
pxとremの違いは？
| 項目 | px | rem |
| 種類 | 絶対単位 | 相対単位（ルート基準） |
| 1rem | — | 16px（基準16px時） |
| 用途 | 固定サイズ | レスポンシブ・アクセシビリティ |
このツールで相互変換できます。
| 種類 | 絶対単位 | 相対単位（ルート基準） |
| 1rem | — | 16px（基準16px時） |
| 用途 | 固定サイズ | レスポンシブ・アクセシビリティ |
このツールで相互変換できます。
remの基準は？
ルート要素（html）のfont-sizeが基準です。デフォルトは16pxなので1rem=16px。html { font-size: 62.5% }にすると1rem=10pxになり計算しやすくなります。
レスポンシブでremを使う理由は？
ルートのフォントサイズを変えるだけで全体がスケールするため、メディアクエリが少なくて済みます。また、ユーザーのブラウザ設定に応じて文字サイズが変わるためアクセシビリティに有利です。
1remは何px？
基準フォントサイズによります。デフォルト16pxなら1rem=16px。htmlのfont-sizeを変更している場合は、その値が1remになります。
px rem変換ツールの使い方は？
pxまたはremを入力すると相互に変換されます。基準フォントサイズ（デフォルト16px）は変更可能です。
デザインカンプのpxをremに変換するには？
このツールにpx値を入力。remに変換され、プロジェクトの基準に合わせて調整できます。
62.5%のfont-sizeとは？
16pxの62.5%=10px。1rem=10pxになり、px÷10でremが計算しやすくなります。
emとremの違いは？
emは親要素のフォントサイズが基準。remはルートが基準。remの方が予測しやすく、このツールで計算できます。
フォントサイズをremで指定する理由は？
ユーザーのブラウザ設定（文字サイズ拡大）に追随。アクセシビリティに有利です。
pxからremの計算式は？
rem = px ÷ 基準フォントサイズ。16px基準なら24px=1.5rem。このツールで即計算できます。
関連ツール
タイポグラフィセット