CSS 単位の換算

機能

• 11 種類の単位を一度に表示：px・rem・em・vw・vh・vmin・vmax・pt・in・cm・mm
• 相対単位の基準を調整できます：ルート文字サイズ、現在の文字サイズ、ビューポートの幅と高さ
• 相対単位の各行に「何を基準にしたか」を明記し、前提を事実と誤解させません
• 入力は単位付き（24px、1.5rem）でも単位なしでも可。単位なしの場合はプルダウンの単位として扱います
• 全角の数字・記号、貼り付け時の引用符にも対応（入力方式によるもので、入力ミスではありません）
• 結果は2つのグループ（相対単位 / 絶対単位）に分かれ、行ごとにコピーできます
• リアルタイムに計算し、実行ボタンは不要です。入力が空のときは 24px のサンプルで表を出すので、画面が空になりません

使い方

1. 入力欄に値を入れます（例：24px）
2. 数値だけを入れた場合は、プルダウンで単位を選びます
3. 必要に応じてルート文字サイズ・現在の文字サイズ・ビューポートを調整します
4. 結果を読み、必要な行の「コピー」でその値だけを取り出せます

よくある質問

パーセント（%）の行がないのはなぜですか？

CSS においてパーセントには単一の意味がないからです。文字サイズの `100%` は継承した文字サイズを指しますが、幅・高さ・`padding`・`translate` のパーセントはそれぞれ別のもの（包含ブロック、要素自身の寸法、ビューポートなど）を基準にします。この値がどのプロパティに書かれるかをツールは知らないため、数字を出せばそれは作話になります。文字サイズの用途では `em` の行が完全に等価（`1em === 100%`）なので、日常的な換算には影響しません。

ch・ex・lh・cqw がないのはなぜですか？

換算にこのツールからは見えないものが必要だからです。`ch` は「0 の字幅」、`ex` は「小文字 x の高さ」で、どちらも使用中のフォントのメトリクスに依存します。`lh` は現在の行の高さ、`cqw` は最も近いコンテナクエリのコンテナが基準です。いずれも要素が実際に描画されるまで確定しないため、オフラインでの換算はもっともらしい誤った答えになります。これらの単位を入力した場合は、黙って px として扱うのではなく理由を表示します。

1インチは何ピクセルですか？

96px です。CSS の仕様で決まっており、画面の実際の画素密度とは関係ありません —— そのため「画面の解像度」のような入力を求める必要がありません。物理的な寸法が必要な印刷用途は別の換算で、そちらは PPI 計算機の役割です。`pt` はそこから導かれます：1インチ = 72 ポイントなので `1pt = 96 ÷ 72 ≒ 1.333px`、`12pt` はちょうど `16px` です。

rem と em は結局どこが違うのですか？

`rem` の基準は常にルート要素（`<html>`）の文字サイズで、1か所変えれば全体が変わります。`em` の基準は現在の要素の文字サイズで、それは通常は親から継承された値です。そのため同じ CSS でも入れ子が1段深くなると結果が変わります —— これが `em` の用途（文脈に応じて拡縮する）であると同時に、最も意外な挙動を生むところでもあります。このツールで両者を別々の調整項目にしているのは、その違いを見えるようにするためです。