NordVPN
広告厳格なノーログポリシーと6000台以上のサーバーで、安全かつ高速なネット接続を提供するVPN。
詳細を見る →CSS単位変換ツール — px, rem, em, pt, % オンライン
px、rem、em、pt、%のいずれかのCSS値を入力すると、他の単位の等価値をすべて即座に表示します。カスタムのベースフォントサイズ（デフォルト16px）を設定して、remとemを正確に変換。すべての計算がページリロードなしにリアルタイムで更新されます。
rem1 rem
em1 em
pt12 pt
%100 %
ベース: 16px。rem/emの場合、1単位 = ルートレベルで16px。
仕組み
CSSの単位がレスポンシブデザインに重要な理由
CSSには2種類の長さ単位があります：絶対単位（px、pt、cm、mm）と相対単位（rem、em、%、vw、vh）です。絶対単位はコンテキストに関係なく固定サイズを持ちます。相対単位は他のものに対して相対的にスケールします。ルートフォントサイズ、親要素のフォントサイズ、またはビューポートの寸法です。適切な単位を選択することで、レイアウトが異なるスクリーンサイズ、ユーザーのフォント設定、ズームレベルに適切に対応できます。
px（ピクセル）は予測可能で精密なため最も一般的なCSS単位ですが、ユーザーのブラウザのフォントサイズ設定を尊重しません。アクセシビリティのためにデフォルトフォントサイズを20pxに増やしているユーザーの場合、pxベースのテキストは変化しませんが、remベースのテキストはそれに合わせて拡大されます。WCAG 2.1達成基準1.4.4（テキストのリサイズ）がフォントサイズにrem等の相対単位を使うことで最も簡単に満たされる理由がここにあります。
px vs rem vs em：それぞれの使い分け
rem（ルートem）はルート要素のフォントサイズを基準にします。デフォルトでは全ブラウザで16pxです。remは1つの固定基準点（<html>要素）に固定されているため、emが持つ複利効果の問題がありません。フォントサイズ、コンポーネントの間隔、ユーザーのフォント設定に合わせてスケールすべき値にはremを使いましょう。一般的な計算式：rem = px ÷ ベース、例えば24px ÷ 16 = 1.5remです。
emは現在の要素のフォントサイズを基準にしますが、そのフォントサイズ自体がemで設定されている場合もあり、複利チェーンが生じます。`font-size: 1.2em`が`font-size: 1.2em`の親の内部にある子に設定されると、ルートサイズの1.44倍（1.2×1.2）になります。このため、emはコンポーネント内でローカルフォントサイズに合わせてスケールする間隔（paddingとmargin）には有用ですが、グローバルレイアウトには予測しにくいです。pt（ポイント）は主に印刷用途に使います：1pt = 1/72インチ、72pt = 1インチ ≈ 画面上96pxです。
ベースフォントサイズの選択とデザインシステムの活用
ほとんどのブラウザのルートフォントサイズのデフォルトは16pxです。そのためデフォルトの変換設定では1rem = 16pxとなります。一部の開発者は`html { font-size: 62.5%; }`と設定して1rem = 10pxにし、暗算を簡単にします（24px = 1.5remではなく2.4rem）。この手法には賛否があり、あらゆる場所でフォントサイズをリセットする必要があり、アクセシビリティ設定と競合する可能性があります。
モダンなデザインシステム（Material Design、Apple HIG、Tailwind CSS）は間隔とタイポグラフィにモジュラースケールを使います。通常は4pxまたは8pxの倍数です。これらの単位で作業してremに変換することで、異なるコンテキスト間で一貫したビジュアルリズムが生まれます。Tailwindのデフォルトスケールでは4px = 1単位なので、4（16px）の値は1remに等しくなります。迷ったときはベースを16pxのままにして、このコンバーターで正確なrem値を計算しましょう。
よくある質問
›pxをremに変換するには？
ピクセル値をルートフォントサイズで割ります。デフォルトの16pxベースでは：rem = px ÷ 16。例えば24px = 1.5rem、32px = 2rem、48px = 3remです。ルートフォントサイズが10px（`html { font-size: 62.5%; }`から）の場合、rem = px ÷ 10となります。
›ブラウザのデフォルトフォントサイズは何ですか？
すべての主要ブラウザは、ユーザーが設定を変更しない限り、ルートフォントサイズのデフォルトを16pxとしています。これはデフォルト設定で1rem = 16pxを意味します。一部のユーザーはアクセシビリティのためにこれを増やします。テキストにpxではなくremを使う主要な理由がここにあります。
›remとemの違いは何ですか？
remは常にルート要素（<html>）のフォントサイズを基準にしているため予測可能です。emは現在の要素のフォントサイズを基準にしており、継承によって変化する可能性があります。グローバルな値（ボディフォントサイズ、ページレイアウト）にはremを、ローカルコンテキストに合わせてスケールすべき値（要素自体のフォントサイズに対するpadding）にはemを使いましょう。
›1remは何ピクセルですか？
デフォルトでは1rem = 16pxです。`html { font-size: 20px }`と設定すれば1rem = 20pxになります。`html { font-size: 62.5% }`（デフォルト16pxに対する相対値）と設定すれば1rem = 10pxになります。このコンバーターの「ベース」フィールドで想定ルートサイズを変更できます。
›フォントサイズにはremとpxのどちらを使うべきですか？
フォントサイズにはできる限りremを使いましょう。remベースのテキストはユーザーのブラウザフォントサイズ設定を尊重するため、アクセシビリティに重要です。pxはブラウザ設定を無視するため、大きなテキストを必要とするユーザーはズームの恩恵を受けられません（ブラウザズームが導入される前）。
›pxをptに変換するには？
1ポイント = 1/72インチ = 画面上1.333ピクセル。変換式：pt = px × 0.75。例えば16px = 12pt。ポイントは主に印刷CSSや、PDFや印刷スタイルシートなどの物理メディアを対象とする場合に使われます。
›CSS単位の%とは何を意味しますか？
CSSの%はコンテキストによって異なります。font-sizeでは100% = 継承されたフォントサイズ（1emと同じ）。width/heightでは100% = 包含ブロックのサイズ。このコンバーターでは%をベースフォントサイズのパーセンテージとして扱うため、100% = ベースpx、150% = 1.5×ベースになります。
›62.5%トリックとは何ですか？
`html { font-size: 62.5%; }`と設定すると1rem = 10pxになります（デフォルト16pxの62.5% = 10px）。これによりrem計算が簡単になります：24pxが1.5remではなく2.4remになります。ただし、CSS全体でフォントサイズのリセットが必要になり、サードパーティコンポーネントに影響する可能性があります。最近のデザイントークンやツールにより、このトリックは以前ほど必要ではなくなっています。
おすすめサービス
広告について関連ツール
最終更新: