Softonic

ピクセルからemへの変換ツール

ステップ 1 / 2
結果

ピクセル値をフォントサイズの基準値に照らして変換します。em、同じ数値比のrem、パーセント、CSSポイントを表示します。初期値は16pxですが、16pxは一般的なブラウザーの既定値にすぎません。emでは実際のローカルフォントサイズ、remではルート（<html>）のフォントサイズを指定してください。

ピクセルを変換する方法

  1. 1

    ピクセル値を入力

    CSSのピクセル値を数値で入力します。

  2. 2

    適切な基準値を設定

    `em`なら対象要素のフォントサイズ、`rem`ならルートのフォントサイズを指定します。基準値に0は使えません。

  3. 3

    4種類の結果を確認

    px ÷ 基準値をem/rem、その比率 × 100をパーセント、px × 0.75をptとして表示します。

計算式と例

em または rem = px / 基準値
パーセント       = (px / 基準値) × 100
pt               = px × 0.75

24px、基準値16pxの場合、結果は1.5em、1.5rem、150%、18ptです。CSSでは96px = 1in = 72ptと定義されているため、ポイントへの変換には0.75を掛けます。これはCSSの基準単位間の関係であり、画面上のピクセルが物理的な長さと一致するという意味ではありません。

CSS単位 基準値が表すもの
em 要素の計算済みフォントサイズ。font-size自体で使う場合は継承したフォントサイズ
rem ルート要素のフォントサイズ
% 選択した同じ基準値を100%として表したもの
pt pxとの固定されたCSS比率。基準値欄は使いません

使用時の注意

  • 入れ子になったemのフォントサイズは乗算されます。1.2emの中にある1.2emは、祖先要素のサイズの1.44倍になります。
  • この計算ツールには基準値が1つしかないため、表示されるemとremの数値は同じです。ただし、CSSで参照するフォントサイズは異なります。
  • em/remは小数点以下最大6桁、パーセント/ptは最大4桁で表示し、末尾の不要な0は省きます。

よくある質問

ルートを基準にサイズをそろえるならrem、コンポーネントをローカルの文字サイズに合わせて拡大縮小するならemを使います。値をコピーする前に、用途に合う基準値を入力してください。

いいえ。16pxは一般的な初期値ですが、ブラウザーの設定やサイトのCSSによって変わります。正確さが必要な場合は、計算済みのフォントサイズを確認してください。

結果を更新するため、入力値はサイト側で処理されます。ステップ形式ではページのURLにも値が含まれるため、機密情報は入力しないでください。

関連ツール

ASCII表リファレンス

0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。

HTML文字参照

HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。

キーボードショートカット一覧

macOS、Windows、Linux向けに、VS Code、Chrome、GNU Readlineを使うBashの公式資料に基づく既定ショートカットを検索できます。

JavaScript圧縮ツール

変数名のリネーム、空白の削除、デッドコードの除去、定数畳み込みでJavaScriptを圧縮し、より小さなバンドルを作成します。

FPS カウンター

requestAnimationFrame でブラウザーの FPS を測定。平滑化、最小・最大フレームレート、警告しきい値、任意のグラフに対応。ローカルで動作し、アップロードも API も不要です。

EditorConfig ジェネレーター

インデントのスタイルとサイズ、改行コード、文字コード、空白ルールを指定して .editorconfig ファイルを生成し、IDE やエディタをまたいで書式を統一できます。

このツールは他の言語でも利用できます