PX・REM変換ツール
ルートフォントサイズを基準にPXとREMを即座に相互変換。CSS clamp()流体タイポグラフィ、Tailwindクラス、対照表を自動生成します。
変換パラメータ設定
アクティブ基準比率1rem = 16px
Tailwind トークン一致w-6 / p-6
流体線形スロープ0.7512% vw
技術リファレンス・アーキテクチャガイド
PX・REM 相互変換ガイド — 技術リファレンス
ルートフォントサイズを基準にPXとREMを即座に相互変換。レスポンシブなCSS clamp()流体タイポグラフィ、Tailwind CSSクラス、単位対照表を精密に自動生成します。
主要パラメータと設定項目
変換対象ピクセル値 (px)絶対CSS長さ単位 (Absolute Length)
CSS参照ピクセル（W3C規格で1px = 1/96インチと定義）に基づく画面上の絶対座標長。Figma、Sketch、Adobe XD等のデザインカンプで指定された基準寸法であり、相対単位への換算元となります。
初期値: 16 px
ルート要素フォントサイズ (html rem基準)ルート相対基準値 (Baseline)
ドキュメントの最上位要素（<html>）に適用される算出フォントサイズ。モダンブラウザのW3C標準デフォルトは16pxであり、1.000rem = 16px の基底スケールを形成します。
初期値: 16 px
相対ルートEm値 (rem)相対タイポグラフィ単位 (Relative Unit)
変換対象ピクセルをルート基準値で除算して算出される相対長さ（REM = 対象px ÷ 基準px）。ブラウザの文字ズームやOSの視覚補助拡大設定に連動して動的にスケーリングします。
初期値: 1.0000 rem
流体ビューポート範囲 (最小〜最大 vw)レスポンシブ画面幅しきい値
流体タイポグラフィが画面幅に比例して無段階伸縮する対象ビューポート区間（標準：モバイル 375px 〜 デスクトップ 1440px）。下限および上限の clamp しきい値で固定されます。
初期値: 375px - 1440px
小数点の丸め精度ガード丸め小数点桁数 (Decimal Places)
変換後のrem値で保持する小数点以下の桁数。4桁（16px基準の1px = 0.0625rem）を指定することで、高DPIディスプレイでのサブピクセル丸め誤差による表示欠けを完全に防止します。
初期値: 4桁 (4 places)
Tailwind ユーティリティトークン対応値デザインシステムトークン
算出されたrem値に一致するTailwind CSS（v3/v4）のスペーシングまたはフォントサイズトークン。Tailwind標準の0.25rem（4px）刻みグリッドに基づき自動マッピングされます。
初期値: w-4 / text-base
現場のベストプラクティス・実践Tips
固定px指定のフォントサイズはWCAG 1.4.4アクセシビリティ基準に抵触
CSSで font-size: 16px のように固定ピクセルを指定すると、ロービジョン（弱視）のユーザーがブラウザ設定でカスタマイズしたフォントサイズが上書き無効化されます。モダンブラウザの文字拡大機能は、テキストがremやem単位で記述されている場合にのみ正しく追従します。ユーザーが基本文字サイズを16pxから24pxに拡大した際、rem設計のレイアウトは破綻なく比例拡大されますが、px固定のテキストは初期サイズのまま取り残され、WCAG 2.1 達成基準 1.4.4（テキストのサイズ変更）の不適合要因となります。
安易な「62.5%リセット」ハックは外部UIライブラリと競合するリスク大
1rem = 10px（16px × 0.625 = 10px）と計算しやすくするため html { font-size: 62.5% } を適用する手法が広く知られています。しかし、Radix UI、shadcn/ui、Tailwind CSS等のサードパーティ製コンポーネントライブラリは、ルートが標準の16pxであることを前提にスペーシングトークンを設計しています。このリセットを適用すると、未対応の外部UIが本来の62.5%サイズに縮小され、パディングの崩壊やアイコンボタンの位置ズレ、マイクロフロントエンド間の余白分断を引き起こす原因になります。
EMはDOM階層に応じて雪だるま式に複利計算され、REMは常に一定を保持
1remはDOMの階層深度に関係なく常にルート要素（<html>）のフォントサイズを参照しますが、1emは直親要素のフォントサイズを基準にします。例えば font-size: 0.875em を指定したリスト（<ul>）を3階層ネストすると、第1階層は14px（16 × 0.875）、第2階層は12.25px（14 × 0.875）、第3階層は10.7px（12.25 × 0.875）へと意図せず段階的に縮小してしまいます。em単位は、コンポーネント自体の文字サイズ変更に連動させたい内部パディングやボーダーの指定に限定して利用するのが鉄則です。
1pxの極細ボーダーをREMへ変換するとモバイル実機で線が消失する罠
1pxの罫線や区切り線を 0.0625rem（1 ÷ 16）に変換すると、Android端末等の非整数デバイスピクセル比（DPR 1.25倍や2.75倍など）環境においてレンダリングエンジンが端数を切り捨て処理する場合があります。画面ズームや描画タイミングによっては物理ピクセルが0pxに丸められ、テーブルの罫線やボタンのアウトラインが完全に消失する現象が発生します。ヘアライン境界線や微細なセパレーターには無理にremを使わず、明示的に 1px（または border-width: 1px）を指定してください。
よくある落とし穴とトラブルシューティング
⚠️CSS clamp() の変化率が逆転し、画面が広がるほど文字が縮小してしまう
最小ビューポート幅が最大ビューポート幅より大きく設定されているか、または最小フォントサイズが最大フォントサイズを上回っている場合に発生します。入力値が逆転すると一次関数の傾きが負数（(minFont - maxFont) ÷ deltaVw）となり、画面が拡大するにつれて文字が縮小する異常動作に陥ります。線形補間式を計算する前に、必ず minViewport < maxViewport かつ minFontSize <= maxFontSize であることを厳格に検証・反転修正してください。
⚠️CSS メディアクエリ内で html { font-size } の指定値が完全に無視される
W3C CSS Media Queries Level 4の仕様により、メディアクエリ内の相対単位（@media (min-width: 40rem) 等）は常にブラウザ初期値のデフォルトフォントサイズ（16px）を基準に評価されます。html 要素に 62.5%（10px基準）などのカスタムフォントサイズを指定していても一切反映されません。つまり 40rem のブレークポイントは常に 640px（40 × 16px）で発火し、400px（40 × 10px）にはなりません。メディアクエリのrem値は必ず標準の16pxを前提に設計してください。
⚠️Tailwind の任意値クラス（Arbitrary REM）で0.5pxのサブピクセル隙間が生じる
text-[0.9375rem]（15px）や h-[2.1875rem]（35px）のような端数を含むTailwind任意値クラスを使用すると、Chromium（Blink）とSafari（WebKit）の間で丸め処理の差異が生じ、Flexboxコンテナ内で1pxの微細なズレや予期せぬ折り返しが発生します。この問題を解消するには、Tailwind標準の4pxグリッドスケール（14pxの text-sm や16pxの text-base など）に統一するか、コンテナ境界に box-sizing: border-box と flex-shrink: 0 を明示的に付与してレイアウトを安定させてください。
よくある質問 (FAQ)
CSSにおけるPXからREMへの計算・換算方法は？▼
CSSでピクセル（PX）をREMに換算するには、対象のピクセル値をルートフォントサイズ（モダンブラウザの標準デフォルトは16px）で除算します。計算式は「REM = 対象PX ÷ 基準PX」です。例えば、24pxを換算する場合は 24 ÷ 16 = 1.5rem となります。逆にREMからPXへ戻す場合は、REM値に基準値を乗算します（PX = REM × 基準PX。例：1.5rem × 16 = 24px）。
16pxはREMで表すと何remになりますか？▼
W3C標準のデフォルトブラウザ環境（ルートフォントサイズ = 16px）において、16pxはちょうど「1.000rem」となります。16 ÷ 16 = 1 となるため、1remはWeb制作における本文テキスト（body）、段落（p）、フォーム入力欄などの基本フォントサイズの基準点（ベースライン）として広く機能しています。
タイポグラフィやレイアウトにPXではなくREMを使うべき理由は？▼
REMを採用すべき最大の理由は、ユーザーのアクセシビリティ設定を尊重できる点にあります。視覚に障がいのある方や文字を読みやすくしたいユーザーがブラウザのデフォルト文字サイズを拡大した際、REMで指定されたフォントや余白はレイアウトの整合性を保ちながら比例して拡大されます。一方、PXでハードコードされたテキストは固定サイズのまま取り残され、WCAG 1.4.4（テキストの拡大縮小）基準に違反するほか、文字潰れや視認性低下を招きます。
CSS clamp() を用いた流体タイポグラフィの計算式は？▼
CSS clamp()の数式を求めるには、最小画面幅（例：375px）での最小文字サイズ（例：16px）と、最大画面幅（例：1440px）での最大文字サイズ（例：24px）を定義します。一次関数の変化率（傾き）は (24 - 16) ÷ (1440 - 375) = 8 ÷ 1065 ≒ 0.007512 となり、切片は -375 × 0.007512 + 16 ≒ 13.183px（0.8239rem）となります。これを組み合わせた推奨値は 0.8239rem + 0.7512vw となり、最終的なCSS宣言は clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem) となります。
CSSにおけるREMとEMの決定的な違いは何ですか？▼
REMとEMの根本的な違いは「参照する基準（アンカー）」にあります。REM（Root EM）はDOMの階層深度に関係なく常に最上位の <html> ルート要素（通常16px）を参照するのに対し、EMは「直親要素」のフォントサイズを参照します。そのためEMをネストすると親のサイズが乗算（0.8em内の0.8emは0.64em）されて複利的に文字が縮小・拡大しますが、REMはどのコンポーネント深層にあっても常に予測可能で均一なスケールを維持できます。
1pxのボーダー（境界線）をREMに変換するとモバイル端末で破綻するのはなぜ？▼
1pxのボーダーを 0.0625rem に変換すると、Android端末などに多い非整数デバイスピクセル比（2.625xや2.75xなど）の画面でサブピクセルの端数丸め誤差が発生します。モバイルWebKit等のレンダリングパイプラインにおいて0.0625remが物理ピクセル0pxへ切り捨てられ、ボタンの外枠線やカードの区切り線が完全に消失してしまう不具合が発生します。極細線や微小セパレーターには無理にREMを使わず、常に明示的な 1px を維持することが推奨されます。
関連開発者ツール
全ツール一覧 →HTTPステータスコード確認開発者ツール
HTTPステータスコードの確認、リダイレクトチェーン（多段転送）の追跡、レスポンスヘッダーの解析をリアルタイム実行。1xx〜5xxのエラー原因、RFC仕様、SEO検索評価への影響、復旧手順をブラウザ完結で診断します。
ツールを開く→
正規表現チェッカー＆検証開発者ツール
正規表現のパターン一致、キャプチャグループ、構文トークン解説、置換処理をリアルタイムに検証・デバッグ・最適化します。
ツールを開く→
サブネット計算・CIDR範囲開発者ツール
IPv4サブネットマスク、CIDRネットワーク範囲、利用可能ホストIP、ブロードキャストアドレスを計算。ビット単位バイナリ検証、VLSM計画、クラウドVPC規則に対応。
ツールを開く→
2進数加算・減算計算機開発者ツール
2進数の加算・減算をリアルタイム計算。ステップごとのキャリー伝播（繰り上がり）、2の補数による符号付き演算、論理ゲート信号、16進数への相互変換に対応。
ツールを開く→
robots.txt 構文検証開発者ツール
RFC 9309規格に準拠したrobots.txtの構文検証ツール。User-Agent別のクロール許可判定、Disallowパスのデバッグ、XMLサイトマップ宣言の検査をブラウザ上で即座に実行。
ツールを開く→
Markdown HTML 変換開発者ツール
Markdown をクリーンで本番品質の HTML コードへ瞬時にリアルタイム変換。GFM テーブル、コードハイライト、XSS サニタイズ、リッチテキストコピー、完全なドキュメント出力を完備。
ツールを開く→