CSS単位換算 + Tailwindマップ
px↔rem↔em↔vw↔vh全CSS単位を一括換算。Tailwind CSSのクラス名も同時表示このツールを使えば、複雑な計算も一瞬で完了します。結果を保存して、後で見返したりシェアしたりすることも可能です。
コンテキスト設定
rem・em・vw・vhの換算に必要な環境値
px
px
px
px
よく使う root:
換算する値を入力
全単位換算結果
pxピクセル（絶対値）
16
remルートフォント基準（root=16px）
1
em親要素フォント基準（container=1200px）
0.0133
vwビューポート幅の%（vp=1440px）
1.1111
vhビューポート高さの%（vp=900px）
1.7778
ptポイント（1pt = 1.333px @ 96dpi）
12
pcパイカ（1pc = 12pt）
1
%コンテナ幅の%（container=1200px）
1.3333
ch字幅（"0"の幅, ≈0.5em 近似）
2
lh行高（≈1.5rem 近似）
0.6667
Tailwind CSS マッピングマッチあり
フォントサイズ（text-*）
スペーシング（p-* / m-* / gap-* etc.）
ブレークポイント
マッチしたTailwindクラス
このツールについて
概要
「CSS単位換算 + Tailwindマップ」は、CSSで使う全単位（px・rem・em・vw・vh・%・pt・pc・ch）を一括換算できるツールです。ルートフォントサイズ・ビューポートサイズ・コンテナ幅を設定することで正確な値を計算します。さらにTailwind CSSのフォントサイズ（text-sm等）・スペーシング（p-4等）・ブレークポイント（md:等）のクラス名が入力値に対応するものをハイライト表示します。
計算の根拠・仕組み
px基準値を中心に各単位へ換算します。rem = px ÷ ルートフォントサイズ、em = px ÷ コンテナ幅、vw = px ÷ ビューポート幅 × 100、vh = px ÷ ビューポート高さ × 100、pt = px × 72 ÷ 96（96dpiスクリーン基準）。Tailwindマッピングはv3デフォルト設定（1単位=4px, base=16px）に基づきます。
活用Tips
- •ルートフォントサイズを10pxにする「62.5%トリック」を使うと、1rem=10pxになり暗算が楽になります。`html { font-size: 62.5%; }` で設定できます。
- •Tailwindのスペーシングは基本1単位=4px（0.25rem）です。p-4は16px、p-8は32pxと覚えておくと便利です。
- •vwは画面幅に対する割合のため、スマホとPCで実際のpx値が変わります。フルードタイポグラフィ（`clamp(14px, 2vw, 20px)`等）でも活用できます。
- •em単位は親要素のフォントサイズを基準にするため、ネストが深いと計算が複雑になります。グローバルな基準値があるremの方がメンテしやすいことが多いです。
よくある質問
Q. remとemの違いは何ですか？
A. remは常にルート要素（html）のフォントサイズを基準にします。emは「その要素の親要素」のフォントサイズを基準にするため、ネストで値が変わります。アクセシビリティ面では両方ともユーザーのブラウザフォントサイズ設定を尊重できます。
Q. vwとvhはレスポンシブデザインで使えますか？
A. はい。vw（ビューポート幅の%）は横幅に比例する要素サイズや文字サイズに使えます。ただし、iOSのアドレスバーの有無でvhが変わる問題があり、最近はsvh（small viewport height）やdvh（dynamic viewport height）が推奨されています。
Q. Tailwindを使っているときにremをpxで確認したいのですが？
A. このツールにルートフォントサイズ（通常16px）を設定し、remを入力すると対応するpxが計算できます。例えば1.5remを入力するとデフォルトで24pxと表示されます。
※ 本ツールの計算結果はあくまで参考値です。実際にご利用の際は専門家にご確認ください。免責事項を確認する