📏 CSS 単位変換
CSS 長さ単位を瞬時に変換——px・em・rem・pt・pc・in・cm・mm・%・vw・vh・vmin・vmax。ベースフォントサイズとビューポート寸法を設定して、正確な相対単位を取得。
CSS 単位変換について
この変換ツールは、すべてブラウザ内で完結します。任意の値を入力して単位を選ぶと、他のすべての CSS 長さ単位での等価値が瞬時に表示されます。相対単位（em・rem・%）は、指定したベースフォントサイズとビューポート寸法に基づいて計算されるため、実際のレイアウトに一致します。
CSS 長さ単位リファレンス
- px（ピクセル） —— 絶対単位。1 CSS ピクセル ≈ 1/96 インチ。画面レイアウトで最も予測しやすい単位。
- em —— 要素の親の font-size に対する相対値。2em = 親フォントサイズの 2 倍。ネストすると累積します。
- rem（ルート em） —— ルート（
<html>）のフォントサイズに相対。ネストの深さに関わらず一定。 - pt（ポイント） —— 1 pt = 1/72 インチ。印刷用スタイルシートで一般的。
- pc（パイカ） —— 1 pc = 12 pt。組版と印刷で使用。
- in / cm / mm —— 物理単位。CSS では 1in = 96px = 2.54cm = 25.4mm。
- % —— 親要素の幅に対する相対値（ほとんどのプロパティ）。フルードレイアウトに便利。
- vw / vh —— 1 単位 = ビューポート幅 / 高さの 1%。全画面レスポンシブデザインに最適。
- vmin / vmax —— 1 単位 = ビューポートの短辺（vmin）または長辺（vmax）の 1%。
変換ツールの使い方
- 変換したい値を入力し、単位を選択します。
- 正確な em/rem 結果を得るためにベースフォントサイズ（デフォルト 16px＝ブラウザの既定値）を設定します。
- vw/vh/vmin/vmax 用にビューポートの幅と高さをターゲット画面に合わせて設定します。
- 結果表ですべての等価値を読み取るか、ワンクリックで px / rem 値をコピーします。
一般的な変換（16px ベース）
1rem = 16px·0.5rem = 8px·2rem = 32px1em = 16px（親フォントサイズが 16px の場合）1pt = 1.333px·12pt = 16px1in = 96px·1cm = 37.795px·1mm = 3.7795px1pc = 16px
よくある質問
em 値が rem と違うのはなぜですか？ em は親要素のフォントサイズに相対し、rem は常にルートのフォントサイズに相対します。親のフォントサイズが異なると em と rem は乖離します。この変換ツールは親が設定したベースフォントサイズと等しいと仮定します。
ベースフォントサイズは何を使うべきですか？ 16px が主要ブラウザの既定値です。ルートフォントサイズを明示的に変更していない限り、それを使用してください。
なぜ % は幅基準ですか？ CSS では、width・margin・padding のパーセンテージは親の幅に対して解決されます。height のパーセンテージは親の高さに対して解決されます。この変換ツールは、より一般的なケースとして幅を使用します。
物理単位（in・cm・mm）は画面上で正確ですか？ CSS は実際の画面密度に関わらず、96px/インチでピクセルにマッピングします。一貫性はありますが、高 DPI ディスプレイでは物理定規と完全には一致しない場合があります。