px→em/rem変換ツール
基準フォントサイズを元に、pxをem・remに変換します。CSS一括変換にも対応。
単体変換
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はビューポート幅に追従するため、レイアウトや画面幅に応じた可変要素に適しています。