px→em/rem変換ツール

基準フォントサイズを元に、pxをem・remに変換します。CSS一括変換にも対応。

最終更新: 2025/12/29 デザイン
単体変換
1.5rem
em/rem = px値 ÷ 基準フォントサイズ
CSS一括変換
変換オプション
入力CSS
出力CSS

使い方

1

基準フォントサイズを設定

ブラウザのデフォルトは16px。親要素のfont-sizeに合わせて調整してください。

2

単体変換 または CSS一括変換

単体のpx値を変換するか、CSSコードを丸ごと入力して一括変換します。

3

結果をコピー

変換結果をコピーしてご利用ください。

px→em/rem変換とは

em・remは相対的なサイズ単位です。emは親要素のフォントサイズを基準に、remはルート要素(html)のフォントサイズを基準にします。ユーザーがブラウザのフォントサイズを変更しても適切にスケールするため、アクセシビリティに配慮したデザインに有効です。

機能

  • 単体変換px値を入力するだけで即座にem/rem値を計算
  • CSS一括変換CSSコードを丸ごと入力して、すべてのpx値を一括変換
  • em/rem切替出力単位をemとremで切り替え可能
  • 変換オプション1px以下やborderなど、変換対象を細かく制御可能

活用シーン

  • アクセシビリティ対応のコーディング
  • スケーラブルなタイポグラフィ設計
  • コンポーネントベースの余白設計
  • 既存CSSのrem化リファクタリング
  • デザインシステムの単位統一

よくある質問

emとremの違いは何ですか?
emは親要素のfont-sizeを基準に計算されます。remは常にルート要素(html)のfont-sizeを基準にするため、ネストの深さに関係なく一貫したサイズになります。
基準フォントサイズ16pxはどこから来ていますか?
多くのブラウザでデフォルトのフォントサイズが16pxに設定されています。特に変更していなければ、16pxを基準にするのが一般的です。
remとvwはどう使い分けますか?
remはユーザーのフォント設定に追従するため、テキストやテキストに関連する余白に適しています。vwはビューポート幅に追従するため、レイアウトや画面幅に応じた可変要素に適しています。