CSS Unit Converter

使い方

1. rem の基準となるルートフォントサイズと、em・パーセントの基準となる親要素のフォントサイズを設定します。
2. 貼り付ける数値の単位を選びます。デザイントークンの値なら rem などを選びます。
3. 入力欄に 1 行につき 1 つの値を貼り付けます。空行は無視され、数値として読めない行はスキップとして集計されます。
4. 表を確認します。各行は同じ長さを 5 つの単位で表したものです。
5. 表をコピーするか、プレーンテキストとしてダウンロードします。

よくある用途

• デザイントークンの移行 — px の列を rem に変換してからスタイルシートに貼り付けます。
• 余白スケールの検証 — px 基準と rem 基準の余白が揃っているか確認します。
• 印刷用スタイル — 印刷用スタイルシートを作るときに画面サイズの pt 相当値を確認します。
• パーセント指定 — ある em 値が親のフォントサイズの何パーセントかを算出します。

よくある質問

Q: em と rem の値が違うのはなぜですか？ A: rem は常にルートフォントサイズ基準、em とパーセントは親要素のフォントサイズ基準です。実際の入れ子構造を再現できるよう、2 つの基準値を別々に入力できるようにしています。

Q: pt はどのように換算されますか？ A: CSS の定義に従い 1pt は 4/3 ピクセルです。つまり 12pt は 16px になります。標準的な 96dpi を基準としたブラウザの換算と同じ比率です。

Q: 一部の行が消えるのはなぜですか？ A: 数値として解釈できない行はスキップされ、ボタン横のステータスに件数が表示されます。カンマや単位の文字を除き、各行に数値だけを残してください。