px / rem 変換

px値とrem値を簡単に行き来できます。基準サイズもカスタマイズでき、CSSでの余白やフォント指定がスムーズに。

このツールについて

pxとremを瞬時に相互変換できる計算ツールです。基準フォントサイズ（デフォルト16px）は自由に変更可能。デザインカンプの数値をレスポンシブ・アクセシビリティ対応のCSSに落とし込む際に活躍します。

「Figma上のマージンは24pxだけど、remに直すといくつだっけ…？」コーディングをしていると、電卓で16で割る作業を繰り返していませんか？ このツールにpx値を入れるだけで、すぐにrem単位の数値が表示されます。逆にremからpxに戻すのも簡単。プロジェクトの基準フォントサイズが変わった場合も設定を変えるだけで済むので、CSSやTailwindなどで余白や文字サイズを設計する際の心強い相棒になります。

ツール操作

px

rem

使い方

  1. pxまたはremの値を入力欄に入力します
  2. 相互に変換された値が即座に表示されます
  3. 基準フォントサイズ（デフォルト16px）は変更可能です

いつ使うか

デザインのpx指定をremに変換したい、アクセシブルなフォントサイズ設計、レスポンシブ対応の余白計算に。

使用例

16px = 1rem、24px = 1.5rem（基準16px時）。

よくある質問

pxとremの違いは？

| 項目 | px | rem |
| 種類 | 絶対単位 | 相対単位（ルート基準） |
| 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。このツールで即計算できます。

px / rem 変換は無料ですか？

無料・登録不要で利用できます。

入力データはサーバーに送られますか？

データは端末内で処理され、当サイトのサーバーには保存されません。

対応ブラウザは？

Chrome、Edge、Firefox、Safari の最新版で動作確認しています。

オフラインで使えますか？

オフラインでも基本機能は動作します（初回読み込み後）。

CLIやデスクトップアプリとの違いは？

px / rem 変換は、コマンドラインやデスクトップアプリの代替として、インストール不要ですぐ使えるオンラインツールです。

いつ使うツール？

こんなときに使います: デザインのpx指定をremに変換したい、アクセシブルなフォントサイズ設計、レスポンシブ対応の余白計算に。

使用例は？

具体例: 16px = 1rem、24px = 1.5rem（基準16px時）。

主な機能は？

px↔rem相互変換、基準フォントサイズ変更可能、レスポンシブ・アクセシビリティ対応

他の類似ツールとの使い分けは？

px / rem 変換はブラウザ完結・インストール不要が強みです。CLIやIDE拡張と併用し、手元ですぐ試したいときに使うのが効率的です。

検索キーワード・別名

px、rem、変換、レスポンシブ、フォント、px rem 換算

基本的な使い方（ワークフロー）

  1. pxまたはremの値を入力欄に入力します
  2. 相互に変換された値が即座に表示されます
  3. 基準フォントサイズ（デフォルト16px）は変更可能です

具体的な使用シーン

  • デザインのpx指定をremに変換したい、アクセシブルなフォントサイズ設計、レスポンシブ対応の余白計算に。
  • pxとremを瞬時に相互変換できる計算ツールです。基準フォントサイズ（デフォルト16px）は自由に変更可能。デザインカンプの数値をレスポンシブ・アクセシビリティ対応のCSSに落とし込む際に活躍します。
  • px↔rem相互変換
  • 基準フォントサイズ変更可能

プライバシーとデータの扱い

データは端末内で処理され、当サイトのサーバーには保存されません。

注意点

  • コピーした結果を本番環境にそのまま貼る前に必ず再確認する
  • ブラウザ拡張機能がページ動作を妨げる場合はシークレットウィンドウで試す
  • 大量データ入力時はタブを閉じずに処理完了を待つ

関連する学習コンテンツ

ツールセット

タイポグラフィセット