web

CSS 単位変換ツール

px、rem、em、vw、vh、percentage、clamp を相互に確認し、レスポンシブな CSS サイズ指定を作れます。

入力値

CSS 長さを入力し、ソース単位を選びます。

変換結果

CSS 単位とレスポンシブサイズコース

この CSS 単位とレスポンシブサイズコースで学ぶ内容を紹介します。

コースホーム

このツールについて

DevCove CSS 単位コンバーター / clamp ジェネレーターは、フロントエンド開発者がデザイン計測を CSS 単位に変換し、タイポグラフィとスペーシング向けの流体 clamp() 値を生成するのに役立ちます。root、親、viewport コンテキストを設定し、一般的なブレークポイントで結果をプレビューし、スタイルシート向け CSS をコピーできます。

使い方

デザイン仕様を CSS 単位に変換したり、流体タイポグラフィとスペーシングを構築するときに使います:

1 つの値の px、rem、em、%、vw、vh 相当が必要なときは単位変換に切り替えます。
デザインシステムやページコンテキストに合わせて root font-size、親 font-size、viewport 寸法を調整します。
変換単位カードをクリックして値をコピーするか、すべての単位を一度にコピーします。
min/max 境界付きのレスポンシブ font-size またはスペーシングが必要なときは clamp 生成に切り替えます。
font-size またはスペーシングモードを選び、min/max px 値と viewport 範囲を定義します。
プレーン CSS、カスタムプロパティ、SCSS 変数をコピーし、主要 viewport 幅のプレビューバーを確認します。
現実的な出発点が欲しいときは 16px → rem または流体見出し例を読み込みます。

機能

フロントエンドレイアウト、デザインハンドオフ、レスポンシブ CSS 配信ワークフロー向け:

px、rem、em、%、vw、vh 間の単一値変換。
設定可能な root font-size、親 font-size、viewport 幅/高さ。
タイポグラフィとスペーシング向けの流体 clamp() ジェネレーター。
ライブサイズバー付き font-size とスペーシングプレビューモード。
CSS、CSS カスタムプロパティ、SCSS 変数のコピー。
内蔵 px/rem と流体見出し例。
クライアント側処理: 値はブラウザー内に留まり、DevCove サーバーにアップロードされません。
明確な境界: 初版では Tailwind 設定エクスポート、Figma パース、完全デザインシステム生成は含まれません。

よくある質問

この CSS 単位コンバーターは値をアップロードしますか？

いいえ。すべての変換と clamp() 生成はページ読み込み後ブラウザー内でローカル実行されます。入力は DevCove サーバーにアップロードされません。

どの CSS 単位に対応していますか？

初版は px、rem、em、%、vw、vh に対応。変換はツールバーで設定する root font-size、親 font-size、viewport 寸法を使用します。

clamp() ジェネレーターの動作は？

px の最小・最大サイズと viewport 範囲を指定します。ツールは rem と vw 項を含む流体 clamp() 式を計算し、最小、中間、最大 viewport 幅での計算サイズをプレビューします。

root または親 font-size はいつ変更すべき？

ドキュメントレベルのサイズ設定で px を rem または em に変換するときは root font-size を使います。root と異なる font-size を持つネストコンポーネント内で em 値を変換するときは親 font-size を使います。

SCSS や CSS 変数向けに結果をコピーできますか？

はい。clamp ジェネレーターはプレーン CSS、CSS カスタムプロパティ、SCSS 変数をコピーでき、スタイルシートワークフローに貼り付けられます。

viewport 幅や高さを編集すると vw/vh 結果が変わるのはなぜ？

vw と vh は viewport 相対です。ツールは設定した viewport 寸法を変換コンテキストとして使うため、これらのフィールドを更新すると同等の px、rem、em 値が再計算されます。