px から rem への変換ツール
ピクセル値ひとつを rem に直す計算は単純ですが、実務ではその後のサイズ設計が重要です。フォントサイズ一式を同じ比率でそろえる、レスポンシブな見出しを画面幅に応じてなめらかに変える、古いスタイルシートに散らばった大量の px を安定して置き換える——このツールはそうした作業をまとめて扱います。まず、選んだルートフォントサイズを基準に px・rem・em・pt・パーセントを連動させます。どれかひとつを変えれば、残り 4 つもその場で更新されます。そのうえで「タイプスケール」タブは基準値と比率から rem のステップ一式を作り、「フルイド clamp()」タブはサイズと画面幅の折れ線を描いて、どこから大きくなりどこで上限に達するかを示します。「一括 CSS」タブでは CSS のかたまりの中の px をまとめて rem に書き換えられます。並んだアクセシビリティパネルは、読者がブラウザの文字サイズを上げたとき、rem で書いたサイズは一緒に大きくなり、px で書いたサイズは固定されたままであることを示します。計算はすべてブラウザ内で行われ、本番のコードを貼り付けても外部へ送信されません。
- 調整可能なルートと親フォントサイズを基準に、px・rem・em・pt・パーセントをリアルタイムに連動
- 読者がブラウザの文字サイズを上げると rem は一緒に拡大し px は動かない様子をライブ表示
- 基準サイズと音程比率からモジュラータイプスケールを作り、:root の CSS 変数として書き出し
- サイズと画面幅の折れ線とドラッグできるプレビュー幅を添えて、clamp() でフルイドな文字を構築
- CSS ブロック内の px をまとめて rem に書き換え、0 と 1px のヘアライン値は保持可能
ルートフォントサイズが rem を決めます（既定 16px）。em と % は隣の親フォントサイズを基準にします。
いろは にほへと
ブラウザは読者が既定の文字サイズを決められます。rem はその設定に合わせて大きくなり、px は固定されたままです。読者がルートを上げたとき、同じサイズがどう振る舞うかを示します。
概要
単位の計算は、この作業でいちばん気楽なところです。手を止めさせるのはむしろ、サイズ一式を同じ比率に保つこと、フルイドサイズをうまく収めること、そして px だらけの古いスタイルシートを直すこと。だからそれらの仕事を変換の隣に置き、タブひとつで行き来できるようにしました。
- 01
5 つの単位をまとめて
px・rem・em・pt・パーセントのどれかに入力すると、設定したルートと親フォントサイズを基準に残りが再計算され、各行にコピーボタンが付きます。
- 02
アクセシビリティを可視化
同じ値をブラウザのルート 16・20・24px で並べて表示します。rem は設定に合わせて大きくなり、px は固定されたままなので、違いをすぐ確認できます。
- 03
モジュラータイプスケール
基準サイズを決め、比率を選び——長 3 度でも黄金比でも——上下のステップ数を指定すれば、各段の px と rem が並んで出てきます。
- 04
フルイド clamp() ビルダー
最小と最大のビューポートにそれぞれサイズを与えると rem の clamp() が手に入り、その 2 つの幅の間をサイズがどう動くかを折れ線が示します。
- 05
スタイルシートの一括書き換え
CSS のかたまりを貼り付ければ、中の px を一括で rem に置き換えられます。逆向きにも対応し、0 と 1px のヘアライン値は保持できます。
- 06
そのまま貼れる出力
スケールの各段は CSS 変数として、clamp() は rem で出力し、一括結果は元のインデントと書式を保つので、そのまま戻せます。
使い方
ページを離れず電卓も使わずに、1 回の変換から、一貫していてアクセシビリティも織り込んだサイズ設計まで進めます。
- 01
「単位変換」でルートフォントサイズを設定し、どれかの単位に値を入れて px・rem・em・pt・% をまとめて読みます。
- 02
アクセシビリティパネルをちらりと見て、読者が文字サイズを上げたとき値がどこまで大きくなるかをつかみます。
- 03
「タイプスケール」に切り替え、基準と比率を決め、生成された rem の各段を CSS 変数としてコピーします。
- 04
「フルイド clamp()」を開き、2 つのビューポートに最小と最大のサイズを与え、返ってきた clamp() をコピーします。
- 05
「一括 CSS」に進み、スタイルシートを貼り付けて px をまとめて rem に変換し、そのまま戻します。
詳細
ウェブ上のサイズは、つまるところ値・ルート・読者の設定という 3 者の関係です。だからこのツールは、皆が固定の 16px にとどまっている前提を置かず、その一つひとつを表に出しておきます。
- ルートを 16px より上や下に置くプロジェクトにも合う、調整可能なルートフォントサイズ
- ルートに押し込めず正しい文脈で em と % を計算するための、独立した親フォントサイズ入力
- どれを編集しても残り 4 つが付いてくる、連動する 5 つの単位
- 読者のルート 16・20・24px で rem を px と並べて見せるアクセシビリティパネル
- 短 2 度から黄金比までの 8 つの比率で、タイプスケールがワンクリック
- ピクセル換算値をコメントに添えた、:root カスタムプロパティとしてのスケール出力
- サイズの伸びが見える、チャートとドラッグ可能なプレビュー幅付きのフルイド clamp() ビルダー
- 0 と 1px を残す選択でヘアライン枠を守れる、CSS ブロック全体の一括変換
- 見落としがすり抜けないよう、一括のたびに件数を表示
- 変換・スケール・clamp()・一括はすべてローカルで動作——アップロードなし、保存なし
活用シーン
px から rem への変換が一度で終わることはめったにありません。その裏にはたいてい、維持すべきスケール、調整したいフルイド見出し、現代化したい古いスタイルシートがあります——そのどれにも、ここには専用のタブがあります。
-
デザインを rem へ移す
モックアップのピクセル値を rem に直し、文字と余白が読者のブラウザ文字サイズ設定に従うようにして、アクセシビリティを押さえます。
-
タイプスケールを組む
基準と比率からひとそろいの調和したフォントサイズを生成し、その rem 変数をそのままデザインシステムに入れます。
-
フルイドなレスポンシブ見出し
スマホからデスクトップへゆるやかに大きくなる見出しを clamp() で調整し、公開前に任意の画面幅での正確なサイズをプレビューします。
-
古いスタイルシートの現代化
至る所に px を直書きした古い CSS を貼り付けて rem に一括変換し、ヘアライン枠とゼロ値はそのまま残します。
-
単位をチームの取り決めにそろえる
仕様が px でも pt でも em でも、換算係数を頭で計算せずに、コードベースが採用した単位へ変換します。
-
チームメイトに rem を説明
レビューでアクセシビリティパネルを開き、rem のコンポーネントがユーザーの拡大を尊重し、px のものはしない理由をはっきり示します。
-
既定でないルートで作業
ルートをあえて 62.5% などにするプロジェクトもありますが、ルートを入力項目にしてあるので rem はちゃんと合います。
-
フルイドな余白と間隔
同じ clamp() の考え方をパディング・マージン・グリッドの間隔に広げ、文字だけでなく余白も画面幅に合わせて伸縮させます。
関連情報
サイズが決まれば次はレイアウトなので、 Flexbox と Grid レイアウト生成 で構造を組み、サイズの定まった要素が動いたり遷移したりするときは、 三次ベジェ曲線ジェネレーター でタイミングを整えると、余白・レイアウト・動きが同じ練られた体系から生まれます。
使い方のヒント
ちょっとした習慣があれば、単位の選択は一貫してアクセシブルに保てます。px と rem がまだらに混ざって読者の設定と衝突する、という事態を避けられます。
- フォントサイズにはまず rem を。文字が読者のブラウザ文字サイズと拡大を尊重します。
- 明確な理由がない限り、ルートはブラウザ既定の 16px に置いておきます。
- 文字と一緒に拡大すべき余白には rem を、ヘアライン枠や固定の細部には px を使います。
- 値が自分の要素のフォントサイズに追従すべきとき（ボタン内側のパディングなど）は em にします。
- タイプスケールはひとつの基準と比率に錨を下ろし、コンポーネントごとに目分量で選ばないこと。
- フルイドなサイズは clamp() に任せれば、見出しが画面幅に適応し、大量のメディアクエリを省けます。
- ルートフォントサイズを px で設定しないこと。一部のブラウザではユーザーの拡大が効かなくなります。
- rem の値は適度に丸め、長い小数でスタイルシートを読みづらくしないようにします。
制限事項
このツールは CSS の長さ単位と、それらで組むサイズ体系に的を絞っているので、隣り合ういくつかの事柄はあえて外に置いています。
- 変換するのは CSS の長さ単位です。vw や vh は実行時の画面サイズ次第で、フルイドビルダー内でのみモデルに加わります。
- 変換は標準の 96 DPI を基準とし、CSS が定めるとおり 1pt は 1.333px、1in は 96px です。
- ここでの em と % は単一の親フォントサイズで求めます。実ページの入れ子の継承は、積み重なると別の結果になり得ます。
- 一括モードは完全な CSS 解析ではなくテキスト置換で px と rem を書き換えるので、異常な入力や圧縮済みの入力は確認してください。
- アクセシビリティパネルが示すのはブラウザの文字サイズ拡大で、コントラストやフォーカス順序などの他の確認の代わりにはなりません。
- clamp() 出力は 2 つのビューポート間の直線補間を扱うもので、実機での検証に取って代わるものではありません。
よくある質問
px から rem への変換、単位の選び方、そして CSS でアクセシブルかつフルイドなサイズを作ることについて、いちばんよく挙がる質問です。
px を rem に変換するには？
ピクセル値をルートフォントサイズで割ります。既定のルート 16px なら 24px は 24 ÷ 16 = 1.5rem です。「単位変換」に任意の px 値を入れると、設定したルートを使って rem がすぐ出ます。
rem の既定のルートフォントサイズは？
ブラウザは既定で 16px なので、スタイルシートがルートを変えない限り 1rem は 16px です。本ツールも既定 16px で、プロジェクトがルートを上書きする場合は別の値に切り替えられます。
フォントサイズは rem と px のどちらを使うべき？
フォントサイズは rem 寄りに。rem は読者のブラウザ文字サイズと拡大に合わせて大きくなるので文字がアクセシブルに保たれ、px のフォントサイズはその設定を無視します。アクセシビリティパネルがその違いを目の前に出します。
rem と em の違いは？
rem は常にルートフォントサイズが基準で、ページ全体で見通しが利きます。em は現在の要素のフォントサイズが基準で、入れ子で積み重なります。本ツールはそれぞれのルート入力と親入力で両者を変換します。
では rem を px に戻すには？
rem 値にルートフォントサイズを掛けます。16px のルートで 1.5rem は 24px です。「単位変換」で基準単位を rem に切り替えるか、「一括 CSS」で rem → px を選んでブロックごとまとめて変換します。
clamp() でフルイドなフォントサイズを作るには？
「フルイド clamp()」を開き、最小と最大のビューポートにそれぞれサイズを与え、生成された rem の clamp() をコピーします。隣の折れ線が、その 2 つの幅の間をサイズがどう動くかを描きます。
スタイルシート全体を px から rem へ一度に変換できますか？
できます。CSS を「一括 CSS」に貼り付けると、中の px 値を一括で rem に書き換えられます。px から rem に変換するときは 0 と 1px を残せるので、文字サイズに合わせて拡大させたくないヘアライン枠に役立ちます。
変換のときに何かアップロードされますか？
いいえ。変換、スケール生成、clamp() 計算、一括書き換えはすべてブラウザ内で行うので、本番の CSS や未公開のデザイン値を貼り付けても、それはローカルにとどまります。
関連ツール
単位は、その後のレイアウトの基礎です。サイズが定まったら構造と動きを整え、インターフェース全体を同じ尺度体系にそろえられます。