CSS単位変換ツール

CSSの単位はなぜこんなに種類があるのか

CSSの長さの単位は大きく分けて絶対単位と相対単位があります。絶対単位（px・pt・cmなど）は値が固定で、相対単位（rem・em・%・vwなど）は何かを基準に計算されます。レスポンシブなWebサイトでは画面サイズやユーザー設定に応じてサイズが伸縮する必要があるため、相対単位がよく使われます。

• 絶対単位: px, pt, pc, in, cm, mm
• 相対単位（フォント基準）: rem, em, %
• 相対単位（画面基準）: vw, vh, vmin, vmax

このツールがどうやって値を変換しているか

入力した値をまずpx（ピクセル）に変換し、そのpxを各単位に割り当て直して結果を出しています。そのため、どの単位で入力しても残りすべての単位が一度に埋まります。値を変更すると、計算ボタンを押さなくても即座に更新されます。

• px換算 = 値 × （その単位1個あたりのpx）
• remはルートフォント、em・%は要素（親）フォントが決め手
• vw・vhはビューポートのサイズが決め手

px・rem・emの違い

pxは固定ピクセル、remは「ルート（html要素）のフォントサイズ」の倍数、emは「自分（または親）要素のフォントサイズ」の倍数です。アクセシビリティの観点では、ユーザーがブラウザのフォントサイズを大きくするとrem・emは一緒に大きくなりますが、pxは変わらないため、文字サイズには一般にremが推奨されます。このツールではremをルートフォントサイズ欄、emを要素フォントサイズ欄を基準に計算するので、両方の欄を異なる値にするとremとemの結果は互いに違う値になります。

• px: 常に同じサイズ（ユーザー設定を無視）
• rem: ルートフォントサイズ × 値（16px基準なら1rem = 16px）
• em: 要素フォントサイズ × 値（要素フォントが16pxなら1em = 16px）

%は何に対するパーセントなのか

%は「何を基準にするか」によって意味が大きく変わります。font-sizeの%は親要素のフォントサイズ基準、widthの%は親要素の幅基準、line-heightの%は自分自身のフォントサイズ基準です。このツールはフォント系の単位変換のため、%を要素（親）フォントサイズ基準で計算します（100% = 要素フォントサイズ）。widthの%のように別の基準が必要な場合は、その文脈に合わせて解釈してください。

vw・vh・vmin・vmax — 画面基準の単位

ビューポート単位はブラウザの表示画面サイズを基準にします。1vwは画面幅の1%、1vhは画面高さの1%で、vminは幅と高さのうち短い方の1%、vmaxは長い方の1%です。そのためこのツールでは、ビューポートの幅や高さを変えるとvw・vhの結果も変わります。

• 1vw = ビューポート幅 ÷ 100
• 1vh = ビューポート高さ ÷ 100
• vmin/vmax = 短辺/長辺 ÷ 100

pt・pc・in・cm・mm — 物理単位

CSSでは物理単位も画面上で96px = 1inというルールで換算されます。つまり1in = 96px、1cm ≈ 37.8px、1mm ≈ 3.78px、1pt = 1/72in ≈ 1.333px、1pc = 12pt = 16pxです。主に印刷用スタイルシートで使われますが、画面表示でもこの比率で変換されます。

• 1in = 96px
• 1pt = 96/72 ≈ 1.333px
• 1pc = 16px、1cm ≈ 37.8px、1mm ≈ 3.78px

ルートフォント16pxとrem・emの計算例

ブラウザの初期フォントサイズは多くの場合16pxです。そのため24pxをルート基準のremに変換すると24 ÷ 16 = 1.5remになります。要素フォントサイズも16pxなら、同じ24pxは1.5emです。要素フォントサイズを20pxに変えると、24pxは24 ÷ 20 = 1.2emになり、remの値（ルート基準）とは変わります。このツールでルートフォントサイズを20に変更すると、24pxは1.2remとして再計算されます。emはルートではなく要素フォントサイズを基準にする点に注意してください。

レスポンシブデザインではどの単位をいつ使うか

唯一の正解はありませんが、よくある目安があります。文字サイズはユーザー設定を尊重できるremを使い、余白や間隔はremまたはpx、要素の幅は%やビューポート単位、大きめの見出しテキストはclamp()とvwを組み合わせるといった具合です。メディアクエリの基準値には一般にemが使われます。

• 文字サイズ: rem（アクセシビリティのため）
• 余白・間隔: remまたはpx
• レイアウト幅: %またはvw
• 可変サイズ: clamp() + vw

よくある間違いと限界

emは入れ子になると値が積み重なり、想定より大きく（または小さく）なることがあります。また、ブラウザの初期フォントサイズが必ずしも16pxとは限らず（ユーザー設定による）、物理単位の実際のサイズは画面のDPIと厳密には一致しません。このツールの結果は小数点を丸めた値なので、ピクセルできっちり割り切れない場合は、丸めたpxよりもrem・emの小数値をそのまま使うほうが安全です。

• emの入れ子による積み重ねに注意
• ブラウザの初期フォントサイズはユーザーが変更可能
• 物理単位は画面上ではあくまで近似値
• 小数点の丸め誤差が発生する

変換した値をそのままコピーして使う

各単位カードにマウスを乗せる、またはフォーカスするとコピーボタンが表示されます。押すと「1.5rem」のように単位まで付いた文字列がクリップボードにコピーされ、CSSにそのまま貼り付けられます。よく使うルート/要素フォントサイズやビューポートを先に設定しておくと、以降の変換はすべてその基準で計算されます。

• 単位カードのコピー = 値 + 単位
• 先にルート/要素フォントサイズ・ビューポートを設定
• サンプルボタンで24pxの見本を確認