ピクセル↔REM
CSS用のピクセルとREMを変換
ピクセル↔REM の使い方
CSS用のピクセルとREMを変換 無料オンラインツール、登録不要、広告なし。今すぐ無料でお使いいただけます。
Web開発者がピクセルとREMを変換する理由
現代のCSSのベストプラクティスでは、フォントサイズと間隔に絶対値のピクセルではなく相対単位（REM、EM）を推奨しています。これにより、ブラウザの設定で大きなフォントサイズを設定したユーザーがテキストを比例してスケールするのを見られるようになります。Webアクセシビリティ（WCAG）の基本要件です。
- フォントサイズ：
font-size: 16pxの代わりにfont-size: 1remを使います。ユーザーのブラウザの基本フォントサイズが20pxの場合、すべてが比例してスケールします。視覚障害のあるユーザーがシステムフォントサイズを拡大しても快適に読めます。 - 間隔とパディング：REMのマージンとパディングはユーザーのテキスト設定に適応します。
padding: 1.5remはpadding: 24pxよりもアクセシブルで、ユーザーの個人設定を尊重します。 - デザインシステムの実装：Figma、Sketchなどのデザインツールはピクセルでエクスポートします。デザインシステムがはじめからアクセシブルになるように、CSSを書く前にREMに変換してください。
- メディアクエリ：REMベースのメディアクエリはユーザーのテキストサイズ設定を尊重します。
@media (min-width: 48rem)はベースが16pxの場合768pxでトリガーされますが、大きなフォントを使うユーザーには異なるピクセル値で発動します。 - コンポーネントライブラリ：REMで再利用可能なコンポーネントを構築すると、さまざまな基本フォントサイズの文脈で一貫した動作が保証されます。
REMとEM：REM（Root EM）は常にルート要素（html）のフォントサイズに対して相対的です。一貫性があり予測可能です。EMは現在の要素のフォントサイズに相対的で、ネストした要素で予期しない蓄積が起きることがあります。ほとんどのユースケースではREMを推奨します。
Frequently Asked Questions
ブラウザのデフォルトフォントサイズは何ですか？
すべての主要ブラウザ（Chrome、Firefox、Safari、Edge）でデフォルトは16pxです。ユーザーはブラウザ設定でこれを変更できます。これがREMを使う目的そのものです。1rem=デフォルトで16pxですが、ユーザーの設定により18px、20px、または12pxになる場合があります。
なぜhtml { font-size: 62.5% }を使う開発者がいるのですか？
62.5%×16px=10pxに設定すると計算が簡単になります：1.6rem=16px、2.4rem=24px。しかしこれはユーザーの設定フォントサイズを上書きし、REMの目的を部分的に損ないます。より良い方法はCSS calc()を使うか、単純に16で割ることです。
いつPXではなくREMを使うべきですか？
ボーダー（1pxのボーダーは常に1pxであるべき）、シャドウ、テキスト設定に関わらず正確なピクセルサイズが重要な要素にはPXを使います。フォントサイズ、パディング、マージン、テキストに合わせてスケールすべき間隔にはREMを使います。
REM、EM、PXの違いは何ですか？
PXは絶対値です。設定に関わらず常に同じサイズです。EMは親要素のフォントサイズに相対的で、ネストした要素で蓄積します。REMはルートフォントサイズに相対的で、ドキュメント全体で一貫しています。アクセシブルなデザインには、フォントサイズと間隔にはPXよりREMを優先してください。
デザイン全体をピクセルからREMに変換するには？
各ピクセル値をルートフォントサイズ（デフォルト16）で割ります。24px÷16=1.5rem。SassのCSSプリプロセッサ関数（px-to-rem()）やPostCSSプラグインでコードベース全体のこの変換を自動化できます。
REM vs EM vs PX vs VW/VH vs パーセント
PXは絶対値で、精密ですが適応しません。REMはルートフォントサイズとともにスケールし、タイポグラフィとアクセシブルな間隔に優れています。EMは親要素のフォントサイズとともにスケールし、コンポーネントレベルの間隔に便利です。VW/VHはビューポートのパーセントで、流体レイアウトに便利です。パーセントは親要素に相対的で、レスポンシブカラム幅に不可欠です。現代のCSSはREM（タイポグラフィと間隔）とVW/VH（全体レイアウト）とパーセント（カラム幅）を組み合わせます。