px rem 変換ツール
px rem 変換ツール + 1〜128px 早見表 | We.Inc
任意のルートフォントサイズでpxをremに、remをpxに変換できます。Tailwindクラス付きの1〜128px早見表、CSSブロック変換、可変サイズ用のclamp()ヘルパーもあります。
px rem 変換ツール
ピクセルをremにするには、ピクセル値をルートフォントサイズで割ります。ブラウザーのデフォルトである16pxなら、24pxは1.5rem、12pxは0.75remです。どちらかの欄に値を入力すれば双方向に変換できます。サイトが別の基準を使っているならルートサイズを変更し、CSSルールをまとめて貼り付けることもできます。
デフォルトの16pxルートでのよく使うサイズ
ルートサイズを指定できる双方向の変換ツール、対応するTailwindクラス付きの1〜128ピクセルの早見表、CSSブロックをまとめて変換する機能、そして可変サイズのclamp()を書き出すヘルパーをそろえています。
- ルートフォントサイズを設定します。スタイルシートでhtml要素に別のサイズを指定していない限り、16のままにしておきます。
- ピクセル欄に入力するとremが、rem欄に入力するとピクセルが得られます。どちらも入力と同時に更新されます。
- 表をスクロールして、1〜128ピクセルの任意のサイズを探します。行をクリックするとそのrem値をコピーできます。
- CSSをブロック変換に貼り付けると、すべてのpx値を一度にremに切り替えます。ゼロは0になり、1pxのボーダーは、そのオプションのチェックを外さない限りピクセルのまま残ります。
- clamp()ヘルパーを使うと、スマートフォンとデスクトップの幅の間でなめらかに大きくなるフォントサイズが得られます。
- htmlのフォントサイズは62.5%にせず、100%（ブラウザーのデフォルト）のままにしましょう。62.5%のテクニックで1remは10pxになりますが、16pxを前提にしたサードパーティのコンポーネントがすべて縮んでしまいます。
- フォントサイズとほとんどの余白にはremを使いましょう。そうすれば、ブラウザーのデフォルト文字サイズを大きくした人にもレイアウト全体が合わせて拡大されます。
- 極細のボーダーやbox-shadowのオフセットはpxのままにしましょう。1pxのボーダーを0.0625remにすると、ズーム倍率によってはぼやけたり消えたりします。
- emやremで書いたメディアクエリも、ユーザーのフォント設定に従います。ほとんどのブラウザーは、メディアクエリ内の1emをhtmlのルールではなくブラウザーのデフォルトサイズとして扱います。
よくある質問
1remは何ピクセルですか？
1remは、ルートであるhtml要素のフォントサイズと同じです。ブラウザーのデフォルトは16pxなので、サイトや訪問者が変更しない限り1remは16pxです。訪問者がデフォルトの文字サイズを20pxにすると、ルートサイズをピクセルで固定していないすべてのサイトで1remは20pxになります。
remとemの違いは何ですか？
remは常にルートであるhtmlのフォントサイズが基準です。emはその要素自身のフォントサイズ（font-sizeに使った場合は親のフォントサイズ）が基準です。入れ子のemは掛け算になり、1.2emのリストの中に1.2emのリストを入れると基準の1.44倍になります。remは累積しないため、多くのデザインシステムがremを採用しています。
フォントサイズにはpxとremのどちらを使うべきですか？
remを使いましょう。pxで指定した文字は、ブラウザーのデフォルトフォントサイズの設定を無視します。読みやすくするためにこれを大きくしている人もいます。ページのズームはpxでも効きますが、フォントサイズの設定は効かないため、remのほうがアクセシブルな選択です。
Tailwindのクラスはremとどう対応しますか？
Tailwindのデフォルトのスペーシングスケールでは、1段階が0.25remで、16pxルートでは4pxです。つまりp-4は1rem（16px）、gap-6は1.5rem（24px）です。フォントサイズは名前で指定し、text-smは0.875rem、text-baseは1remです。このページの表には、デフォルトスケールにあるすべてのサイズのクラスを載せています。
このツールは入力したCSSをどこかに送信しますか？
いいえ。変換はすべてブラウザー内で行われ、入力や貼り付けた内容は一切アップロードされません。
remが存在する理由
- CSSのピクセルは固定の単位です。32pxに設定した見出しは、訪問者がブラウザーで大きな文字を使うよう設定しても32pxのままです。rem単位は、サイズをルートフォントサイズに結び付けることでこれを解決します。ルートフォントサイズは、デフォルトで訪問者の設定に従います。数値を1つ変えるだけで、ページ上のrem基準のサイズがすべて連動して変わります。
- そのためremは、文字、padding、margin、テキスト列の幅に適しています。1pxの区切り線や、ピクセル寸法が決まっている画像のサイズなど、文字と一緒に拡大すべきでないものには、今でもピクセルが適しています。
remとemを並べて比べる
- このページのライブ例では、同じ1.25のサイズを3階層の入れ子で、emとremでそれぞれ指定しています。em版は、子が親のサイズを掛け算するため階層ごとに大きくなります。rem版は常にルートを参照するため、どの深さでも同じサイズのままです。
- ボタン内の余白やアイコン後の間隔など、自分の文字に合わせて拡大すべきものには、今でもemが便利です。ボタンのフォントサイズをremで、余白をemで指定すれば、フォントサイズを変えるだけでボタン全体の大きさが変わります。
clamp()による可変サイズ
- clamp(min, preferred, max)は推奨値を選びますが、最小値を下回ることも最大値を上回ることもありません。推奨値にremとvwを組み合わせると、ユーザーのフォントサイズを尊重しながら、見出しをウィンドウ幅に応じてなめらかに大きくできます。
- ヘルパーは、たとえば幅375pxのスマートフォンで32px、1280pxのデスクトップで56pxという2点を結ぶ直線を求め、remとvwを足した式として書き出します。vwの傾きが大きすぎると、文字が行の長さより速く大きくなることがあるので、いくつかの幅で結果を確認しましょう。
変換
ルートフォントサイズ（px）
ピクセル
（ルート {n}px）
remをコピー
pxをコピー
ルート {n}px
CSSブロックを変換
pxを含むCSS
remに変換したCSS
1pxの値はpxのまま残す
変換後のCSSをコピー
clamp()による可変サイズ
最小サイズ（px）
最大サイズ（px）
開始幅（px）
終了幅（px）
サイズには0より大きい値を、終了幅には開始幅より大きい値を入力してください。
clamp()をコピー
ウィンドウのサイズを変えると、この行が大きくなる様子を確認できます。
emは累積し、remは累積しない
下の各階層は、それぞれの単位でfont-size: 1.25を指定し、3階層の入れ子にしています。
階層 {n}
px rem 変換早見表
ルート {n}px。行をクリックするとrem値をコピーできます。
Tailwindのクラスは、スケールの基準である16pxルートのときのみ表示されます。
{v}をコピーしました。
ルート {n}px でのpxからremへの変換、1〜128ピクセル、Tailwindクラス付き
ピクセル
Tailwind スペーシング
Tailwind テキスト
無料で始める · クレジットカード不要
関連: 無料ツール｜ビジネス向け計算・生成ツール
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る