デザイン

px → rem / em 変換ツール

ベースサイズを設定してpxをrem・emに変換（逆変換も可能）。流体タイポグラフィとレスポンシブレイアウトに最適。

px
ブラウザのデフォルトは16px（1rem = 16px）。CSSでhtmlのfont-sizeを変更している場合（例：html { font-size: 62.5%; } → 1rem = 10px）や、フレームワーク・CMSで異なるベースを設定している場合は変更してください。
px → rem / em
ピクセル数を入力すると即座に計算されます。
px
rem / em → px
rem または em の値を入力すると、px換算値が即座に計算されます。
rem/em
px
クイックリファレンス表 ベース: 16px
px rem em

重要な概念

rem（root em）はルート要素（<html>）のfont-sizeを基準とした単位です。16pxのベースでは1rem = 16px。ドキュメントのfont-sizeを変更するとすべてのrem値が比例してスケールするため、グローバルなレスポンシブデザインが簡単になります。

emは親要素のfont-size（またはfont-sizeに使う場合は要素自身）を基準とします。入れ子要素では複合効果が生じることがあります。remは常にルートを基準とするためその問題を回避します。自己完結したコンポーネント内のスペーシングやサイズ指定にはemが適していることもあります。

ピクセルは固定値であり、ブラウザのフォントサイズ設定を尊重しません。remを使えば、ユーザーがブラウザのベースフォントサイズを大きくした場合にすべてのコンテンツが適切にスケールし、アクセシビリティが向上します。WCAG 1.4.4でも、テキストが機能を失わずに200%まで拡大できることが推奨されています。

html { font-size: 62.5%; }と設定して1rem = 10pxにするトリックを使うプロジェクトがあります（暗算が簡単になります）。フレームワークやCMSによって異なるベースが使われる場合もあります。ベースフィールドを使ってコンバーターをプロジェクトに合わせてください。

remとemの他に、CSSにはビューポート単位があります：vw（幅の1%）、vh（高さの1%）、vminとvmax。モダンCSSにはコンテナクエリ単位（cqi、cqb）と単位を組み合わせるclamp()・calc()関数があります。自動的にスケールする流体タイポグラフィには、clamp(1rem, 2.5vw, 2rem)で最小値と最大値を持つサイズを作成できます — メディアクエリ不要です。

remを使う場面：グローバルなフォントサイズ、メインレイアウトのスペーシング、ドキュメントに合わせてスケールする値。emを使う場面：独自のテキストに合わせてスケールする自己完結型コンポーネント（ボタン、バッジ、ツールチップ）の内部スペーシング。実用的なルール：ルートドキュメントに合わせてスケールさせたければrem、コンポーネントに合わせてスケールさせたければem。両方を組み合わせることでデザインシステムに大きな柔軟性が生まれます。

Bootstrap 5はブレークポイントをremではなくemで定義しているため、メディアクエリがブラウザのズームに応答します：mdブレークポイントは@media (min-width: 48em)（16pxベースで768px相当）です。スペーシングユーティリティ（p-3、m-2など）はremで定義されているため、ユーザーのブラウザのベースフォントサイズを自動的に尊重します。これにより、スペーシングクラスを使用する際に追加設定なしでBootstrapがアクセシブルになります。

フロントエンド開発者は、FigmaやSketchのデザインのピクセル値をCSS記述前にremに変換するのに常用します。これにより、タイポグラフィやスペーシングがユーザーのフォントサイズ設定に適応するようになります。コーディング知識のあるWebデザイナーは、プロトタイプの視覚的な数値と本番で使用する相対CSS単位の対応関係を理解するために使います。TailwindやBootstrapなどのCSSフレームワークを使うチームは、これらのフレームワークが内部的に使用するremベースのスペーシングスケールにデザイン値を変換するために必要です。Webアクセシビリティ専門家は、最小フォントサイズ（通常16px基準/1rem）がWCAGの推奨事項に準拠し、ブラウザのズームに対応しているかを確認するために使います。Web開発の学習者は、pxと相対単位の関係を身につけるための学習リファレンスとして活用します。

パソコンでは、Chrome・Firefox・Edgeで Ctrl + D（Windows/Linux）または Cmd + D（Mac）を押すと、すぐにブックマークに追加できます。Mac の Safari では Cmd + D を押すか、「ブックマーク」→「ブックマークを追加」で登録します。Android（Chrome）では、右上の3点メニュー（⋮）をタップし「ホーム画面に追加」または「ブックマークに追加」を選択します。iPhone/iPad（Safari）では、共有ボタン（□↑）をタップして「ホーム画面に追加」を選択します。多くの開発者がブラウザのブックマークバーによく使うコーディングツールと並べて固定しています。