PX・Rem計算ツールとは？

ピクセル（PX）とRem単位を相互変換できるツールです。デザインカンプの固定ピクセル値をRem単位に変換したり、逆にRemをピクセルで確認できます。レスポンシブデザインやアクセシビリティを意識したサイト制作で、相対単位での実装をサポートします。

使い方

基準フォントサイズを設定し、PXまたはRemの値を入力するだけ。変換結果がリアルタイムで表示されます。コピーボタンで値をクリップボードにコピーし、そのままコードに貼り付けられます。

よく使う値は一覧表から選んでワンクリックでコピーできるため、素早く作業を進められます。

こんな時に便利

CSSでフォントサイズや余白を指定する際、固定ピクセルではなくRem単位で記述したい場合に活躍します。デザインシステムで基準サイズを統一している場合や、ユーザーのブラウザ設定に応じて文字サイズを可変にしたい場面で役立ちます。

具体的な活用例:

• デザインツールで作成した24pxのマージンを1.5remに変換
• ブラウザのデフォルト16pxを基準に、見出しサイズを2rem（32px相当）で設定
• アクセシビリティガイドラインに沿って、相対単位でのレイアウト実装

計算の仕組み

基準フォントサイズ（通常は16px）を元に、以下の式で計算します:

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

計算例（基準16pxの場合）:

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

よく使う値の一覧

ピクセル値:
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

設定のポイント

基準フォントサイズ

ブラウザのデフォルトは通常16pxですが、プロジェクトの要件に応じて変更できます。8〜128pxの範囲で設定可能です。

表示桁数

小数点以下の表示桁数は0〜2桁で切り替えられます。通常は0または1桁で十分ですが、高精度なレイアウト調整が必要な場合は2桁表示も選べます。

入力のステップ値

スピナーボタンで値を増減する際、PXは0.5刻み、Remは0.1刻みで変動します。直接入力では任意の値を指定できます。

FAQ

なぜPXのステップは0.5なの？

実際の制作では整数ピクセルがメインですが、ボーダーの太さや細かな調整で0.5pxを使うケースがあるためです。0.1px刻みだと見た目の変化が小さすぎて操作しづらくなります。

小数点2桁まで必要？

Retinaディスプレイなど高密度な画面や、厳密なデザインシステムでは2桁表示が役立つ場面もあります。ただ、多くの実装では0〜1桁で問題ありません。