CSS単位の使い分け — px・rem・em・vw・vh・pt・cm・mm
CSSには多くの長さの単位があり、それぞれ異なる基準で計算されます。適切な単位を選ぶことでレスポンシブ対応・アクセシビリティ・保守性が大きく改善します。
px（ピクセル）とremの違い
pxはデバイスピクセルを基準とした絶対単位です。ブラウザのフォントサイズ設定を変更してもpxは変わりません。remはrootのem、つまりhtmlタグのfont-sizeを基準にした相対単位です。多くのブラウザのデフォルトは16pxなので1rem=16pxですが、ユーザーがブラウザのフォントサイズを変更するとremも変わります。アクセシビリティの観点からfont-sizeにはpxよりremが推奨されます。視力が弱いユーザーはブラウザの設定でフォントサイズを大きくしていることがあり、pxで固定するとその設定が効かなくなります。WCAGガイドラインでは「テキストを200%まで拡大してもコンテンツが損なわれないこと」が求められており、remやem使用が有効な対策です。CSS Unit Converterでpxとremの換算表を即座に確認できます。
emとremの使い分け
emは現在の要素のfont-sizeを基準にした相対単位です。1.5emは「現在のフォントサイズの1.5倍」を意味します。ネストが深くなると基準が変わって計算が複雑になりますが、コンポーネント内でフォントサイズに比例した余白を設定するpadding: 0.5emのような使い方では有効です。見出しのline-heightなどにemを使うと直感的です。一方remは常にhtmlのfont-sizeが基準なのでネストの深さに影響されません。一般的な使い分けとしては、font-size・marginのようなグローバルな値にはrem、同じコンポーネント内でfont-sizeに連動してほしいpadding・line-heightにはemを使います。メディアクエリのブレークポイントにemを使うとブラウザのフォントサイズ設定に連動するアクセシブルなレイアウトが実現できます。
vw・vhの使いどころ
vwはビューポート幅の1%、vhはビューポート高さの1%を表します。100vhで全画面高さのヒーローセクション、50vwで画面の半分の幅など大きなレイアウトに使います。ただしモバイルのアドレスバーの表示/非表示でvhが変動する問題があり、svh（Small Viewport Height）・dvh（Dynamic Viewport Height）・lvh（Large Viewport Height）という新しい単位が登場しています。dvhはアドレスバーの状態に動的に追従し、svhはアドレスバー表示時の高さを基準にします。フォントサイズの流体スケーリングにはclamp()とvwを組み合わせたclamp(16px, 2.5vw, 24px)という記法が有効で、画面サイズに応じてフォントが自然にスケールします。CSS Unit Converterでvw/vhをpx換算で確認できます。
pt・cm・mmは印刷向け
pt（ポイント）・cm・mmは印刷・PDF生成向けの単位で、画面表示には基本的に使いません。1ptは1/72インチ（約0.353mm）で、Wordや印刷物のフォントサイズに使われます。Webコンテンツでは基本的にpx・rem・em・vw/vhを使い分けます。ただしCSSの@media print内での印刷スタイルではptやcmが有効です。PDFを生成するライブラリ（jsPDF・puppeteerなど）ではmm単位でページサイズを指定することがあります。CSS Unit Converterではこれらすべての単位を相互変換でき、ベースフォントサイズとビューポートサイズをカスタマイズして正確なrem/vwの換算値を確認できます。印刷デザインとWeb実装の両方を担当する場面で役立ちます。