px rem 変換ツール
この px rem 変換ツールは、px を rem に（またはその逆に）換算します。値と基準サイズを入れるだけで、em・pt・%・vw と主要サイズの早見表が表示されます。
計算例：値 24 · 値の単位: px（ピクセル） · ルート要素の文字サイズ（rem） 16 px · 親要素の文字サイズ（em・%） 16 px · ビューポート幅（vw） 1,440 px → 結果：24 px = 1.5 rem。出典：W3C – CSS Values and Units Module Level 4: absolute lengths (1in = 96px = 72pt) と font-relative lengths (em, rem)。更新日：
計算方法
ブラウザの初期値16 pxなら、24 pxはちょうど1.5 remです。式は rem = px ÷ 基準サイズ、逆は px = rem × 基準サイズです。
計算のしくみ
rem はルート要素（html）の文字サイズ、em は親要素の文字サイズが基準です。1 pt は 1/72 インチ、1 px は 1/96 インチなので 1 pt = 4/3 px で、12 pt は 16 px になります。文字サイズの % は親要素の文字が基準で、1 vw はビューポート幅の 1 % です。このツールは、入力値をいったん px に直してから、すべての単位に換算します。
知っておくと便利
- 訪問者がブラウザの文字サイズを大きくしている場合、rem は自動で拡大されますが、px は固定のままです（アクセシビリティ、WCAG 1.4.4）。
- CSSで
html { font-size: 62.5% }と指定している場合は 1 rem = 10 px です。基準サイズに 10 を入力してください。 - em は入れ子で累積します。1.5 em の要素の中の 1.5 em は 2.25 倍になります。rem ならこの問題は起きません。
- 余白や文字サイズには rem がよく使われ、細い線や枠線には px が今も適しています。
よくある質問
px を rem に変換するには？
px の値を基準の文字サイズで割ります。16 px なら 24 px ÷ 16 = 1.5 rem です。
1 rem は何 px ですか？
初期値は 16 px です。ブラウザがルートの文字サイズをそう設定しているためで、ユーザーが設定を変えたり html に font-size を指定したりすると変わります。
em と rem の違いは？
rem は常にルート（html）の文字サイズが基準、em は親要素の文字サイズが基準です。そのため em は入れ子の要素で倍々になることがあります。
16 px は何 pt ですか？
12 pt です（1 pt = 4/3 px）。逆に 10 pt は約 13.33 px です。
出典・根拠
- W3C – CSS Values and Units Module Level 4: absolute lengths (1in = 96px = 72pt) と font-relative lengths (em, rem)
- MDN – CSS-Längeneinheiten (rem, em, vw)
- W3C WCAG 2.2 – Success Criterion 1.4.4 Resize Text (相対単位はユーザーが設定した文字サイズを尊重する)
更新日： · 編集方針
関連ツール
- px cm 変換ツールpx cm 変換ツール：解像度（dpi）をもとにピクセルをcm・mm・インチへ、長さをピクセルへ変換し、写真が300dpiで印刷できるサイズと対応する用紙も表示します。
- CSSグラデーション ジェネレーターCSSグラデーションを作成。線形・円形・扇形に対応し、カラーストップと角度を自由に設定。プレビューを見ながら、そのまま使えるCSSをコピーできます。
- CSS box-shadowジェネレーターCSSのbox-shadowをスライダーで作成。複数の影、オフセット、ぼかし、広がり、透明度付きの色、inset、プリセットに対応し、プレビューを見ながらCSSをコピーできます。
- CSS角丸ジェネレーター（border-radius）スライダーでCSSの角丸を作成できるborder-radiusジェネレーターです。四隅まとめて・個別、pxと％、楕円の8値指定に対応。最短のコードをプレビューしてコピー。
- 欧文フォントの組み合わせ（見出し＋本文）欧文フォント 組み合わせ：見出しと本文の英語フォントのペア8組をその場でプレビュー。x-ハイト、OSごとの表示、コピーできるCSSつき。Webフォント不要です。
- カラーコード変換：HEX・RGB・HSL・HSV・CMYKカラーコードを変換します。HEXからRGB、RGBからHEX、HSL・HSV・HWB・CMYKへ一括変換。どの形式で入力しても自動で判別し、結果はコピーできます。
- IPアドレス確認IPアドレス確認サイト。あなたのグローバルIPアドレス（IPv4・IPv6）をすぐに表示し、おおよその地域とプロバイダーもわかります。無料で、IPアドレスは保存しません。
- CSS clamp計算ツールCSS clamp計算ツール。最小値・最大値とビューポートの範囲を入れるだけで、フォントサイズや余白のclamp()をすぐに作成。コピーして使えます。無料・登録不要です。
- robots.txtチェックとサイトマップ確認URLがGooglebot・Bingbot・AIクローラーにブロックされているかをrobots.txtチェックで確認。決め手のルール、書式の誤り、サイトマップの問題も表示します。