CSS px・rem変換ツール
px・rem変換ツールは、pxとremを入力するだけで瞬時に相互変換できるツールです。基準フォントサイズの変更やCSSカスタムプロパティとしての出力にも対応しています。
基準フォントサイズ（ルート）
px
この値が 1rem の基準になります
小数点桁数
CSSコード
font-size: 1rem; /* 16px */
CSSカスタムプロパティ
—:
1rem;
px⇄rem 早見表
（基準：16px）
px・rem変換ツールとは？
px・rem変換ツールは、CSSの単位であるpxとremをリアルタイムで相互変換できるブラウザ完結ツールです。基準フォントサイズの変更にも対応しているため、ルートフォントサイズが16px以外のサイトでも正確に換算できます。デザインカンプの数値をコーディングに落とし込む際や、remベースのCSS設計に統一したいコーダー・デザイナーの方に向いています。
各機能の説明
-
基準フォントサイズの変更ルートの基準サイズを自由に設定でき、16px以外の環境でも正確に換算できます。
-
px⇄rem双方向リアルタイム変換どちらの入力欄に数値を入れても、もう一方が即座に自動計算されます。
-
小数点桁数の切り替え2桁・3桁・4桁から表示精度を選べ、用途に合わせた数値に調整できます。
-
CSSカスタムプロパティ出力任意の変数名でCSS変数（–fs-base など）としてコピーでき、そのまま実装に使えます。
-
px⇄rem早見表（一括コピー対応）よく使う数値の対応表を常時表示し、:root ブロックとしてまとめてコピーできます。
-
ワンクリックコピーCSSコード・CSS変数のどちらもボタン1つでクリップボードにコピーできます。
pxとremの違いについて
-
pxは絶対単位、remは相対単位pxは常に同じ大きさですが、remはルート要素のフォントサイズを基準にした相対値です。
-
なぜ基準サイズは16pxが多いのか多くのブラウザの初期設定が16pxのため、remの基準値として広く採用されています。
-
アクセシビリティへの影響remで指定するとユーザーがブラウザ側で設定した文字サイズ変更が反映されやすくなります。
-
レスポンシブ・メディアクエリでの活用ルートのフォントサイズを変えるだけで、rem指定した要素全体を一括で調整できます。
こんなときに使う
-
デザインカンプの数値をコーディングするときFigmaなどのpx指定の数値を、remベースのCSSにそのまま変換できます。
-
デザインシステムのトークンを定義するときフォントサイズをCSSカスタムプロパティとして書き出し、そのまま登録できます。
-
既存CSSをrem統一したいときpxで書かれた既存コードを、remベースの指定に置き換える際の計算に使えます。
-
レスポンシブ調整でルートサイズを変えるときブレークポイントごとの基準サイズ変更が、実際の見た目にどう影響するか確認できます。
-
早見表で数値をさっと確認したいときよく使うpx値のrem換算を、いちいち計算せずに一覧で確認できます。
よくある質問
-
remの計算はどのように行われていますか？
入力したpx値を基準フォントサイズで割ることでremに変換しています。逆にrem値を入力した場合は、基準フォントサイズを掛けてpxを算出し、双方向にリアルタイムで反映しています。
-
入力した数値はサーバーに送信されますか？
送信されません。すべての計算はブラウザ内のJavaScriptで完結しており、入力した数値が外部サーバーに送信・保存されることは一切ありません。安心してお使いいただけます。
-
基準フォントサイズは何pxにすればいいですか？
多くのブラウザの初期値である16pxが一般的です。ただしサイト側でhtml要素のfont-sizeを変更している場合は、その値を本ツールの基準フォントサイズ欄に入力してください。
-
CSSカスタムプロパティの変数名は変更できますか？
変更できます。変数名入力欄に任意の名前を入力すると、その名前がそのままCSSカスタムプロパティのコピー内容（–任意の名前: 値）に反映されます。
-
pxとremはどちらを使うべきですか？
フォントサイズや余白などユーザーの文字サイズ設定を尊重したい箇所はremが推奨されます。border幅など変化させたくない値はpxのままで問題ありません。