CSS Unit Converter
CSS単位を相互変換：px、rem、em、%、vh、vw。ベースフォントサイズとビューポート寸法を設定できます。
動作方法: 数値を入力して単位を選択 → すべての変換が即座に表示されます。結果をクリックすればコピーできます。プロジェクトが異なるベースフォントサイズまたはビューポートを使用している場合は、下の設定を調整してください。
rem、em、%、vh、vw の計算に影響します。ほとんどのプロジェクトはデフォルトで16pxを使用しています。
CSS単位について
CSSは長さ、サイズ、位置を表現するための幅広い単位をサポートしています。適切な単位の選択は、アクセシブルでレスポンシブなレイアウトを構築するために重要です。単位は2つのカテゴリに分類されます：px のような絶対単位は常に固定サイズを表し、rem、em、%、vh、vw のような相対単位は参照値に基づいてスケールします。
絶対単位と相対単位
px（ピクセル）などの絶対単位は、スクリーンサイズやユーザー設定に関わらず固定です。予測可能で理解しやすいですが、ユーザーがブラウザのフォントサイズを変更した場合、アクセシビリティの問題が生じる可能性があります。相対単位はスケーリングされます — rem はルートフォントサイズに、em は親要素のフォントサイズに、% は親の寸法に、ビューポート単位（vh、vw）はスクリーンサイズに従います。
remの使用場面
rem（root em）はルートの <html> 要素のフォントサイズに相対的で、ほとんどのブラウザではデフォルトで16pxです。フォントサイズとスペーシングに rem を使用することで、ユーザーのシステムフォントサイズ設定をレイアウトが尊重するようになり、アクセシビリティの観点から重要です。一般的なパターンとして html { font-size: 62.5% } を設定すれば 1rem = 10px となり、計算が簡単になります。
emの使用場面
em は現在の要素のフォントサイズ（またはフォント以外のプロパティの場合はその親のフォントサイズ）に相対的です。コンポーネントレベルのスケーリングに便利です — 例えば、padding を em で設定すれば、コンポーネントのフォントサイズを変更した際にスペーシングが自動的にスケールします。ただし、em値は入れ子要素で合成されるため、スケールが大きいプロジェクトでは rem よりも管理が難しくなります。
ビューポート単位
vw（viewport width）と vh（viewport height）はブラウザビューポートサイズの百分率です。100vw = 全幅、50vh = 画面の半分の高さです。フルスクリーンセクション、ヒーロー画像、スクリーンを埋める必要があるレイアウトに最適です。最新のCSSでは svh、lvh、dvh も導入され、モバイルブラウザの動的ビューポート高さをより正確に処理できます。