使い方
- 「ベースサイズ」フィールドで、プロジェクトの
html font-sizeを確認します。一般的なデフォルト値は 16px です。 - PX入力欄に、デザインの値（例:
24）を入力します。 - REM入力欄が即座に
1.5remに更新されます。逆に2remと入力して32pxを得ることもできます。 - 以下のチートシートを使用して、一般的なフォントサイズ、余白値、およびTailwindスペーシングの対応関係を参照します。
主な機能
- 即時双方向変換: 計算ボタンを押す必要なく、PXまたはREMを入力すると即座に逆の値が算出されます。
- カスタムベースフォントサイズ: デフォルトの 16px から開始するか、10px、14px、またはプロジェクト独自の設定値に切り替えられます。
- 内蔵チートシート: 12px、16px、24px、32px相当の値など、ベースサイズに応じて一般的なサイズが自動で更新されます。
- Tailwindスペーシング参照: ピクセル値に対応する一般的なTailwindスペーシングトークンを表示します。
- ローカルで高速: すべての計算はネットワークリクエストを発生させず、ブラウザのメモリ内で処理されます。
関連ツール
CSSの圧縮または整形をローカルで行います（アップロード不要）。コメントや空白の削除、ファイルサイズ削減の統計表示、読みやすさ向上のための展開に対応。
安全なJSON整形ツール。JSONの整形、検証、修復をローカルで行います。美化/圧縮、エラー箇所ハイライト、TypeScriptやZodの自動生成、XMLへの変換にすべてローカルで対応。
無料のJSONPathテスター・評価ツール：APIのJSONを貼り付けて、合致するノードの抽出、パスの確認、および結果JSONのコピーが簡単に行えます。解析とクエリ実行はすべてブラウザ上でローカルに行われます。
JSONオブジェクトや配列をブラウザ内でローカルにCSVに変換します。ネストされたフィールドをフラット化し、結果をプレビューして、データをアップロードすることなくコピーまたはCSVとしてダウンロードできます。
CSVテキストやファイルをブラウザ内でローカルにJSON配列に変換します。ヘッダーの有無、カンマ/セミコロン/Tabの区切り文字、ファイルのドラッグ＆ドロップ、コピー、ダウンロードに対応。アップロードは不要です。
ブラウザ内でローカルに2つのJSONドキュメントを比較します。セマンティック（意味的）な差分比較のためにオブジェクトのキーをソートし、順序の違いによるノイズを無視して、追加・削除・変更されたフィールドをマーク。アップロードは不要です。
JSONを1行に圧縮し、インデントや改行を削除します。元のサイズ、圧縮サイズ、削減されたバイト数および割合を比較できます。
無料のオンラインJSON TypeScript変換ツール。JSONペイロードからTypeScriptのインターフェースや型を即座に生成します。100%プライベートなクライアントサイドのコード生成です。
計算ロジック
- PXからREMへの変換式:
REM = PX / ベースサイズ - REMからPXへの変換式:
PX = REM × ベースサイズ - ブラウザのデフォルトのルートサイズでは、
16px = 1rem、24px = 1.5remとなります。
よくある質問
1remは何ピクセルですか？
ほとんどのブラウザでは、デフォルトで 1rem = 16px です。プロジェクトで html { font-size } が変更されている場合は、そのルートサイズを指定してください。
PXとREMの違いは何ですか？
PXは絶対的なピクセル単位です。REMはルートフォントサイズに対する相対的な単位であり、ユーザーのフォントサイズ設定を考慮したレスポンシブなレイアウトに適しています。
なぜ一部のプロジェクトでは 10px ベースが使用されるのですか？
チームによっては、暗算を簡単にするために html { font-size: 62.5%; } と設定し、1rem がほぼ 10px になるようにしています。これを採用する前に、アクセシビリティへの影響を検討してください。
EMへの変換にも対応していますか？
いいえ。このツールはPXとREMに特化しています。EMは現在の要素のフォントサイズに依存するため、このツールと同じ単純な変換としては扱われません。
CSSやデザインデータがアップロードされることはありますか？
いいえ。変換はサーバー計算やファイルアップロードを一切行わず、ブラウザのローカルで完結します。