CSS単位変換 - 無料オンラインツール

機能

ルートフォントサイズを指定

px ↔ rem ↔ em ↔ pt

そのまま使える CSS を出力

使い方

1. ルートフォントサイズを設定します（デフォルト16px）。

2. 任意の単位フィールドに値を入力します。

3. 他のすべての単位が自動的に更新されます。

このツールについて

ピクセルは直感的ですが、rem はユーザーが設定した文字サイズに合わせて拡大縮小されるので、アクセシビリティの面で重要です。この変換ツールは、指定したルートのフォントサイズ（初期値はブラウザー標準の 16px）を基準に px、rem、em、pt を同期させます。どの欄に値を入力してもほかの欄が更新されるので、ピクセルで渡されたデザインをスタイルシート用の rem に直したり、12pt の印刷サイズが画面上でいくつになるか確認したりできます。この換算では em を rem と同じ基準サイズで計算しています。親要素がルートのフォントサイズを使っている場合はそのとおりですが、独自のフォントサイズを持つ入れ子のコンポーネントでは結果が異なります。

よくある質問

rem と em の違いは？

rem はルート要素のフォントサイズが基準なので、ページ内のどこでも 1rem は同じ大きさです。em は親要素のフォントサイズが基準なので、入れ子にすると掛け合わさっていきます。このツールでは em を入力したルートサイズ基準として扱います。

フォントサイズに px ではなく rem を使うべき理由は？

閲覧者がブラウザーの設定で標準の文字サイズを大きくすると、rem で指定した文字は一緒に大きくなりますが、px で指定した文字はその設定を無視します。文字や余白に rem を使うと、視力の弱い人にも読みやすいサイトになります。

ポイントはピクセルにどう換算しますか？

CSS では 1インチ = 96px = 72pt と定められているので、1pt は 4/3 px（約 1.333px）です。つまり 12pt の文字は 16px になります。

ルートのフォントサイズを 62.5% にするべきですか？

html { font-size: 62.5% } にすると 1rem が 10px になり計算は楽ですが、標準の文字が小さくなるのであちこちで補正が必要です。最近は標準の 16px のまま、このような変換ツールを使うチームが多くなっています。

CSS の 1px は画面の物理的な1ピクセルと同じですか？

高密度ディスプレイでは違います。CSS ピクセルは基準となる単位で、デバイスピクセル比が2の端末では、1 CSS ピクセルが縦横それぞれ2つの物理ピクセルで描かれます。

CSS単位変換ツール (px ↔ rem ↔ em ↔ pt)

機能

使い方

このツールについて

よくある質問

関連ツール