DevToolbox

px ↔ rem 変換ツール

設定可能なベースフォントサイズと早見表で、px、rem、em CSS単位を変換できます。

このツールについて

px rem変換ツールは、CSSで最もよく使われる3つの長さ単位 （ピクセル（px）、ルートem（rem）、em）を変換する無料の ブラウザベース計算機です。相対的なCSS単位の理解と使用は、 デバイスやユーザー設定に応じて適切にスケールする、レスポンシブで アクセシブルなWebサイトを構築するために不可欠です。

ピクセルは絶対単位で、16pxは文脈に関係なく常に16pxです。 一方、remはルート要素（<html>要素）のフォントサイズに 相対的で、ブラウザのデフォルトは16pxです。ユーザーが アクセシビリティのためにブラウザのフォントサイズを変更した場合、 remベースのレイアウトは自動的にスケールしますが、ピクセル ベースのレイアウトは固定のままとなり、コンテンツが読みにくくなる 可能性があります。

em単位は親要素のフォントサイズに相対的です。親がルート要素の場合、 emとremは同一です。ただし、emはネストされた要素で 複合的に増加するため、最新のCSSではremが推奨されます。 このツールは両方の値を表示するので、状況に応じて適切な単位を 選択できます。

変換式はシンプルです：rem = px / base、px = rem * base （baseはルートフォントサイズ、通常16px）。プロジェクトの設定に 合わせてベースサイズを変更できます。一部のCSSフレームワークでは ルートを10px（62.5%）に設定して計算を簡単にしており、 このツールはそのワークフローもサポートしています。すべての計算は ブラウザ内で完結し、データがサーバーに送信されることはありません。

早見表には一般的なピクセル値とそのrem/em換算値が一覧表示されるため、 既存のコードベースをpxからremに移行する際に便利です。一括変換機能では 複数の値を一度に貼り付けて一括変換でき、大規模なリファクタリング時に 時間を節約できます。

使い方

  1. プロジェクトのルートフォントサイズに合わせてベースフォントサイズを設定します（デフォルトは16px）。
  2. px to rem/emパネルにピクセル値を入力すると、変換されたremおよびem値が即座に表示されます。
  3. rem to pxパネルにrem値を入力すると、同等のピクセル値が表示されます。
  4. 早見表で一般的な変換値を確認できます。任意の行をクリックして値をクリップボードにコピーできます。
  5. 一括変換を使用して複数のpx値（1行に1つまたはカンマ区切り）を貼り付け、一度に変換します。Copy Resultsで出力をコピーできます。
  6. キーボードショートカット：Ctrl+Shift+Cで最新の変換結果をクリップボードにコピーできます。

人気のpx↔rem変換例

すべてのpx↔rem変換例を見る →

よくある質問

remとemの違いは何ですか？

remは常にルート要素（<html>タグ）のフォントサイズに相対的なので、ページ内のどこでも1remは一定です。emは親要素のフォントサイズに相対的なため、ネストされた要素で複合的に増加します。例えば、親がfont-size: 1.5emで子も1.5emを使用すると、子の計算サイズはルートサイズの1.5×1.5＝2.25倍になります。予測可能性のため、最新のCSSガイドラインではremの使用が推奨されています。

pxの代わりにremを使うべき理由は？

remを使用するとユーザーのブラウザフォントサイズ設定を尊重します。アクセシビリティのためにデフォルトのフォントサイズを大きくしているユーザーの場合、remベースのレイアウトは自動的にスケールしますが、pxベースのレイアウトはスケールしません。WCAGではすべてのユーザーにコンテンツが読みやすいように、テキストサイズに相対単位を使用することを推奨しています。

どのベースフォントサイズを使うべきですか？

ブラウザのデフォルトは16pxで、ほとんどのプロジェクトではこの値を維持します。一部の開発者はルートを62.5%（10px）に設定して1rem＝10pxの計算を簡単にしますが、その場合body textを1.6remにリセットする必要があります。プロジェクトで明示的にルートフォントサイズを変更していない限り、16pxのままにしてください。

データは安全ですか？

はい。すべての変換はJavaScriptを使用してブラウザ内で完全に行われる単純な算術演算です。データがサーバーに送信されることはなく、Cookieの設定やサードパーティスクリプトの関与もありません。

Tailwind CSSプロジェクトで使用できますか？

もちろんです。Tailwindはデフォルトでremベースの間隔とサイズ（16pxルート）を使用しています。この変換ツールは特定のピクセル値に対応するTailwindクラスを調べたり、ピクセルで作成されたデザインをTailwindのremベーススケールに変換したりするのに最適です。例えば、16pxは1remに相当し、Tailwindのtext-baseにマッピングされます。

関連ツール

CSSレイアウト生成

FlexboxとCSS Gridレイアウトをビジュアルに構築し、ライブプレビューとCSSコードを生成します。

ボーダーラジアス生成

角ごとのCSS border-radius値をライブプレビューと生成コード付きでビジュアルに設計します。

ボックスシャドウ生成

オフセット、ブラー、スプレッド、色のスライダーでCSSボックスシャドウをビジュアルに設計します。

進数変換ツール

2進、8進、10進、16進およびカスタム基数間で数値を変換します。ビット可視化付き。

Flexboxプレイグラウンド

CSS Flexboxの全プロパティをビジュアルに実験します。コンテナとアイテムの設定をライブプレビューとCSS出力で確認。

ビューポートサイズリファレンス

レスポンシブWebデザイン用の60以上のデバイスビューポートサイズを閲覧します。iPhone、iPad、Android、ノートPC、デスクトップ、TVの画面寸法を比較。

フォントスタックビルダー

ドラッグ＆ドロップでCSS font-familyスタックを構築します。ライブプレビューとシステム、serif、sans-serif、monospace用の人気プリセット付き。

数式評価ツール

基本的な算術演算、関数、定数をサポートする数式を評価します。

テック年収コンバーター

年収、月収、隔週、週給、日給、時給の相互変換を行います。