ピクセル→EM/REM変換ツール
すべてのツール
無料
px、rem、em、pt、%をリアルタイムの表とコピーすぐ可能なCSSで変換
変換する値
px
px
remはルートフォントサイズを基準とし、em と % は親要素を基準とします。
変換結果
px
0
rem
0
em
0
pt
0
%
0
一般的な値
| PX | REM | EM | PT |
|---|---|---|---|
| 10 | — | — | — |
| 12 | — | — | — |
| 14 | — | — | — |
| 16 | — | — | — |
| 18 | — | — | — |
| 20 | — | — | — |
| 24 | — | — | — |
| 28 | — | — | — |
| 32 | — | — | — |
| 40 | — | — | — |
| 48 | — | — | — |
| 64 | — | — | — |
CSSスニペット
ピクセル→EM/REM変換ツールについて
このピクセルからEM/REMへの変換ツールは、CSSの長さの値をpx、rem、em、pt、パーセントの間で変換します。5つの単位のいずれかで値を入力すると、ライブテーブルに他のすべての単位での相当値が表示され、スタイルシートにそのまま貼り付けられるコピー用のCSSスニペットも生成されます。
この変換はCSSが実際に単位を解決する方法を尊重しています。remはルートのフォントサイズを基準とし、emと%は親要素のフォントサイズを基準とします。両方の基準サイズは編集可能なので、16pxのルートに14pxのコンポーネントを組み合わせたモデルや、お使いのデザインシステムのスケールを再現できます。
よく使う値の一覧表には、デザイナーが頻繁に参照するサイズがまとめられており、「24pxはremでいくつか」といった疑問に一目で答えます。このツールは無料で、入力に応じて即座に更新され、固定ピクセルのモックアップをアクセシブルでスケーラブルなrem基準のCSSに変換する際の定番です。
ピクセル→EM/REM変換ツールの使い方
- 変換したい値を入力し、その単位を選びます:px、rem、em、pt、%のいずれかです。
- 既定の16pxと異なる場合は、ルートフォントサイズ(remの場合)と親フォントサイズ(emと%の場合)を調整します。
- ライブテーブルで変換された値を確認します。
- 生成されたCSSスニペット、またはよく使う値の一覧表から任意の値をコピーします。
よくある質問
remは常にルート(html)のフォントサイズを基準としますが、emは現在の要素が継承しているフォントサイズを基準とします。ネストされたem値は複合的に積み重なるため、レイアウトにおいてremの方が予測しやすいのが一般的です。
既定の16pxルートフォントサイズでは、16pxはちょうど1remに等しくなります。ルートサイズのフィールドを変更すると変換ツールが再計算します。18pxルートの場合、16pxは約0.889remになります。
rem値はユーザーがブラウザの基本フォントサイズを変更すると連動して拡大縮小し、より大きな文字サイズを必要とする人にも読みやすさを保てます。固定のpxサイズはその設定を無視するため、アクセシビリティを損ないます。
CSSでは1ptを1インチの1/72、1pxを1/96と定義しているため、1pt=1.333px、12pt=16pxとなります。ポイントは主に印刷用スタイルシートや、ワープロソフトからインポートした文書に登場します。
フォントサイズの場合、%はemと同様に親要素のフォントサイズを基準とします。100%は親のサイズと等しく、16pxの親の87.5%は14pxになります。ご自身の文脈に合わせて親サイズのフィールドを設定してください。
人気の検索
px rem 変換ツール
px em 変換ツール
ピクセル rem 変換
rem px 変換
css単位変換ツール
px em rem 計算ツール
お困りですか？
このツールで問題が見つかりましたか？チームにお知らせください。