aduce ops
px / rem 変換ツール
CSS の px と rem を双方向変換。ベースフォントサイズ可変。
| Tailwind | px | rem | 用途 |
|---|---|---|---|
| p-0 / m-0 | 0px | 0rem | ゼロ |
| p-px / m-px | 1px | 0.0625rem | ヘアライン / 細線 |
| p-0.5 / m-0.5 | 2px | 0.125rem | 極細ボーダー |
| p-1 / m-1 | 4px | 0.25rem | 最小ギャップ |
| p-1.5 / m-1.5 | 6px | 0.375rem | — |
| p-2 / m-2 | 8px | 0.5rem | 小ギャップ |
| p-2.5 / m-2.5 | 10px | 0.625rem | — |
| p-3 / m-3 | 12px | 0.75rem | コンパクトパディング |
| p-3.5 / m-3.5 | 14px | 0.875rem | モバイル本文 |
| p-4 / m-4 | 16px | 1rem | デフォルト本文 / 標準パディング |
| p-5 / m-5 | 20px | 1.25rem | 大本文 |
| p-6 / m-6 | 24px | 1.5rem | 大パディング / H3 |
| p-7 / m-7 | 28px | 1.75rem | — |
| p-8 / m-8 | 32px | 2rem | H2 / セクション間 |
| p-9 / m-9 | 36px | 2.25rem | — |
| p-10 / m-10 | 40px | 2.5rem | H1 / ヒーロー |
| p-11 / m-11 | 44px | 2.75rem | — |
| p-12 / m-12 | 48px | 3rem | ディスプレイ |
| p-14 / m-14 | 56px | 3.5rem | — |
| p-16 / m-16 | 64px | 4rem | ラージディスプレイ |
| p-20 / m-20 | 80px | 5rem | — |
| p-24 / m-24 | 96px | 6rem | — |
| p-28 / m-28 | 112px | 7rem | — |
| p-32 / m-32 | 128px | 8rem | — |
| p-40 / m-40 | 160px | 10rem | — |
| p-48 / m-48 | 192px | 12rem | — |
| p-56 / m-56 | 224px | 14rem | — |
| p-64 / m-64 | 256px | 16rem | — |
このツールはすべての処理をブラウザ内で完結し、入力データをサーバーに送信しません。
px / rem / em 変換ツールとは
本ツールは CSS のサイズ指定で最もよく使う px / rem / em を、 指定したベースフォントサイズに応じて双方向に換算できるブラウザ完結型の無料ツールです。 3連の入力欄で即時に相互変換できるほか、Tailwind CSS のデフォルト spacing scale （p-4 や gap-6 に対応する px/rem 値）の対応表、 コピペで一括変換できる入力欄も用意しています。 入力データはすべてブラウザ内で処理され、当社サーバーや外部サービスに送信されることは 一切ありません。
px / rem / em の違い
CSS で大きさを指定する単位は多数ありますが、実務で登場する頻度が高いのは次の3つです。 それぞれ「何を基準に計算されるか」が異なります。
- px（pixel）：絶対単位。ブラウザの論理ピクセルに基づく固定値で、 どのコンテキストに置いても同じ大きさになる。アクセシビリティ観点では ユーザーのフォント拡大設定を無視するため、本文サイズには非推奨とされる。
- rem（root em）：ルート要素
<html>のフォントサイズを 基準とした相対単位。ユーザーのブラウザ設定に追従するため、WCAG 1.4.4（テキストのサイズ変更） 対応の観点で推奨される。多くの現代フレームワーク（Tailwind CSS、Chakra UI 等）も 内部で rem を採用している。 - em：親要素のフォントサイズを基準とした相対単位。 ネストが深くなると「親の親の親…」の計算が連鎖し（複利問題）、意図しないサイズに なることがある。コンポーネントスコープで相対的にサイズを決めたい場面 （例: ボタン内のアイコンをフォントサイズに連動させる）で有効。
ツール側の 3 連コンバータでは、実装の単純化のため em も root（ベースフォントサイズ） を基準として扱っています。実際の CSS で em を使う場合は親要素のサイズに依存するため、 DevTools の Computed タブで実際の値を確認するようにしてください。
ベースフォントサイズについて
ブラウザの既定ルートフォントサイズは 16px です。ユーザーがブラウザ設定で 「大きな文字」を選択するとこの値が変わり、rem を使っているサイトは全体が拡大されます。 設計時に「ベース 16px」を前提に rem 単位で書いておくと、この自動拡大の恩恵を受けられます。
一部プロジェクトでは html { font-size: 62.5%; }（=10px）にして「1rem = 10px」の計算しやすい状態に変える手法が紹介されていますが、 この手法はユーザーのブラウザ設定を上書きしてしまうため、 アクセシビリティ観点で避けるべきとされています。本ツールのプリセット（10 / 14 / 16 / 18 / 20）は あくまで「設計時に一時的に他サイズで計算したい」ユースケースのためのもので、 実運用のルートサイズは既定（16px）を維持することを推奨します。
rem が推奨される理由 — アクセシビリティ
WCAG（Web Content Accessibility Guidelines）2.1 の達成基準 1.4.4は「テキストのサイズは支援技術なしで 200% まで拡大できるべき」と規定しています。 px でフォントサイズを固定すると、ユーザーが「Ctrl + +」やブラウザ設定で文字を 拡大しても、該当要素は拡大されません（ズーム機能とは別）。一方 rem であれば ルート側のサイズ変更がすべての子要素に波及するため、この基準を自然に満たせます。
特にランディングページや採用サイトなど多様なユーザーが訪れるサイトでは、本文・見出し・余白は rem、ボーダーやアイコン寸法は px という 使い分けが現実的かつ保守しやすい指針となります。
em のユースケースと注意点
em が力を発揮するのは「親コンポーネントのフォントサイズに連動してスケールしたい」 ケースです。例えばボタンコンポーネントの内側パディングを padding: 0.5em 1emとすると、ボタンのフォントサイズが変わったとき（small / medium / large ボタンを 単純なフォントサイズ切替で作る設計）にパディングも比例して変わります。
一方で注意点として、ネストが深い場合は計算が複利的に膨らみます。例えばhtml が 16px、.card が 1.2em、その中の.title がさらに 1.2em だと、実寸は 16 × 1.2 × 1.2 =23.04px になります。これが深いほど予測しづらくなるため、 em は限定的な場面で使うのが無難です。
Tailwind CSS における px / rem
Tailwind CSS はデフォルトで 1 unit = 0.25rem = 4px（ベース 16px 時）の spacing scale を採用しています。p-4 なら 16px、gap-6 なら 24px、m-0.5 なら 2px となります。 本ツールの「Tailwind CSS スペーシング対応表」はこの全 28 値をベースサイズ連動で 表示します。行をクリックすると上部の px 入力欄にその値がセットされるため、 既存コードのリファクタや新規実装時の参照に使えます。
Tailwind v4 では @theme ディレクティブで spacing のベース値を 変更できるようになりましたが、デフォルトの scale は v3 と同じ値です。 独自 scale を導入している場合は本ツールでベースフォントサイズを変更し、 目的の px 値との対応を確認してください。
実務での使い分け指針
- フォントサイズ・line-height・letter-spacing: rem （アクセシビリティ重視）
- コンポーネント内のパディング・マージン・gap: rem （全体のスケールに連動させたい）
- ボーダー幅・分割線・アイコン最小寸: px （ユーザー設定で歪むと逆に不自然。1px は 1px であるべき）
- メディアクエリの breakpoint: em または px （px が最も広く使われるが、em は一部ブラウザでズーム時の挙動が素直）
- コンポーネント内部の相対的スケール: em （ボタンサイズ連動のパディング等、限定的に）
よくある落とし穴
html { font-size: 62.5% }で 1rem=10px にする手法： 計算は楽になるが、ユーザー設定を無視することになる。現代では非推奨。 どうしても計算を楽にしたいなら、プリプロセッサ関数（SCSS のrem($px)等） や CSS カスタムプロパティで解決する方が安全。- em を多用してネスト地獄になる： 前述のとおり複利で膨らむ。深い階層のコンポーネントには rem の方が可読性が高い。
- モバイル用に
font-size: 14pxを body に書く： 直感的だが rem を使っている子孫要素の計算基準はhtml（ルート）のまま。 狙い通りにならないことがある。モバイル調整は@mediaでhtmlのフォントサイズを切り替えるのが王道。 - px の小数指定（例:
1.5px）： サブピクセルレンダリングに依存し、ブラウザによってボケて見える。 可能なら整数 px か rem に寄せる。
セキュリティとプライバシー
本ツールはサーバー API を一切呼びません。入力した値もベースフォントサイズも、 すべてお使いのブラウザの JavaScript エンジン内でのみ処理されます。 社内のデザインシステムや未公開プロジェクトのサイズ指定を検討する用途でも、 情報漏洩のリスクなくご利用いただけます。