このツールでできること
px（ピクセル）の値をremやemに変換し、逆にremやemからpxへ変換できるツールです。px・rem・emのいずれか1つの値を入力すると、残りの2つの値がその場で自動的に計算されて表示されます。さらにルートフォントサイズとemの基準となる親要素のフォントサイズを自分で設定できるので、実際に使っているデザインに合わせた変換結果を確認できます。
入力項目と表示される変換結果
入力できる項目は3つです。「ルートフォントサイズ (px)」はページのベースとなるフォントサイズをpx単位で指定する数値、「emの基準となる親要素のフォントサイズ (px)」はem変換の基準にする要素のフォントサイズをpx単位で指定する数値、「変換値」はpx・rem・emのいずれかの単位で入力する長さの数値です。入力した内容に応じて、ルートフォントサイズ、emの基準フォントサイズ、そして3つの単位すべてに変換された値が表示されます。あわせて、ルートフォントサイズを16pxとした場合の代表的なpx値をremに変換した一覧表「一般的な px → rem 変換（16px基準）」も表示されます。
入力するとすぐに反映される仕組み
px、rem、emのいずれかの値を入力すると、入力に合わせて他の2つが自動的に更新されます。ページを開いた直後はルートフォントサイズ、emの基準フォントサイズともに16pxが初期値になっており、16px、1rem、1emがすべて等しい状態からスタートします。pxの値は負の数でも入力できます。ルートフォントサイズとemの基準フォントサイズは、どちらも0より大きい数値である必要があります。これを満たさない値を入力すると、ルートフォントサイズの欄には「ルートフォントサイズには0より大きい数値を入力してください。」、emの基準フォントサイズの欄には「emの基準フォントサイズには0より大きい数値を入力してください。」というメッセージが表示されます。また「変換値」の欄に数値として認識できない値を入力すると、「変換する数値を入力してください。」というメッセージが表示されます。
プライバシーについて
すべての変換処理はお使いのブラウザ上で行われます。入力したデータがBroBroGoにアップロードされることはありません。
こんな人に向いています
固定のpx値をレスポンシブデザイン向けに相対単位のremやemへ置き換えたい人、ルートフォントサイズが変わるとremの値がどう変化するかを確認したい人、特定の要素のフォントサイズを基準にしたem値を計算したい人、そして読者がブラウザ側でデフォルトのフォントサイズを変更した場合でもサイズ指定が正しく追従するようにしたい人に向いています。
よくある質問
px、rem、emの違いは何ですか？
pxは固定の長さです。remはページのルート（html要素）のフォントサイズを基準とし、16pxルートの場合、1remは16pxになります。emは、その単位が指定されている要素の親要素のフォントサイズを基準とします。フォントサイズや余白をremで指定することで、ユーザーがブラウザのデフォルトフォントサイズを変更した際に、ページ全体が比例して適切に拡大縮小されるようになります。
なぜemの基準サイズ（em context size）が別にあるのですか？
em単位は、必ずしもルートではなく、その要素自身の親要素のフォントサイズを基準とします。emを正しく算出するために、その要素の基準となるフォントサイズを設定してください。両者が同じ場合は、ルートと同じ値に設定したままにしてください。
ルートフォントサイズが16pxではない場合はどうすればよいですか？
ルートフォントサイズのフィールドをお使いのCSSの設定に合わせて変更すると、すべてのrem値が即座に再計算されます。下部にあるクイック変換表は、多くのWebサイトで標準的に採用されている16pxルートを基準とした便利な早見表です。