複数ルールからテキスト一括置換ツール【px ↔ em】
複数の置換ルール(JSON配列データ)から、テキストを一括で置換します。
▼テキストを入力してください
▼置換ルール(px → em)
ルール数: 0件(〜2000px対応)
▼変換結果
▼逆変換ルール(em → px)
ルール数: 0件
使い方
左側のテキストエリアにCSSコードを入力し、「変換」ボタンをクリックすると、右側に変換結果が表示されます。逆変換も可能です。
💡 主な機能
- px → em 変換: CSSのpx単位をem単位に一括変換(16px = 1em)
- em → px 変換: 逆方向の変換も可能
- 広範囲対応: 0.1px〜2000px(0〜160pxは0.1px刻み、161〜2000pxは1px刻み)
- calc()対応:
calc(16px + 2em)のような複雑な記述も変換 - clamp()対応:
clamp(15px, 5vw, 30px)も変換可能 - 自動コピー: 変換結果は自動でクリップボードにコピー
🎯 活用例
- レスポンシブ対応: px指定のCSSをem単位に変換してアクセシビリティ向上
- デザインカンプ反映: Figma/XDのpx値をem値に一括変換
- 既存CSS改修: 古いpx指定のCSSをモダンなem指定に移行
- 確認用逆変換: em値が何pxか確認したいときに逆変換
⚙️ 対応パターン
margin: 16px; → margin: 1rem;
padding: 32px 16px; → padding: 2rem 1rem;
calc(100% - 32px) → calc(100% - 2rem)
clamp(16px, 5vw, 32px) → clamp(1rem, 5vw, 2rem)
font-size:16px; → font-size:1rem; /* コロン直後も対応 */