CSS単位コンバーター
CSSの単位を変換します：px、rem、em、vw、vh、%。正確な結果を得るためにベースフォントサイズとビューポートサイズを設定できます。
設定
すべての換算値
| 単位 | 値 |
|---|---|
| px | 16px |
| rem | 1rem |
| em | 1em |
| vw | 0.833333vw |
| vh | 1.48148vh |
| % | 100% |
= 16 px
クイックリファレンス (px → rem)
| px | rem | em | vw | vh |
|---|---|---|---|---|
| 8px | 0.5rem | 0.5em | 0.416667vw | 0.740741vh |
| 12px | 0.75rem | 0.75em | 0.625vw | 1.11111vh |
| 14px | 0.875rem | 0.875em | 0.729167vw | 1.2963vh |
| 16px | 1rem | 1em | 0.833333vw | 1.48148vh |
| 18px | 1.125rem | 1.125em | 0.9375vw | 1.66667vh |
| 20px | 1.25rem | 1.25em | 1.04167vw | 1.85185vh |
| 24px | 1.5rem | 1.5em | 1.25vw | 2.22222vh |
| 32px | 2rem | 2em | 1.66667vw | 2.96296vh |
| 48px | 3rem | 3em | 2.5vw | 4.44444vh |
| 64px | 4rem | 4em | 3.33333vw | 5.92593vh |
CSS単位の変換方法
- ベースフォントサイズ（デフォルト：16px）とビューポートサイズを設定する
- 値を入力し、単位（px、rem、em、vw、vh、%）を選択する
- 他のCSS単位に換算されたすべての値を確認する
- よく使うpx→rem変換のクイックリファレンス表を参照する
使用例
- •レスポンシブデザイン：固定のピクセル値をfluidなremまたはvw単位に変換
- •デザインの引き継ぎ：Figma/Sketchのピクセル仕様をCSSのrem値に変換
- •アクセシビリティ：ユーザーのフォントサイズ設定を尊重するためにrem単位を使用
- •レイアウト：全幅セクション用のビューポート相対サイズを計算
計算式
CSS単位の変換はベースフォントサイズとビューポートサイズに依存します。rem = px / baseFontSize。vw = px / viewportWidth × 100。vh = px / viewportHeight × 100。
よくある質問
remとemの違いは何ですか？
remはルート（html）のフォントサイズを基準とします。emは親要素のフォントサイズを基準とします。ルートレベルでは両者は同じ値になります。
ブラウザのデフォルトフォントサイズは何ですか？
ほとんどのブラウザのデフォルトは16pxです。つまり、ルートフォントサイズを変更しない限り、1rem = 16pxになります。
vw/vhはいつ使うべきですか？
ヒーローセクションや全画面背景など、ブラウザウィンドウに比例してスケールさせたい要素にはvw（ビューポート幅）とvh（ビューポート高さ）を使用します。
pxをremに変換するにはどうすればよいですか？
ピクセル値をベースフォントサイズで割ります。デフォルトの16pxの場合：24px ÷ 16 = 1.5remです。
%単位は何を基準としていますか？
%単位はCSSのコンテキストによって異なります。font-sizeの場合は親要素のfont-sizeが基準で、widthの場合は親要素のwidthが基準になります。