CSS単位コンバーター
px、rem、em、vw間を相互変換。基本フォントサイズとビューポート幅を設定可能。レスポンシブCSSデザインに必須。無料オンラインツール。
換算値
リファレンス
CSS単位
CSSには絶対単位と相対単位があります。pxのような絶対単位はコンテキストに関係なく固定されます。rem、em、vwのような相対単位は基準値に応じてスケールし、レスポンシブでアクセシブルなレイアウトに不可欠です。
px, rem, em, vw
px(ピクセル)— 絶対単位。1pxはデバイス非依存の1ピクセル。ボーダー、シャドウ、フォントサイズに連動すべきでない要素に使用します。
rem(root em)— ルート要素(html)のフォントサイズに相対。ブラウザのデフォルトルートサイズは16px。ユーザーのフォントサイズ設定を尊重するため、フォントサイズやスペーシングに推奨。
em — 親要素のフォントサイズに相対。ネストされた要素で累積することがあります。要素自身のフォントサイズに連動するpaddingやmarginに有用。
vw(ビューポート幅)— 1vw = ビューポート幅の1%。画面サイズに適応するフルイドタイポグラフィや全幅レイアウトに最適。
一般的なpxからremへの変換
ブラウザのデフォルト基準値16pxの場合:12px = 0.75rem、14px = 0.875rem、16px = 1rem、18px = 1.125rem、20px = 1.25rem、24px = 1.5rem、32px = 2rem、48px = 3rem。1440pxデザインでのビューポート単位:14.4px = 1vw、72px = 5vw。
アクセシビリティにおけるremの利点
フォントサイズにremを使用すると、ユーザーのブラウザフォントサイズ設定が尊重されます。ユーザーがブラウザのデフォルト16pxを20pxに設定した場合、remベースのレイアウトは比例的にスケールしますが、pxベースのレイアウトは固定のままです。WCAG 1.4.4(テキストのリサイズ)は、コンテンツや機能の損失なくテキストを200%までリサイズできることを要求しています — rem単位はこの要件を自然に満たします。
プライバシー
すべての変換は100%ブラウザ内で実行されます。サーバーにデータが送信されることはありません。