CSS px, em, rem, %, vw, vh, vmin, vmax CSS

What Is CSS ?

CSS ユニット変換ツールは、コンテキスト依存のユニットを考慮しながら、さまざまな CSS 長さユニット間で変換を行います。固定ユニット (px) は常に同じ視覚的なサイズを表します。一方、相対ユニットはコンテキストによって異なります。em と rem はフォント サイズに関連し、% は親要素に関連し、ビューポート ユニット (vw、vh、vmin、vmax) はブラウザーのウィンドウの寸法に関連します。このツールでは、すべてのコンテキスト変数 (ビューポート サイズ、ベース フォント サイズ、親要素のサイズ) を設定して、どの CSS ユニット間でも正確な変換を行うことができます。つまり、レスポンシブ デザインの計算が迅速かつ簡単になります。

Why Use CSS ?

• 正確なvw/vh計算のための可変ビューポート寸法。
• em/rem変換のための調整可能なベースフォントサイズ。
• パーセンテージ計算のための親要素のサイズ。
• 8つの基本的なCSS長さ単位。
• レスポンシブデザインワークフローに最適です。

Common Use Cases

レスポンシブデザイン

流動的なタイポグラフィーとレイアウトのためのvw値を計算します。

デザインからコードへ

ピクセルベースのデザイン仕様をレスポンシブなCSS単位に変換します。

アクセシビリティ

固定されたピクセルサイズを相対的なrem単位に変換します。

レイアウトのデバッグ

さまざまなCSS単位が実際のピクセルサイズにどのように翻訳されるかを理解します。

Technical Guide

CSS 長さユニットは 2 つのカテゴリに分けられます。

絶対:
• px: CSS ピクセル (CSS では 1/96 インチですが、標準ディスプレイでは 1 デバイス ピクセル)

相対:
• em: 要素のフォント サイズに関連します。2em = 現在のフォント サイズの 2 倍
• rem: ルート フォント サイズ (html 要素) に関連します。em よりも予測可能です。
• %: 親要素の対応するプロパティ値に関連します。
• vw: ビューポート幅の 1%。100vw = 全ビューポート幅
• vh: ビューポート高さの 1%。100vh = 全ビューポート高さ
• vmin: 小さい方のビューポート寸法の 1%
• vmax: 大きい方のビューポート寸法の 1%

一般的なレスポンシブ パターン:
• フルード タイポグラフィー: font-size: clamp(1rem, 2vw + 0.5rem, 2rem)
• フルハイト セクション: min-height: 100vh
• レスポンシブ スペーシング: padding: 5vw

Tips & Best Practices

• 1
  フォントサイズにはrem（アクセシビリティ）を使用し、ボーダーやシャドウにはpx（精度）を使用します。
• 2
  vminはレスポンシブな正方形コンテナに最適です。
• 3
  vw単位でclamp()関数を使用すると、メディアクエリーなしで流動的なタイポグラフィーが可能になります。
• 4
  モバイルでは100vhがアドレスバーを含む場合があるため、代わりに100dvh（ダイナミックビューポート高さ）を使用してください。
• 5
  疑問に思った場合は、remとpxから始めて、ビューポート相対のサイズ指定が必要な場合のみvw/vhを追加します。

Related Tools

長さ変換ツール

ミリメートル、センチメートル、メートル、キロメートル、インチ、フィート、ヤード、マイル、海里などの単位を瞬時に相互に変換します。

⚖️ Unit Converters

ルミナンス変換ツール

カンデラ/平方メートル、ニッツ、ランバート、フット・ランバート間の変換を行います。

⚖️ Unit Converters

タイポグラフィー単位変換ツール

px、pt、em、rem、cm、mm、インチ、ピカ間の変換が可能。ベースフォントサイズを設定して、正確なem/rem変換を行うことができます。

⚖️ Unit Converters

粘度変換ツール

パスカル秒、センチポアズ、ポアズ、ストークス、ft²/sなどのさまざまな粘度の単位を相互に変換します。

⚖️ Unit Converters

Frequently Asked Questions

Q pxをvwに変換するにはどうすればよいですか？

px値をビューポート幅で割り、100を掛けます。例：1920pxのビューポートでは192px = 192/1920 × 100 = 10vwとなります。

Q vwと%の違いは何ですか？

vwは常にビューポート幅相対です。一方、%は親要素相対であり、ビューポートよりも小さくなる可能性があります。

Q remとemをいつ使用するべきですか？

一貫したサイズ指定のためにルート（no cascading surprises）相対でremを使用します。親要素のフォントサイズに合わせてサイズを拡大縮小したい場合は、emを使用します。

Q vminとは何ですか？

vminはビューポートの小さい方の寸法（幅または高さ）の1%です。1920×1080のビューポートでは、1vmin = 10.8pxとなります。

Q 100vhページにモバイルでスクロールバーが表示されるのはなぜですか？

モバイルブラウザはURLバーをビューポート高さの計算に含めます。実際の可視高さを取得するには、100dvh（ダイナミックビューポート高さ）またはJavaScriptを使用してください。

About This Tool

CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.