rem を px に換算 Root em ↔ Pixels 無料 オンライン 安全

rem を px に変換する理由

スタイルシートを開くと、カードに padding: 2.25rem があり、キャプションに font-size: 0.8125rem があります。どちらも良い値で、現代の CSS が書かれるべき形で書かれていますが、ひと目では何もわかりません。そのカードの余白は、画面でどれくらいの大きさなのか。キャプションは読めるのか。渡されたデザインファイルの 36 px や 13 px と一致しているのか。それに答えるために、rem を px に変換します。ルートのフォントサイズを掛けて、デザインツールが使う単位で答えを読みます。これは通常の向きの逆で、コードを読むとき、モックアップとビルドを照合するとき、ピクセルで考える人にレイアウトを説明するときにすることです。

変換は簡単です。このページに値打ちがあるのは、基準のためです。rem はサイズではなく、サイズの倍数、つまりルート要素のフォントサイズの倍数です。誰も別に指示していないブラウザーでは、そのサイズは 16 px なので、1 rem は 16 px、2.25 rem は 36 px、0.8125 rem は 13 px です。しかし、ルートはスタイルシートで変更でき、読者もブラウザーで変更できて、そうすればページ内のすべての rem の値がそれに合わせて動きます。そのためこのページは、基準を隠さず、基準を尋ねて、それを使います。

計算はお使いのブラウザー内で行われ、何もアップロードされません。以下では、公式、よく使う値の表、変換が保つものと保てないもの、開発者が rem を px に変換する必要がある状況、そして rem ベースのスタイルシートを読みやすく保ついくつかの習慣を説明します。

公式と基準

px は rem に基準を掛けたもの

公式は一回の掛け算です。px = rem × 基準。通常の基準である 16 px なら、1.5 rem は 24 px、0.75 rem は 12 px、4 rem は 64 px になります。ページは結果の隣に基準を表示するので、1.5 rem = 24 px (16 px) のような行が、何を想定したかを示し、それがプロジェクトに合っているかがすぐにわかります。

自分の基準を調べる

スタイルシートで、font-size を設定する html または :root のルールを探してください。なければ、基準はブラウザーの初期値の 16 px です。あれば、たとえば 62.5% なら、16 のその割合を取ります。62.5% は 10 px になります。ブラウザーの開発者ツールでも、ルート要素を選んで計算後のフォントサイズを読めます。それが基準の欄に入力する数字です。

ルートのサイズが可変のとき

一部のサイトは、clamp の式を使って、ルートのサイズをウィンドウとともに拡大させます。その場合、1 rem には単一のピクセル値がまったくありません。スマートフォンでは 15 px、広いモニターでは 18 px です。そのときの変換はどれもスナップショットです。気にしている幅で見える基準を入力し、答えはその幅でだけ有効だと理解してください。

変換が保つものと、できないこと

比率は保たれる

一 rem はルートのフォントサイズそのものなので、rem で書かれたレイアウトは、そのサイズが変わっても形を保ちます。rem を px に変換すると、ピクセルの値は、その同じ比率を、ある特定の基準について具体的にしたものです。二つのサイズの比、たとえば本文の 1 rem に対する見出しの 2 rem は、どう変換しても変わらず、その比こそが良いレイアウトの拠りどころです。

読者の設定は知りようがない

数字は完全に基準に依存します。読者がブラウザーの初期のテキストサイズを上げていれば、これは多くの人がしていることで、その権利があるのですが、その人にとって 1 rem は 16 px ではなく、見えている数字は欄の基準についてしか正しくありません。ピクセルの値は、デザインを理解する手段として扱い、すべての訪問者が見るものの約束としては扱わないでください。

丸め

基準は通常整数なので、掛け算の結果は通常正確です。0.8125 rem は、基準 16 でちょうど 13 px で、0.6875 rem はちょうど 11 px です。長い小数が出たなら、その rem の値が、入力した基準とは別の基準から計算されたというしるしです。

よく使う値

ページ末尾の表

ページには、設定した基準でよく使う rem の数字が対応するピクセルの値の表があります。0.5 rem は 8 px、0.625 は 10、0.75 は 12、0.875 は 14、1 は 16、1.125 は 18、1.25 は 20、1.5 は 24、2 は 32、3 は 48、4 は 64 です。これらは余白や文字のスケールで最もよく出てくる値で、暗記しておけば、スタイルシートがひと目で読めるようになります。

スタイルシートをピクセルで読む

役に立つ練習は、自分で書いていないスタイルシートを取り、その主な値を一度ピクセルに訳して、結果をメモに書くことです。本文のサイズ 1 rem、見出し 1.5 rem と 2.25 rem、コンテナーの隙間 2 rem は、ピクセルでは 16、24、36、32 です。こう見ると、デザインの論理が現れ、計算機なしでデザインファイルと比べられます。

ここで rem を px に変換する方法

rem の値を入力する

最初の欄に rem でのサイズを入力します。小数も受け付けられるので、0.8125 も 1 と同じように使えます。

基準を設定する

CSS がルートのサイズを変えていなければ、16 のままにしてください。変えているなら、変更してください。結果は入力するそばから更新されます。

ピクセルの値を読む

答えは、隣に基準が示されてすぐに表示されるので、何が想定されたかがわかります。メモにコピーするか、デザインファイルと比べてください。

これらの単位の由来

CSS のピクセル

ディスプレイの密度が予測できなくなったとき、実際のピクセルで測られたページは、画面が鮮明になるにつれて縮むページになりました。そこで CSS のピクセルは基準の長さとして再定義されました。心地よい読書距離で見た、約 1/96 インチです。したがって、スタイルシートのピクセルは画面上の点ではなく、ブラウザーが画面に必要なだけの点に対応づける長さの単位です。

rem

em はウェブより古いものです。金属活字では鋳造された活字の幅で、大文字の M にちなんで名づけられ、CSS では有効なフォントサイズを意味するので、要素を入れ子にすると変わります。rem は、まさにそれを避けるために加えられました。ルート要素の em で、決して重なりません。数字で違いを見るには、px を em に変換して、rem を px に変換して得るものと比べてください。

開発者が rem を px に変換するとき

ビルドをデザインファイルと照合する

デザイナーはピクセルのファイルを渡し、開発者はコードを rem で書きました。ページが一致するか確認するために、rem を px に変換して数字を比べます。不一致はすぐに現れます。1.375 rem は 22 px で、デザインが 24 と言っているなら、どちらかが間違っています。

見慣れないコードを読む

スタイルシートを引き継ぐとき、rem の値は本当のサイズを隠します。主なものを少し変換すれば、デザインの地図が得られます。文字がどれだけ大きいか、余白がどれだけ広いか、ブレークポイントがどこに来るか。

バグ報告とドキュメントを書く

ページをテストする人は、見えるものをピクセルで説明します。余白は 2.5 rem だと言う開発者は、テスターにはほとんど意味がありません。40 px なら意味があります。変換すれば、双方が互いを理解できます。

ピクセルで正確でなければならない値を設定する

ある種のものは、デバイスピクセルの正確な数でなければ、ぼやけて見えます。一ピクセルの境界線、24 px のグリッドに描かれたアイコンなどです。サイズがピクセルグリッドに載らなければならないなら、rem を px に変換すれば、自分の基準で載るかがわかります。

rem を px に変換するときの落とし穴

変更されたルートのサイズを忘れる

ルートが 62.5% や clamp の式に設定されているなら、標準の係数 16 は当てはまりません。結果は二つの基準の比だけ間違います。必ず最初に基準を確認してください。

rem と em を混同する

em は、ルートではなく要素自身のフォントサイズに相対的です。24 px の見出しの中の 1.5em は 36 px ですが、16 px の段落の中では 24 px です。このページは rem を変換し、rem にそのようなあいまいさはありません。em については、em を px に変換をご覧ください。

画面が同じピクセルを表示すると決めつける

CSS のピクセルはデバイスのピクセルではありません。高密度のディスプレイでは、CSS の一ピクセルが二、三個のデバイスピクセルになることがあります。変換は CSS ピクセルを与え、それはデザインツールとスタイルシートの両方が使うものです。

早く丸めすぎる

13.333 px を 13 に丸めてから逆に変換すると、最初の 0.8333 ではなく 0.8125 rem になります。重要なときは、元の rem の値を残してください。

変換する前によくある質問

1 rem は何ピクセルですか？

初期値が変更されていないブラウザーでは、十六です。

2 rem は何ピクセルですか？

初期の基準では三十二です。基準が 10 なら 20 になります。

なぜブラウザーでは違って表示されるのですか？

読者の設定かスタイルシートのルールが、ルートのサイズを変更しています。開発者ツールで、ルート要素の計算後のフォントサイズを見てください。

rem は em と同じですか？

いいえ。rem はルート要素を参照し、em は要素自身を参照します。

入力した数字はアップロードされますか？

いいえ。算術はお使いのブラウザー内で実行され、何もどこにも送られません。

元に戻すには？

掛ける代わりに割るpx を rem に変換を使います。

rem のスタイルシートを読みやすくする習慣

ピクセルの値をコメントに書く

gap: 1.5rem; /* 24px */ のような行は、数文字のコストで、次の読者に変換の手間を省かせます。また、想定した基準も記録します。

小さなスケールを使う

0.5、1、1.5、2、3 のような少数の rem の値しか使わないプロジェクトは、覚えやすいものです。一日たてば、考えなくてもピクセルでわかるようになります。そうしたスタイルシートで rem を px に変換するのは、覚えていることを確かめるだけです。

値に名前をつける

--space-md: 1.5rem のようなカスタムプロパティを使えば、スタイルシートは数字ではなく意図を記述します。名前が意味を運び、数字は一か所に置かれます。

別の初期サイズでテストする

ブラウザーの初期のテキストサイズを上げて、ページを見てください。まとまっていれば、レイアウトは本当に rem で作られています。崩れるなら、何かがピクセルで残されています。

rem を px に変換したあと、ピクセルの値をうまく使う

数字だけでなく比率を比べる

スタイルシート全体で rem を px に変換するときは、サイズそのものだけでなく、サイズ間の比率も見てください。各段階が前の約 1.25 倍になる文字のスケールは、16、20、25、31、39 ピクセルになります。1.5 のスケールは 16、24、36、54 になります。比率を見抜けば、デザイナーの意図がわかり、新しいサイズが必要なときにスケールを一貫して延長できます。

ピクセルで考える人のために訳す

チームの全員が rem を読めるわけではありません。プロジェクトマネージャー、コピーライター、クライアントは、スクリーンショットで作業して、見出しを少し大きくしてほしいと頼むことがよくあります。見出しが今 36 px で、2.5 rem なら 40 px になると言えれば、会話は短く済みます。このページは、二つの語彙の間をつなぐ手早い橋として役立ちます。

タッチターゲットと最小サイズを確認する

タッチスクリーンの指針は、少なくとも約 44 px のターゲットを求め、テキストの指針は、約 16 px 以上の本文を求めます。どちらもピクセルで述べられています。rem で書かれたスタイルシートをそれらに照らして確かめるには、rem を px に変換して、ボタンと文字が基準を超えているかを確認してください。

拡大された場合に注意する

得られる値は、入力した基準についてのものです。読者がテキストを拡大するかもしれないなら、基準を 20 や 24 にしてもう一度変換を試し、レイアウトが画面に何を求めるかを見てください。16 で快適なカードが 24 ではあふれることがあり、それを知る最良のタイミングは、ページを公開する前です。

関連する変換ツール

同じ系統のツールが、隣接する変換を担います。rem に戻るには、px を rem に変換を使ってください。要素に相対的なサイズには、px を em に変換とem を px に変換があり、画面に相対的なサイズには、px を vw に変換とvw を px に変換があります。同じスタイルシートの色には、HEX を RGB に変換とHSL を HEX に変換が使え、クラス名には、テキストを kebab-case に変換が、フレーズを CSS が受け付ける名前にします。

実例

プルリクエストをレビューしていて、スタイルシートに、padding: 5rem 1.5rem のヒーローセクション、3.5rem のタイトル、1.25rem のリード文があるとします。デザインファイルは、余白が 80 px と 24 px、タイトルが 56 px、リード文が 20 px だと言っています。5 を入力して 80 px を読み、1.5 を入力して 24 を読み、3.5 を入力して 56 を読み、1.25 を入力して 20 を読みます。四つすべてが一致するので、ビルドは忠実です。タイトルが 3.25 rem だったなら、52 を読んで、デザイナーに届く前に違いに気づけたでしょう。

短いチェックリスト

変換する前

基準を見つけてください。スタイルシートのルートのルール、または開発者ツールの計算後のサイズです。

変換している間

rem の値を入力し、結果の隣に表示された基準を確認して、ピクセルの数字を控えてください。

変換したあと

デザインファイルと比べてください。数字が違うなら、コードを疑う前に基準を確認してください。

よくある間違い

確認せずに 16 を使う

それは初期値であって、規則ではありません。ルートを確認してください。

ピクセルを最終的なものとして扱う

答えは一つの基準についてだけ成り立ちます。初期値が大きい読者には、より大きなピクセルが見えます。

rem と em を取り違える

似ていますが、振る舞いは違います。それぞれに正しいページを使ってください。

数字は端末の中にとどまる

計算はローカルで行われます。値はお使いのブラウザー自身が使い、何もどこにも送られません。あとで削除するものも、作成するアカウントもありません。それが rem を px に変換する素直な方法です。

まとめ

ここで rem を px に変換するには、rem でのサイズを入力して、式 px = rem × 基準を使い、すぐにピクセルで読みます。基準は、ブラウザーの初期値である 16 px から始まり、CSS に合わせて変更できます。変換は比率を保ちます。一 rem はルートのフォントサイズそのものだからです。そして読者の設定は知りようがないので、数字は欄の基準についてだけ正しいです。よく使う値の表は、0.5 rem が 8 px のところから 4 rem が 64 px のところまで、スタイルシートをひと目で読む助けになります。何もアップロードされません。