CSS単位変換ツール - px、rem、em、vw、vh、%をオンラインで変換
CSS単位（px、rem、em、%、vw、vh）を設定可能なベースフォントサイズとビューポートサイズで変換。無料のオンラインCSS単位変換ツール。
よくある質問
CSS単位変換ツールとは何ですか？
CSS単位変換ツールは、ピクセル（px）、ルートem（rem）、em、パーセント（%）、ビューポート幅（vw）、ビューポート高さ（vh）など、異なるCSS長さ単位間で値を変換するツールです。これらの単位は異なる測定システムを表しているため、コンバーターを使用すると手動計算なしで素早く同等の値を見つけることができます。
このCSS単位変換ツールの使い方は？
入力フィールドに数値を入力し、ソース単位（例：px）を選択すると、他のすべての単位（rem、em、%、vw、vh）の同等の値が即座に表示されます。設定パネルでベースフォントサイズとビューポートサイズをプロジェクトの設定に合わせて調整できます。出力の横にあるコピーボタンをクリックすると、CSS対応の値がクリップボードにコピーされます。
remとemの違いは何ですか？
remとemはどちらもフォントサイズに基づく相対的なCSS単位ですが、参照する要素が異なります。remは常にルート要素（<html>）のフォントサイズに相対的で、ほとんどのブラウザでデフォルト16pxです。emは親要素のフォントサイズに相対的です。そのため、remはページ全体で一貫したサイズを提供し、emは要素がネストされると複合的に適用されます。
pxの代わりにremを使うべき理由は？
pxの代わりにremを使用すると、アクセシビリティとレスポンシブ性が向上します。ユーザーがブラウザのデフォルトフォントサイズを変更すると、remベースのレイアウトは比例してスケールしますが、pxベースのレイアウトは固定されたままです。
ベースフォントサイズは変換にどう影響しますか？
ベースフォントサイズ（デフォルト：16px）はpxとrem/emの関係を決定します。例えば、16px基準では：1rem = 16px、0.875rem = 14px、1.5rem = 24pxです。プロジェクトで異なるルートフォントサイズを設定している場合は、正確な変換のためにこのツールのベースフォントサイズ設定を更新してください。
ビューポート単位（vwとvh）とは何ですか？
ビューポート単位はブラウザウィンドウの寸法に相対的です。1vwはビューポート幅の1%、1vhはビューポート高さの1%です。例えば、1920px幅の画面では、50vwは960pxに相当します。レスポンシブなフルワイドまたはフルハイトレイアウト、ヒーローセクション、フルイドタイポグラフィに一般的に使用されます。
CSSでパーセント（%）単位はどう機能しますか？
CSSのパーセント単位は親要素の対応する寸法に相対的です。幅関連のプロパティでは、%は親の幅に相対的です。このツールは設定された親要素の幅に基づいて%を変換し、レイアウトのコンテキストに合わせて設定で調整できます。
このツールを使用する際、データは安全ですか？
はい。このCSS単位変換ツールはクライアントサイドJavaScriptを使用してブラウザで完全に実行されます。入力値や変換結果がサーバーに送信されることはありません。データは常にお使いのデバイス上に保持されます。
コード例
// CSS Unit Conversion Functions
function toPx(value, unit, ctx = {}) {
const { baseFontSize = 16, parentFontSize = 16,
viewportWidth = 1920, viewportHeight = 1080, parentWidth = 1920 } = ctx;
switch (unit) {
case 'px': return value;
case 'rem': return value * baseFontSize;
case 'em': return value * parentFontSize;
case '%': return (value / 100) * parentWidth;
case 'vw': return (value / 100) * viewportWidth;
case 'vh': return (value / 100) * viewportHeight;
}
}
function fromPx(px, unit, ctx = {}) {
const { baseFontSize = 16, parentFontSize = 16,
viewportWidth = 1920, viewportHeight = 1080, parentWidth = 1920 } = ctx;
switch (unit) {
case 'px': return px;
case 'rem': return px / baseFontSize;
case 'em': return px / parentFontSize;
case '%': return (px / parentWidth) * 100;
case 'vw': return (px / viewportWidth) * 100;
case 'vh': return (px / viewportHeight) * 100;
}
}
function convert(value, from, to, ctx) {
return fromPx(toPx(value, from, ctx), to, ctx);
}
// Usage
const ctx = { baseFontSize: 16, viewportWidth: 1440 };
console.log(convert(24, 'px', 'rem', ctx)); // 1.5
console.log(convert(2, 'rem', 'px', ctx)); // 32
console.log(convert(50, 'vw', 'px', ctx)); // 720