入力データはサーバーに送信されますか?

いいえ。すべてブラウザ内で完結します。算術計算のみで外部 API も使いません。

なぜ pt は 4/3 px ?

**1pt = 1/72 inch** (印刷標準)。一方 CSS では **1 inch = 96 px** と定義 (CSS Values and Units Module Level 4)。よって **1pt = 96/72 px = 4/3 px ≒ 1.333 px**。逆に **1px = 0.75pt**。注意: 物理的な inch ではなく「CSS の参照ピクセル」基準。スマホの 1px は物理ピクセルではなく Device Pixel Ratio で割ったロジカルピクセル。

rem と em の違いは?

**rem = root em** で、常に **html 要素のフォントサイズ** を基準にします (ページ全体で 1 つ)。一方 **em** は **親要素のフォントサイズ** が基準で、ネストすると累積的に効きます (例: 親 16px × `1.5em` × `0.8em` = 19.2px)。本ツールは em と rem を **同じ計算** で扱います (base size = root の前提)。実際のネスト要素では `em` の挙動が変わる点に注意。

ベースが 16px の根拠は?

ほとんどのブラウザ (Chrome / Firefox / Safari / Edge) の **html 要素のデフォルトフォントサイズが 16px**。Tailwind v4 も `--font-size-base: 16px` を採用。一方ユーザーがブラウザ設定でフォントサイズを大きくしている場合 (アクセシビリティ) は 16px ではなくなるので、**rem を使って書く** ことで自動的に対応できる、というのが rem 推奨の根拠。

Tailwind の text-* と rem の対応は?

Tailwind の text-* (デフォルト config): text-xs = 0.75rem (12px) / text-sm = 0.875rem (14px) / text-base = 1rem (16px) / text-lg = 1.125rem (18px) / text-xl = 1.25rem (20px) / text-2xl = 1.5rem (24px) / text-3xl = 1.875rem (30px) / text-4xl = 2.25rem (36px) / text-5xl = 3rem (48px)。**ベース 16px のときの計算**。本ツールでベース変えるとそれぞれの px 値も追従します。

「ベースを変える」って何のため?

デザインシステムの「base size」が 16px じゃないとき。例: Material Design (Android) は **14sp** が body 基準なので、Web 版で実装する時はベース 14 で計算。また、アクセシビリティで html { font-size: 62.5% } と設定 (= 10px) して `1rem = 10px` にして計算しやすくする手法もあり (この場合は base = 10)。

% は何に対する %?

CSS の `font-size: X%` は **親要素のフォントサイズに対する %**。100% = 親と同じ、150% = 親の 1.5 倍。**1em = 100%** という関係。なので本ツールでは `%` を `em × 100` で扱っています。

negative や 0 の単位は?

本ツールは負数も受け付けます (例: `-0.5rem`、`-8px` = margin で時々使う)。ただし `font-size` に負数を入れても無効 (CSS では 0 以上のみ有効)。`margin`/`transform` で活用するときは負数 OK。

vw / vh / ch / ex は対応?

対応していません。**vw (viewport width %) / vh (viewport height %)** は実行時ビューポート、**ch (0 の文字幅) / ex (x-height)** はフォント依存で、本ツールの静的な基準で固定値に変換できないため。専用ツール (vw-px-convert など) を別途追加するのが妥当。

開発へ戻る

CSS rem ↔ px ↔ em ↔ pt ↔ % 単位変換 (base size 可変)

CSS のフォントサイズ単位を一括相互変換。**1.5rem** と打つと **24px / 1.5em / 18pt / 150%** が同時に見える。ベースフォントサイズ (デフォルト 16px) はスライダーで 10〜32px に変更可能 (Tailwind は 16px、Bootstrap は 16px、Material は 14sp 等)。**rem 値の早見表** (0.25 / 0.5 / 0.75 / 1 / 1.25 / 1.5 / 1.75 / 2 / 2.5 / 3 / 4) も同時表示。CSS のレスポンシブ設計・デザインシステム移行・Tailwind class 名 ↔ 値の対応確認で重宝。

開発変換

使い方

**値 + 単位** (例: `1.5rem`、`24px`、`0.875em`、`12pt`、`75%`) を入力すると、4 つの他単位に同時変換されます。**ベースフォントサイズ** はスライダーで 10〜32px の範囲で変更可能 (デフォルト 16px は Tailwind / Bootstrap / 多くの OS のデフォルト)。`rem` と `em` は base で割って、`pt` は `4/3 px` 換算 (1pt = 1/72 inch、1 inch = 96 CSS px ≒ 72pt × 4/3)、`%` は `em × 100` で計算します。**rem 早見表** には CSS でよく使う 11 段階 (0.25 / 0.5 / 0.75 / 1 / 1.25 / 1.5 / 1.75 / 2 / 2.5 / 3 / 4) の px / em / pt を表示。Tailwind の `text-xs (0.75rem)` / `text-base (1rem)` / `text-2xl (1.5rem)` などのマッピング確認に。

詳細解説

CSS 単位変換は純粋な算術 — ブラウザ外に出る必要がない

rem / px / em / pt / % の相互変換は、ベースフォントサイズ (通常 16px) を使った算術演算です。1rem = 16px, 1pt = 96/72 px ≒ 1.333px という固定の換算比率があり、サーバーも外部データも必要ありません。「24px は何 rem か」という質問に対する答えは 24 / 16 = 1.5rem で、これはブラウザの JavaScript エンジンで即座に計算できます。

にもかかわらず「CSS 単位変換オンライン」で検索すると多くのサービスがヒットし、そこには広告・アナリティクス SDK が動作しています。入力した値が「プロダクトのデザイントークンの具体的な数値」であれば、それがアナリティクスのイベントとして収集されることへの意識が薄くなりがちです。

デザイントークンの数値が外部に出るリスク

CSS 単位変換を頻繁に行う場面は、デザインシステムのトークン定義や Tailwind の設定値の確認です。Figma のデザイン仕様書に 24px と書かれた値を CSS の 1.5rem に変換する、Material Design の 14sp をベース 16px で 0.875rem に変換する、といった操作は日常的に行われます。これらの数値は未公開プロダクトの具体的なデザイン仕様を示します。

特にカスタムのデザインシステムを構築しているプロジェクトでは、「ベースフォントサイズ何 px にしているか」「spacing のトークンが何 rem か」という情報は社外秘です。こうした数値を連続してオンラインツールに入力することで、デザインシステムの具体的なスケールが外部サービスに渡ります。

算術演算のみ: 外部通信ゼロ

本ツールの変換処理は rem = px / base, em = px / base, pt = px * 0.75, % = em * 100 という 4 つの計算式をブラウザの JavaScript 演算子で実装したものです。入力値のパース (parseFloat)・単位の識別 (正規表現) ・変換計算・結果のフォーマット (toFixed) のすべてがページメモリ内で完結します。ベースフォントサイズのスライダー変更も同じ計算を再実行するだけです。

rem 早見表の 11 段階の値も、起動時にブラウザ内で計算されます。DevTools の Network タブを開いた状態で値を入力・スライダーを動かしても、追加リクエストは発生しません。

アクセシビリティを意識した rem 設計の実践として

CSS で px を使う代わりに rem を使う主な理由は、ユーザーがブラウザの設定でフォントサイズを大きくした場合 (視力補助・アクセシビリティ設定) に、そのスケールが自動的に反映されるからです。本ツールの rem 早見表には Tailwind CSS v4 の text-xs (0.75rem) から text-5xl (3rem) までの対応表が含まれており、デザインから実装への変換を視覚的に確認できます。ベースを 16px から 14px に変えた場合の各単位の変化もスライダーで即座に確認できます。

CSS 単位の仕様的な定義と古典的な誤解

CSS Values and Units Module Level 3 (W3C Recommendation) は CSS の各単位を厳密に定義しています。px は「絶対単位」ですが、その絶対値は 物理的な 1 pixel ではなく、参照距離 28 inch から 96 DPI で見た場合の 1/96 inch (約 0.26458mm) と定義されています。これは Display と印刷物で同じ視覚サイズになるように調整された参照単位であり、デバイスの物理ピクセル数 (Retina ディスプレイの 2x / 3x の物理ピクセル) とは別の概念です。1pt = 1/72 inch、1in = 96px、1pt = 96/72 px ≒ 1.333px という関係が pt と px の間に成立します。

em と rem は 相対単位 です。em は親要素の font-size を 1 とする倍率で、.parent が font-size: 20px なら子の 1em は 20px になります。rem (root em) はルート要素 <html> の font-size を 1 とする倍率で、入れ子の深さに関係なく一定の参照点を持ちます。多くのブラウザの初期値は <html> の font-size: 16px ですが、ユーザーが設定で 18px に変えれば 1rem = 18px に切り替わります。% (パーセント) はコンテキスト依存で、font-size: 150% は親の 1.5 倍、width: 50% は親要素の幅の 50% という具合に対象が変わります。本ツールの「rem ↔ px」変換は HTML のルート要素を基準としている前提で、ネストされた em の連鎖 (em-cascade) は扱いません。

モバイル・印刷物・ハイ DPI 環境での実用上の注意

スマートフォン (特に iOS Safari と Android Chrome) は viewport meta の設定によって CSS pixel と物理 pixel の対応が大きく変わります。<meta name="viewport" content="width=device-width, initial-scale=1"> がない古いサイトでは、iPhone 上で 980 CSS pixel 幅をシミュレートし、画面を縮小して表示する挙動になります。この場合 16px の文字は物理的には極めて小さく表示され、px ベースの設計が破綻します。rem ベース + viewport meta の組み合わせが、レスポンシブデザインの標準パターンになっている理由です。

印刷物 (@media print) では DPI が画面と異なります。一般的なオフィスプリンタは 300 DPI、商業印刷は 600-1200 DPI ですが、CSS の 1in = 96px は変わらないため、印刷時の物理サイズは CSS 単位の宣言通りになります。一方で pt (@media print で多用) は印刷物の伝統的な単位で、本文 10-12pt、見出し 16-24pt が標準です。Retina / HiDPI ディスプレイ (Apple の Retina、Windows の高 DPI 設定) では物理ピクセルが CSS pixel の 2 倍・3 倍ありますが、CSS の 1px は CSS pixel 単位で扱われ、ブラウザが裏でアップスケールするため、開発者が意識する必要は通常ありません。ただし border: 0.5px solid のような hairline は HiDPI ディスプレイでのみ意味があり、通常のディスプレイでは 1px に丸められて表示される点は注意が必要です。CSS の文字以外の単位 (inch / cm / mm / vw) を一気に比較したいときは unit-convert で長さ全般を取り扱えますし、変換結果をスタイルシートに戻す前に整形しておきたいなら css-format で同じローカル AST 整形を続けて掛けられます。

よくある質問

入力データはサーバーに送信されますか?: いいえ。すべてブラウザ内で完結します。算術計算のみで外部 API も使いません。
なぜ pt は 4/3 px ?: **1pt = 1/72 inch** (印刷標準)。一方 CSS では **1 inch = 96 px** と定義 (CSS Values and Units Module Level 4)。よって **1pt = 96/72 px = 4/3 px ≒ 1.333 px**。逆に **1px = 0.75pt**。注意: 物理的な inch ではなく「CSS の参照ピクセル」基準。スマホの 1px は物理ピクセルではなく Device Pixel Ratio で割ったロジカルピクセル。
rem と em の違いは?: **rem = root em** で、常に **html 要素のフォントサイズ** を基準にします (ページ全体で 1 つ)。一方 **em** は **親要素のフォントサイズ** が基準で、ネストすると累積的に効きます (例: 親 16px × `1.5em` × `0.8em` = 19.2px)。本ツールは em と rem を **同じ計算** で扱います (base size = root の前提)。実際のネスト要素では `em` の挙動が変わる点に注意。
ベースが 16px の根拠は?: ほとんどのブラウザ (Chrome / Firefox / Safari / Edge) の **html 要素のデフォルトフォントサイズが 16px**。Tailwind v4 も `--font-size-base: 16px` を採用。一方ユーザーがブラウザ設定でフォントサイズを大きくしている場合 (アクセシビリティ) は 16px ではなくなるので、**rem を使って書く** ことで自動的に対応できる、というのが rem 推奨の根拠。
Tailwind の text-* と rem の対応は?: Tailwind の text-* (デフォルト config): text-xs = 0.75rem (12px) / text-sm = 0.875rem (14px) / text-base = 1rem (16px) / text-lg = 1.125rem (18px) / text-xl = 1.25rem (20px) / text-2xl = 1.5rem (24px) / text-3xl = 1.875rem (30px) / text-4xl = 2.25rem (36px) / text-5xl = 3rem (48px)。**ベース 16px のときの計算**。本ツールでベース変えるとそれぞれの px 値も追従します。
「ベースを変える」って何のため?: デザインシステムの「base size」が 16px じゃないとき。例: Material Design (Android) は **14sp** が body 基準なので、Web 版で実装する時はベース 14 で計算。また、アクセシビリティで html { font-size: 62.5% } と設定 (= 10px) して `1rem = 10px` にして計算しやすくする手法もあり (この場合は base = 10)。
% は何に対する %?: CSS の `font-size: X%` は **親要素のフォントサイズに対する %**。100% = 親と同じ、150% = 親の 1.5 倍。**1em = 100%** という関係。なので本ツールでは `%` を `em × 100` で扱っています。
negative や 0 の単位は?: 本ツールは負数も受け付けます (例: `-0.5rem`、`-8px` = margin で時々使う)。ただし `font-size` に負数を入れても無効 (CSS では 0 以上のみ有効)。`margin`/`transform` で活用するときは負数 OK。
vw / vh / ch / ex は対応?: 対応していません。**vw (viewport width %) / vh (viewport height %)** は実行時ビューポート、**ch (0 の文字幅) / ex (x-height)** はフォント依存で、本ツールの静的な基準で固定値に変換できないため。専用ツール (vw-px-convert など) を別途追加するのが妥当。

「送らない」を確かめるには

このツールは入力データを外部に送信しません。仕組み・監査手順・運営方針は以下で詳しく説明しています。

類似のツール

単位変換

長さ・重さ・温度・体積・面積・速度・データ容量・時間を相互変換します。入力値を 1 つ入れるだけで、同じカテゴリの全単位での換算結果を一覧表示。すべてブラウザ内で計算され、データはサーバーに送信されません。

変換計算

カラー変換 — HEX / RGB / HSL / HSV を相互

HEX・RGB・HSL・HSV をリアルタイムに相互変換できるカラーピッカー付きツール。どの欄を編集しても他の 3 表記が即座に追従。すべてブラウザ内で動作し、入力した色情報は外部に送信されません。

開発色変換

CSS 整形 — pretty / minify 切替で読みやすく / 1 行に

CSS を整形 (pretty / minify) するツール。css-tree (MIT) でパースして AST → 自前の indent ロジックで書き戻す。Mode 切替: pretty (indent 2/4/タブ、改行あり、宣言ごと改行) と minify (空白・改行を除去して最小化)。@media / @supports / @keyframes / @font-face / @import などのアットルール、calc() / var() / カスタムプロパティ (--var) 、ベンダープレフィックス、ショートハンドを保持。コメント (`/* ... */`) は css-tree の parse 仕様により破棄されます。CSS-in-JS の `${expr}` のようなプレースホルダは parse できないため、純粋な CSS を入力してください。

開発変換

Base32 / Base58 エンコード・デコード

テキストを Base32 (RFC 4648 / TOTP 2FA シークレット) と Base58 (Bitcoin アドレス) で相互変換します。方式 (Base32 / Base58) と方向 (エンコード / デコード) を切り替え可能。UTF-8 バイト列ベースで日本語・絵文字も往復。すべてブラウザ内で処理されます。

開発変換エンコードデコード