カテゴリー: 開発ツール
CSS単位コンバーター
px・rem・em・%・vw・vhを変換
px、rem、em、パーセント、vw、vhのいずれかで数値を入力し、基準となるフォントサイズ・ビューポート・コンテナを指定すると、同じ長さを他のすべての単位で確認できます。
変換は入力した数値をもとにページ内で行われます。どこにも送信されません。
このページの処理はすべてブラウザ内で行われます。アップロードは一切ありません。
このツールでできること
pxからremへの変換はどこでも同じ計算ですが、パーセント・vw・vhはそうはいきません。ページごとに変わるコンテナサイズやビューポートに依存するからです。このツールはまずその前提条件を尋ねるので、返ってくる数値は「ルート16pxだろう」という当て推量ではなく、実際に描画される値になります。remとemはここでは同じ扱いです。どちらも入力した基準フォントサイズから計算されますが、ページ上に実在する親要素がない以上、両者を区別できる本当の親サイズが存在しないためです。基準フォントサイズを変えれば、訪問者が文字を拡大したときにremとemの値がまとめてどう動くかを確認できます。
使い方
- 数値を入力し、変換元の単位を選びます。
- 基準となるフォントサイズ、ビューポートの幅と高さ、コンテナサイズを設定します。
- 同じ長さが他のすべての単位に変換された結果を確認します。
プライバシー
このツールはすべてブラウザ内で動作します。入力した内容がアップロード・保存・共有されることはなく、タブを閉じれば消えます。
よくある質問
- remとemが同じ結果になるのはなぜですか。
- どちらも基準フォントサイズから計算されるからです。remは常にルートのサイズ、emは親要素のサイズを使いますが、このツールには実際の親サイズを読み取るページがないため、入力した基準フォントサイズを両方に使います。
- コンテナサイズは何に使われますか。
- パーセントの基準として使われます。パーセントは何かに対する割合でしか意味を持たないため、ここでは入力したコンテナサイズがその基準になります。
- サーバーに何か送信されますか。
- いいえ。入力した数値をもとに、変換はページ内で計算されます。