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

デザイナーと開発者が px を rem に変換する理由

デザインツールはピクセルで語ります。モックアップは、見出しが 32 px、セクションの間の隙間が 48 px、ボタンに 16 px のパディングがあると言います。うまく書かれたスタイルシートは rem で語ります。この二つの言語の間の隙間に、このページはあります。ピクセルでサイズを入力して rem で読むと、CSS に入れる数字が、デザイナーの意図したとおりの意味をもちます。px を rem に変換するのは小さな行為ですが、ウェブサイトの一生の間に何百回も行われ、間違った基準は、丁寧なレイアウトを、あらゆる場所で一度に少し間違ったものに変えます。

そもそも rem に手間をかける理由は、アクセシビリティと柔軟性です。rem はルートのフォントサイズの倍数で、ブラウザーは別に指示されなければそれを 16 px に設定し、読者は設定で自由に変更できます。したがって rem で書かれたレイアウトは、視力の弱い人が初期設定のテキストサイズを上げても、形を保ちます。文字、間隔、枠がともに大きくなるのです。ピクセルで書かれたレイアウトは追随せず、大きなテキストを求めた読者は、窮屈な枠の中の大きな文字しか得られないか、何も得られません。だからほとんどすべての現代のスタイルガイドが同じことを言います。文字と間隔には rem を使えと。

このページは、お使いのブラウザー内で算術を行います。何もアップロードされず、変換が依存するもの、つまり基準のサイズは、陰で想定されるのではなく、以下に明記され、変更できる欄にあります。以下では、式、よくあるサイズの表、基準が重要な理由、急いで px を rem に変換する人が引っかかる罠、そして結果を実際のスタイルシートで使うための短い案内を説明します。

式と基準

rem は px を基準で割ったもの

式は割り算一つです。rem = px ÷ 基準。通常の基準 16 px なら、24 px は 1.5 rem に、32 px は 2 rem に、8 px は 0.5 rem になります。ページは入力するそばから結果を示し、使った基準も示すので、24 px = 1.5 rem (16 px) という行が、何が想定されたかを正確に教えてくれます。

16 はどこから来るのか

基準が 16 px から始まるのは、誰も別に指示しないときにブラウザーが使う値だからです。それはウェブの法則ではなく、初期設定の初期設定であり、何十年も安定してきました。CSS がルートのフォントサイズに一切触れなければ、ほとんどの訪問者にとって 1 rem は 16 px です。触れるなら、基準は設定した値です。

62.5% のコツとそれを使う理由

スタイルシートの中には、ルートのサイズを 62.5% に設定するものがあります。初期設定のブラウザーでは 1 rem が 10 px に等しくなり、24 px は単に 2.4 rem で、算術が頭の中で簡単にできるからです。それは機能しますが、代償があります。ページ全体がそのパーセントに依存し、基準が 16 であることを期待するどの部品も、小さすぎる結果になります。あなたのプロジェクトがこうしているなら、このページの基準の欄に 10 と入力すれば、すべての数字が CSS と一致します。

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

比率は保たれる

一 rem はルートのフォントサイズが何であれその大きさなので、rem で書かれたレイアウトは、そのサイズが変わっても形を保ちます。それがそのように書く理由のすべてです。px を rem に変換するとき、得られる数字は、選んだ基準でのピクセルの値がもっていたのと同じ比率であり、今は拡大縮小できる形で表されています。

読者の設定は知りえない

数字は完全に基準に依存します。CSS がルート要素に別のサイズを設定していたり、読者がブラウザーの初期設定のテキストサイズを変えていたりすると、多くの人がそうしていて、そうする権利がありますが、その人にとって 1 rem は 16 px ではありません。ページの数字は、欄にある基準に対してだけ正しいのです。これはツールの欠陥ではなく、単位の性質です。それは相対的であり、相対的な単位には、変換先となる固定の値がないのです。

丸め

16 で割ると、多くのよくあるサイズ（16、24、32、48、64）できれいな結果が、ほかでは循環小数が得られます（10 px は 0.625 rem、13 px は 0.8125）。ページは数字が必要とするだけの桁を出し、スタイルシートにいくつ残すかはあなたが決めます。ブラウザーは長い小数を問題なく扱いますが、0.8125rem のように丸めた値は、十桁ある値より読みやすく、保守しやすいものです。

よくあるサイズ

ページの下部の表

変換ツールの下には、よくあるサイズの表があります。8 px は 0.5 rem、10 px は 0.625、12 px は 0.75、14 px は 0.875、16 px は 1、18 px は 1.125、20 px は 1.25、24 px は 1.5、32 px は 2、48 px は 3、64 px は 4 です。これらは文字の段階や間隔の体系に最もよく現れるサイズで、目の前にあれば変換を一つ省けます。

rem に基づく段階

役立つ習慣は、少数の rem の値を選んで再利用することです。間隔には 0.5、1、1.5、2、3、4、文字には 0.875、1、1.25、1.5、2 です。デザイナーはこれを段階と呼び、サイトを視覚的に一貫させます。モックアップが 22 px のような半端な値を与えたら、変換ツールでそれが 1.375 rem だと確認してから、段階の最も近い値に丸めるかどうかを決めてください。

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

ピクセルの値を入力する

最初の欄にピクセルでのサイズを入力します。小数も受け付けられるので、14 と同じように 13.5 px も使えます。

基準を確認する

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

rem の値をコピーする

数字を読んで、後ろに単位を書いて CSS に使ってください。font-size: 1.5rem のようにです。単位を忘れないでください。ほとんどのプロパティで、単位のない数字は別の意味になります。

これらの単位の由来

CSS のピクセルは画面のピクセルではない

ディスプレイの密度が予測できなくなったとき、実際のピクセルで測られたページは、画面が鮮明になるにつれて縮むページになりました。そこで CSS のピクセルは基準の長さとして再定義されました。心地よい読書距離で見た、約 1/96 インチです。このページのほかのすべては、その上に築かれています。em はウェブより古いものです。金属活字では、大文字の M にちなんで名づけられた鋳造ブロックの幅であり、CSS では有効なフォントサイズを意味するので、要素を入れ子にすると変わります。rem は、まさにそれを逃れるために加えられました。それはルート要素の em であり、決して積み重なりません。

rem が存在する理由

rem の前は、開発者はすべてを em かパーセントでサイズ指定し、入れ子の要素は互いに掛け合わされました。リストの中のリストの中のリストは、段階ごとに縮んだり大きくなったりしました。rem は彼らに、ルートという一つの固定された基準を与え、積み重なりをなくしました。二つを比べたければ、px を em に変換して、同じピクセルの値が、それが置かれた要素にどう依存するかを見てください。

実際に rem に出会う場所

文字

本文は普通 1 rem、見出しは 1.25 から 3 rem、小さな文字は 0.75 から 0.875 rem です。それらを rem で書けば、読者はブラウザーの設定を一つ変えるだけで、ページ全体を大きくできます。

間隔とレイアウト

rem での余白、パディング、隙間は、空白を文字に比例させます。テキストが大きくなると、その周りの空間も大きくなり、レイアウトは、大きな文字を古い枠に詰め込むのではなく、釣り合いを保ちます。

メディアクエリ

em や rem で書かれたブレークポイントは、読者のテキストサイズに反応するので、テキストを拡大した人には、レイアウトがより早く狭い形に切り替わります。知っておく価値のある洗練ですが、ブレークポイントではピクセルが今も一般的です。

ピクセルのままにするもの

細い罫線、ボックスシャドウ、細いアイコンは、固定のピクセルサイズが最もよく見えることが多いものです。0.0625rem の罫線が大きなテキストで 0.1rem に育っても、誰の助けにもならないからです。拡大縮小すべきものには rem を、そうでないものにはピクセルを使ってください。

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

基準が常に 16 とは限らないことを忘れる

プロジェクトが html { font-size: 62.5% } を設定していたり、可変のルートサイズを使っていたりすると、係数が異なります。このツールを含め、どんな変換ツールの数字も信じる前に、スタイルシートを確認してください。

ルートのサイズ自体を変換する

ルートのサイズをピクセルで設定すると、読者のブラウザーの設定が上書きされ、rem の利点が失われます。ルートはパーセントで設定するか、触れずにおいて、ユーザーの好みが尊重されるようにしてください。

独自のフォントサイズを設定する部品の中で rem を使う

rem は常にルートを参照し、部品を参照しません。フォントサイズが 14 px で、パディングが 1rem のボタンは、パディングがボタン自身のテキストに追随しません。要素のテキストに追随する間隔がほしいなら、それは em の仕事です。

計画なく単位を混ぜる

ある余白に px、次に rem、三つ目に em を使うスタイルシートは、考えにくいものです。規則を選んでください。文字と間隔には rem、罫線と影にはピクセルというようにして、それを守ります。

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

16 px は何 rem ですか？

初期設定のブラウザーでは、一です。十六を基準の十六で割ったものです。

rem は px より優れていますか？

文字と間隔には、ほとんどのプロジェクトでより良い選択です。読者の設定を尊重するからです。拡大縮小すべきでないものには、ピクセルが今も正しいのです。

結果がほかのサイトと違うのはなぜですか？

おそらく基準が違うのでしょう。欄を確認してください。10 を想定するツールも、16 を想定するものも、14 を想定するものもあります。このページは結果の隣に基準を示します。

丸めなければなりませんか？

いいえ。ブラウザーは長い小数を受け付けます。読みやすさのためだけに丸めてください。

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

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

元に戻すには？

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

px を rem に変換するときの賢い選び方

プロジェクトの基準を決めて、それに従う

何を選んでも、それを決定として、プロジェクトの文書に書いてください。基準について意見が分かれるチームは、うまく組み合わさらない部品を作ります。

最後の瞬間ではなく、デザインの段階で変換する

モックアップを読みながら px を rem に変換すれば、段階をデザインに組み込め、半端な値に早く気づけます。最後にやると、それらは一貫性のない数字の山として見つかります。

ビューポート単位も考える

画面いっぱいに広がるべき見出しには、px を vw に変換が、サイズをビューポートの割合として表します。それは rem とは違う拡大縮小の仕方をし、二つはよく組み合わされます。

px を rem に変換しやすくなる習慣

頭の中に変換表を保つ

基準が 16 なら、いくつかの目印で作業のほとんどをまかなえます。4 px は 0.25 rem、8 px は 0.5、12 px は 0.75、16 px は 1、24 px は 1.5、32 px は 2 です。モックアップがそれらの間の値を与えたら、ページで px を rem に変換する前に見積もれ、変換ツールは確認のためだけに使えます。数週間たてば、見なくても表がわかるようになるでしょう。

デザインシステムに仕事をさせる

チームがデザイントークン、たとえば spacing-2 や font-lg を管理しているなら、それを rem で一度保存し、全員が名前を参照するようにしてください。そうすれば、誰ももう px を rem に変換する必要がなく、段階の変更は一か所で行われます。変換ツールは、トークンを使うときではなく、書くときに使う道具です。

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

padding: 1.25rem; /* 20px */ のような行は、数文字のコストで、次の開発者が計算機に手を伸ばすのを省きます。また、どの基準を想定したかも記録するので、あとでルートのサイズが変わったときに役立ちます。

ブラウザーの設定を変えて試す

ページが rem で作られている証拠は、より大きな初期設定のテキストサイズに耐えることです。ブラウザーの設定を変えて、再読み込みして見てください。壊れる部品は、何かがピクセルのまま残されたか、固定の高さがテキストを切った部品です。

関連する変換ツール

同じ系統のツールが、隣接する変換を担います。ピクセルに戻るには、rem を px に変換を使ってください。要素に相対的なサイズには、px を em に変換とem を px に変換があり、画面に相対的なサイズには、px を vw に変換とvw を px に変換があります。作業にサイズだけでなく色も含まれるなら、HEX を RGB に変換、RGB を HEX に変換、HEX を HSL に変換がスタイルシートの表記を扱います。

実例

モックアップがカードのタイトルを 28 px、カードのパディングを 20 px、カードの間の隙間を 12 px とし、プロジェクトが初期設定の 16 px の基準を使っているとします。28 を入力して 1.75 rem を読み、20 を入力して 1.25 rem を読み、12 を入力して 0.75 rem を読みます。スタイルシートには font-size: 1.75rem、padding: 1.25rem、gap: 0.75rem と書きます。ブラウザーのテキストサイズを 20 px に上げた訪問者は、四分の一拡大された同じカードを見ます。タイトルは 35 px、パディングは 25 px、隙間は 15 px で、すべて比例しています。ピクセルで書いていたら、タイトルは 28 のままで、カードは間違って見えたでしょう。

短いチェックリスト

変換する前

CSS が使う基準を調べてください。どのサイズが拡大縮小すべきで、どれがそうでないかを決めてください。

変換している間

ピクセルの値を入力し、結果の隣に示された基準を確認して、rem の数字を単位つきでコピーしてください。

変換したあと

ブラウザーでより大きな初期設定のテキストサイズでページを試し、もうテキストを収められなくなった枠がないか探してください。

よくある間違い

1 rem が常に 16 px だと思い込む

それは誰もルートのサイズを変えていないときだけで、変えている読者もいます。ほかのサイズでも動くようにレイアウトを書いてください。

ルートのサイズをピクセルで設定する

読者の選択を上書きしてしまいます。パーセントを使うか、設定しないでください。

すべてを変換する

すべてのサイズが拡大縮小すべきとは限りません。罫線と影はピクセルのままにしてください。

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

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

まとめ

ここで px を rem に変換するには、ピクセルでのサイズを入力して、式 rem = px ÷ 基準を使い、rem ですぐに読みます。基準はブラウザーの初期設定である 16 px から始まり、CSS に合わせて変更できます。変換は比率を保ちます。rem で書かれたレイアウトは、ルートのフォントサイズが変わっても形を保ちます。読者の設定は知りえないので、数字は欄にある基準に対してだけ正しいのです。変換ツールの下の表にあるよくあるサイズ、0.5 rem の 8 px から 4 rem の 64 px までが、算術を繰り返す手間を省きます。何もアップロードされません。