CSS単位の相互変換について

CSSには様々な長さの単位があり、それぞれ異なる基準で計算されます。 px（ピクセル）は絶対単位、rem/emは相対単位、vw/vhはビューポート基準、 %は親要素基準と、用途に応じて使い分けが必要です。

remはルート要素（html）のフォントサイズを基準とし、 ブラウザのデフォルト設定（通常16px）を尊重するため、 アクセシビリティの観点からフォントサイズや余白に推奨されます。emは親要素のフォントサイズを基準とするため、 コンポーネント内での相対的なサイズ調整に適しています。

vw（viewport width）とvh（viewport height）は ビューポートの1%を表し、ヒーローセクションやフルスクリーン表示に活用できます。 ただし、モバイルブラウザではアドレスバーの影響を受けることがあるため、 100vhの代わりにdvh（dynamic viewport height）の使用も検討してください。

このツールでは、任意の値を入力するとすべての単位に即座に変換されます。 ビューポートサイズやフォントサイズの基準値を変更して、 様々なデバイスでの表示を想定した数値計算が行えます。