Clamp( )式作成ツール Padding/Margin CSSプロパティ名指定可能タイプ

CSSでよく使う単位の解説（初心者向け）

CSSでは px（ピクセル）だけでなく、柔軟にレイアウトを調整できる便利な単位があります。
ここでは em / rem / vw / vh をわかりやすく解説します。

✅ em（親要素を基準にした文字サイズ）

• 基準：親要素の font-size

• 1em = 親要素の文字サイズと同じ大きさ

• 例）親要素の文字サイズが 16px の場合

  • 1em = 16px

  • 2em = 32px

👉 特徴：親要素のサイズに依存するので、入れ子構造が深いとサイズがどんどん大きく（または小さく）なりやすい。

✅ rem（ルート要素を基準にした文字サイズ）

• 基準：html 要素の font-size（ルート）

• 1rem = ページ全体の基準文字サイズ

• 例）html { font-size: 16px; } の場合

  • 1rem = 16px

  • 1.5rem = 24px

👉 特徴：どの場所に書いても「html の文字サイズ基準」になるので、サイズが安定しやすい。
👉 おすすめ：レスポンシブ対応や全体的なデザイン調整に使いやすい。

✅ vw（ビューポートの幅に対する割合）

• 基準：画面の横幅（viewport width）

• 1vw = 画面幅の 1%

• 例）画面幅が 1000px の場合

  • 1vw = 10px

  • 50vw = 500px

👉 特徴：画面の幅に応じてサイズが変わる。
👉 使いどころ：見出しの文字サイズを画面幅に比例して変える、横幅いっぱいに広げる要素など。

✅ vh（ビューポートの高さに対する割合）

• 基準：画面の高さ（viewport height）

• 1vh = 画面高さの 1%

• 例）画面高さが 800px の場合

  • 1vh = 8px

  • 100vh = 画面全体の高さ

👉 特徴：画面の高さに応じてサイズが変わる。
👉 使いどころ：画面いっぱいに広がるセクション、全画面ヒーローヘッダーなど。

🔹 まとめ

• em → 親要素の文字サイズ基準

• rem → ページ全体の基準文字サイズ基準

• vw → 画面の横幅基準

• vh → 画面の高さ基準

初心者のうちは px と rem をメインに使う のがおすすめです。
慣れてきたら vw / vh を使ってレスポンシブデザインを強化しましょう！