ピクセル（px）をremに変換
24 pxは、既定の基準のフォントサイズ16 pxで1.5 remになり、14 pxは0.875 remになります。計算は、ピクセルの寸法をページの基準のフォントサイズで割るだけです。デザインの寸法を最初の欄に入力し、ページが別の基準を使っている場合は「基準のfont-size」の欄に入力してください。
remとは？ ピクセルの寸法をremで書くのはなぜ？
デザインファイルでは、見出しは28ピクセル、セクションの間隔は32ピクセルのように、寸法がピクセルで決まっています。CSSのピクセルは固定の単位で、規格では1インチの96分の1です[1]。そのためpxをインチに変換するツールも、初期値の解像度では1インチを96ピクセルとして数えます。remは相対的な単位で、1 remはページのルート要素であるhtml要素の計算済みのフォントサイズと同じです[1]。
emの値は入れ子の要素の中で段階ごとに掛け合わされていきますが、remは常にルート要素を基準にするので、ページ全体で同じ大きさです。emの換算にはemをpxに変換するツールがあります。ピクセルの寸法をremにするには、html要素のフォントサイズがわかれば十分です。remにした寸法は読み手の設定に合わせて変わり、24ピクセルの見出しは既定の設定では24ピクセルのまま、Chromeで「大」、Edgeで「フォント サイズ: 大」を選んだ読み手には30ピクセルになります。
.heroのルールの60pxと、.headingと.sub-headingをまとめたルールの220pxの2つのフォントサイズが、どちらもピクセルで書かれています。基準16ピクセルでは、前者は3.75rem、後者は13.75remになり、どちらも読み手の設定に合わせて大きくなります。写真：Ferenc Almasi（Unsplash）24 pxは何rem？
既定の基準16ピクセルでは、24ピクセルは1.5 remです。計算は「rem = ピクセル ÷ 基準のフォントサイズ」の割り算1回だけです。16ピクセルごとに1 remで、1ピクセルは0.0625 remなので、8ピクセルは0.5 rem、32ピクセルは2 remです。
スタイルシートが別の基準を使っているなら、その基準で割ります。62.5%のテクニックでは基準が10ピクセルになり、24ピクセルは2.4 remです。基準20ピクセルなら、24ピクセルは1.2 remです。3つ目の欄に基準を入力すれば、このツールはスタイルシートにそのまま書ける値を出します。
16で割り切れない寸法もあるため、結果は小数点以下4桁まで表示します。たとえば13ピクセルは0.8125 remで、CSSはこの数値をそのまま受け付けます。「結果をコピー」ボタンは数値だけをコピーするので、スタイルシートに貼り付けてremを付け足せば完了です。
ピクセルをremに換算する計算式は？
計算式はrem = px ÷ font-sizeで、font-sizeはhtml要素のフォントサイズです。たとえばデザインの28ピクセルの見出しは、基準16ピクセルで28 ÷ 16 = 1.75なので、スタイルシートにはfont-size: 1.75remと書きます。
基準16ピクセルでは、4で割り切れる寸法は小数点以下2桁までになり、12ピクセルは0.75 remです。それ以外の偶数は3桁で、14ピクセルは0.875 rem、奇数は4桁で、15ピクセルは0.9375 remです。13.5ピクセルのような寸法は5桁目が出るため、結果は4桁に丸められて0.8438 remになります。
逆向きの計算にはremをpxに変換するツールを使います。親要素のフォントサイズを基準にした値が必要ならpxをemに変換するツールで換算し、ファイルの寸法がポイント（pt）なら、先にptをpxに変換するツールでピクセルにしてください。
font-size:13pxは0.8125remに、margin:16px 0 20pxは1rem 0 1.25remになります。写真：Rahul Mishra（Unsplash）3つの基準でピクセルは何rem？
| ピクセルの寸法 | 基準16 pxでのrem | 基準10 pxでのrem | 基準20 pxでのrem |
|---|---|---|---|
| 1 px | 0.0625 rem | 0.1 rem | 0.05 rem |
| 2 px | 0.125 rem | 0.2 rem | 0.1 rem |
| 4 px | 0.25 rem | 0.4 rem | 0.2 rem |
| 6 px | 0.375 rem | 0.6 rem | 0.3 rem |
| 8 px | 0.5 rem | 0.8 rem | 0.4 rem |
| 10 px | 0.625 rem | 1 rem | 0.5 rem |
| 11 px | 0.6875 rem | 1.1 rem | 0.55 rem |
| 12 px | 0.75 rem | 1.2 rem | 0.6 rem |
| 13 px | 0.8125 rem | 1.3 rem | 0.65 rem |
| 14 px | 0.875 rem | 1.4 rem | 0.7 rem |
| 15 px | 0.9375 rem | 1.5 rem | 0.75 rem |
| 16 px | 1 rem | 1.6 rem | 0.8 rem |
| 17 px | 1.0625 rem | 1.7 rem | 0.85 rem |
| 18 px | 1.125 rem | 1.8 rem | 0.9 rem |
| 20 px | 1.25 rem | 2 rem | 1 rem |
| 22 px | 1.375 rem | 2.2 rem | 1.1 rem |
| 24 px | 1.5 rem | 2.4 rem | 1.2 rem |
| 25 px | 1.5625 rem | 2.5 rem | 1.25 rem |
| 26 px | 1.625 rem | 2.6 rem | 1.3 rem |
| 28 px | 1.75 rem | 2.8 rem | 1.4 rem |
| 30 px | 1.875 rem | 3 rem | 1.5 rem |
| 32 px | 2 rem | 3.2 rem | 1.6 rem |
| 36 px | 2.25 rem | 3.6 rem | 1.8 rem |
| 40 px | 2.5 rem | 4 rem | 2 rem |
| 44 px | 2.75 rem | 4.4 rem | 2.2 rem |
| 48 px | 3 rem | 4.8 rem | 2.4 rem |
| 50 px | 3.125 rem | 5 rem | 2.5 rem |
| 56 px | 3.5 rem | 5.6 rem | 2.8 rem |
| 60 px | 3.75 rem | 6 rem | 3 rem |
| 64 px | 4 rem | 6.4 rem | 3.2 rem |
| 72 px | 4.5 rem | 7.2 rem | 3.6 rem |
| 80 px | 5 rem | 8 rem | 4 rem |
| 96 px | 6 rem | 9.6 rem | 4.8 rem |
| 100 px | 6.25 rem | 10 rem | 5 rem |
| 120 px | 7.5 rem | 12 rem | 6 rem |
| 128 px | 8 rem | 12.8 rem | 6.4 rem |
| 160 px | 10 rem | 16 rem | 8 rem |
| 192 px | 12 rem | 19.2 rem | 9.6 rem |
| 200 px | 12.5 rem | 20 rem | 10 rem |
| 256 px | 16 rem | 25.6 rem | 12.8 rem |
| 320 px | 20 rem | 32 rem | 16 rem |
| 400 px | 25 rem | 40 rem | 20 rem |
スタイルシートの行はremでどう書く？
| ピクセルの行 | 基準16 pxでのrem | 基準10 pxでのrem（62.5%） |
|---|---|---|
| font-size: 16px | 1rem | 1.6rem |
| font-size: 14px | 0.875rem | 1.4rem |
| font-size: 28px | 1.75rem | 2.8rem |
| padding: 12px 24px | 0.75rem 1.5rem | 1.2rem 2.4rem |
| margin-bottom: 32px | 2rem | 3.2rem |
| border-radius: 8px | 0.5rem | 0.8rem |
| max-width: 1200px | 75rem | 120rem |
| @media (min-width: 768px) | 48rem | 48rem |
html要素に書いたルールは影響しないからです[2]。私たちはChromeとFirefoxで、62.5%のテクニックを使ったページを測りました。@media (min-width: 48rem)のルールは幅768ピクセルから効き、ブラウザーのフォントサイズを20ピクセルにすると、同じルールは幅960ピクセルから効きました。pxをremに変換するツールの欄はどんな書き方を受け付ける？
| 入力・貼り付けする内容 | ツールの計算結果 | この書き方の扱い |
|---|---|---|
| 1つ目の欄：基準16ピクセルでのピクセルの寸法 | ||
| 24 | 1.5 rem | 数値だけを入力できます。デザインツールの寸法の表示と同じ書き方です。 |
| 24px | 1.5 rem | 単位が数字に付いていても、数値を読み取り、pxは無視します。 |
| 24ピクセル | 1.5 rem | 日本語の単位を付けたままでも、数値だけを取り出します。 |
| ２４ | 1.5 rem | IMEで入力した全角の数字も、半角と同じく24として読み取ります。 |
| 13.5 | 0.8438 rem | 小数の寸法も受け付けます。結果は丸めて小数点以下4桁で表示します。 |
| 1,200 | 75 rem | カンマのあとにちょうど3桁が続くので、日本語の書き方と同じく桁区切りとみなし、1200ピクセルとして計算します。欄の下には、もう一つの読み方（1.2）を示す案内が表示されます。 |
| １，２００ | 75 rem | 全角のカンマと数字でも、同じく1200ピクセルとして計算し、欄の下に同じ案内が表示されます。 |
| 1.200 | 0.075 rem | このページではピリオドを小数点として読むので、あとに3桁が続いても1.2ピクセルになり、欄の下に案内が表示されます。1200ピクセルにするには1200か1,200と書いてください。 |
| padding: 20px; | 1.25 rem | スタイルシートの1行をそのまま貼り付けても、数値だけを取り出し、プロパティ名とセミコロンは無視します。 |
| −8px | -0.5 rem | 数字の前の組版用のマイナス記号「−」は、負の値として読み取ります。負のマージンと同じです。 |
| 「基準のfont-size」の欄：ツールが使う基準 | ||
| 62.5% | 10 px | html要素に書くパーセントです。既定の基準16ピクセルの62.5%で10になります。 |
| font-size: 18px | 18 px | スタイルシートからコピーした行です。18を基準として使います。 |
| １６ | 16 px | 全角の数字で書いた基準も読み取ります。 |
Figmaの寸法やスタイルシート全体をpxからremにするには？
換算する寸法が少ないなら、このツールで十分です。数が多い場合は、デザインツールやビルドツールにremを計算させることもできます。
デザインファイルの寸法
デザインツールで寸法を表示しているパネルから、ピクセルの寸法をコピーして1つ目の欄に貼り付けます。ページがhtml要素にフォントサイズを指定している場合は、結果をコピーする前にそのサイズを「基準のfont-size」の欄に入力してください。FigmaのDev Mode
有料プランのDev Modeでは、寸法をremで直接表示できます。インスペクトパネルの［コード］セクションで、言語ドロップダウンの横にある［インスペクトの設定］をクリックし、単位にremを選びます。基準を変えるには、同じ場所で［縮尺を設定…］を選び、［縮尺］のウィンドウに基準を入力します。Sassの関数
Sassでは、数値の割り算にsass:mathモジュールのmath.div()関数を使います[3]。@function rem($px) { @return math.div($px, 16px) * 1rem; }という関数を書くと、rem(24px)は1.5remになります。スタイルシート全体にはPostCSS
postcss-pxtoremプラグインは、ビルドのときにCSSファイルのpxをremに変換します[4]。基準の初期値は16で、既定の設定ではfont、font-size、line-height、letter-spacingの文字関係のプロパティだけを変換し、メディアクエリはピクセルのまま残します。
ピクセルから他の単位への変換
出典
- CSS Values and Units Module Level 4 — W3C
- Media Queries Level 4 — W3C
- sass:math — Sass
- postcss-pxtorem — GitHub
- <length> - CSS — MDN Web Docs
- Web Content Accessibility Guidelines (WCAG) 2.2 (日本語訳) — W3C、ウェブアクセシビリティ基盤委員会 (WAIC) 訳
表の数値はすべて単位の定義から計算し、公開前に検算しています。歴史的なデータと各地の単位の名称は、上記の出典に基づいています。
最終確認日: · 作成・確認: Arteonチーム
pxからremへの変換についてよくある質問
16 pxは何rem？
既定の基準16ピクセルでは、16ピクセルは1 remです。62.5%のテクニック、つまり基準10ピクセルでは1.6 remです。
14 pxと12 pxは何rem？
基準16ピクセルでは、14ピクセルは0.875 rem、12ピクセルは0.75 remです。
24ピクセルはいつも1.5 remですか？
そうなるのは基準16ピクセルのときだけです。ページがhtml要素に別のサイズを指定している場合はそのサイズで割り、基準10ピクセルなら24ピクセルは2.4 rem、基準20ピクセルなら1.2 remです。
なぜ16で割るのですか？
多くのブラウザーでフォントサイズの既定値が16ピクセルだからです。ただし、この値はユーザーの設定で変わることがあります[5]。私たちの測定でも、Chrome、Edge、Firefoxは設定を変える前はこのサイズを使っていました。
62.5%のテクニックでメディアクエリのremは変わりますか？
変わりません。@media (min-width: 48rem)のルールは、このテクニックを使っても使わなくても768ピクセルから効きます。メディアクエリの中のremはフォントサイズの初期値から計算されるからです[2]。メディアクエリの境界は16で割って換算してください。
pxをremにするのとemにするのは、何が違いますか？
remはhtml要素のフォントサイズを基準にするので、ページ全体で同じ基準で割ります。emは親要素のフォントサイズを基準にするので、親要素のサイズで割ります。この計算にはpxをemに変換するツールが使えます。
1pxの枠線もremで書くべきですか？
どの設定でも枠線を1ピクセルの太さに保ちたいなら、1pxのままにしてください。0.0625remと書くと、ブラウザーで「大」を選んで基準が20ピクセルになっている読み手には、1.25ピクセルの線になります。postcss-pxtoremプラグインも、既定の設定ではborderプロパティをピクセルのまま残します[4]。
remで書いた文字は読み手の設定に合わせて大きくなりますか？
はい。remで書いた文字はブラウザーで選んだフォントサイズに合わせて大きくなり、ピクセルで書いた文字は変わりません。WCAGの達成基準1.4.4「テキストのサイズ変更」は、この点を扱っていて、コンテンツや機能を損なわずに200％までサイズを変えられることを求めています[6]。
ツールの改善にご協力ください
ブラウザーと違う結果になる寸法を見つけた、このツールへのアイデアがある、という場合はご連絡ください。