ピクセル / REM / EM コンバーター (CSS 単位)
ガイド
ピクセル / REM / EM コンバーター
CSSユニット（ピクセル(px)、ルートem(rem)、em）間で即座に変換できます。基本フォントサイズを調整すると、すべての値がリアルタイムで更新されます。フロントエンド開発者がデザイン仕様をCSSに変換するのに最適です。
使い方
3つのユニットフィールド（px、rem、em）のいずれかに値を入力すると、他の2つが即座に更新されます。スライダーまたは入力フィールドを使用して、プロジェクトのルートフォントサイズに合わせて基本フォントサイズ（デフォルト16px）を調整します。下の参考表に、一般的な変換を一覧表示します。
特徴
- 双方向変換 – px、rem、またはemを編集すると、他のすべてが即座に更新されます
- 調整可能な基本フォントサイズ – スライダーと入力は同期され、デフォルトは16pxです
- 参考表 – 一般的なサイズは、基本フォントサイズに合わせて自動計算されます
- リアルタイム更新 – スムーズなパフォーマンスのためのスロットリング入力
- クライアントサイドのみ – サーバーにデータは送信されません
よくある質問
-
CSSにおけるremとemの違いは何ですか？
rem（ルートem）はルート要素のフォントサイズ（html）に相対的であり、ページ全体で一貫性があります。emは親要素のフォントサイズに相対的であり、ネストされた要素で累積される可能性があります。レイアウトの一貫性のために、通常remが推奨されます。
-
デフォルトで1remが16pxになるのはなぜですか？
ブラウザは、オーバーライドされない限り、デフォルトで16pxのルートフォントサイズを設定します。したがって、1rem = 16px、0.5rem = 8px、1.5rem = 24pxです。html { font-size: 62.5%; } を設定すると、1rem = 10pxになり、計算が簡単になります。
-
remまたはemの代わりにpxを使用するのはいつですか？
境界線、影、またはメディアクエリのブレークポイントなど、ユーザーのフォント設定でスケーリングされるべきではない値にはpxを使用します。フォントサイズとスペーシングにはremを使用すると、レイアウトがユーザーのアクセシビリティ設定を尊重します。コンポーネント相対サイジングにはemを使用します。
-
ブラウザのズームはCSSユニットにどのように影響しますか？
ブラウザのズームは、pxを含むすべてのCSSユニットを比例してスケーリングします。これはOSレベルのテキストスケーリングとは異なります。ただし、ユーザーがブラウザのデフォルトフォントサイズを変更すると、remとemの値は調整されますが、pxの値は調整されません。これにより、アクセシビリティのためにrem/emがより適しています。
恵 スコアボードが到着しました！
スコアボード ゲームを追跡する楽しい方法です。すべてのデータはブラウザに保存されます。さらに多くの機能がまもなく登場します！
必見ツール
すべて表示参加する
価値ある無料ツールの提供を継続するためにご協力ください
