1. clamp() とは？

clamp() は CSS 関数で、値を 最小値・理想値・最大値 の範囲に自動で収めてくれるとっても便利なやつ。

clamp(最小値, 理想値, 最大値)

• 最小値 : これ以下にならない
• 理想値 : 通常はこれを採用（vw など可変値をよく使う）
• 最大値 : これ以上にならない

メディアクエリを使わずにレスポンシブ調整できるのが魅力ですね！

2. ブラウザ対応

• Chrome / Safari / Edge / Firefox → 対応済み
• IE → 非対応（気にしなくてOK）

念のためcan I useでも確認しておこうね！

3. 基本の使い方

フォントサイズ

h1 {
  font-size: clamp(1.2rem, 2vw, 2rem);
}

• モバイルで小さすぎない
• 大画面で大きすぎない
• ちょうど良いサイズを自動調整

コンテナの幅

.container {
  width: clamp(300px, 50%, 800px);
}

サイドバーやカードレイアウトに最適な感じかな。

余白（padding / margin）

section {
  padding: clamp(1rem, 5vw, 3rem);
}

モバイルでは詰まりすぎず、PC では広すぎない感じにするとこう。

4. 応用編：もっと便利な使い方

行間（line-height）

p {
  line-height: clamp(1.4, 1vw + 1, 2);
}

グリッドレイアウト

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(
    auto-fit,
    minmax(clamp(150px, 25%, 300px), 1fr)
  );
}

ボタンサイズ

button {
  padding: clamp(0.5rem, 1vw, 1rem) clamp(1rem, 2vw, 2rem);
  font-size: clamp(0.9rem, 1vw, 1.2rem);
}

画面幅に応じて自然にスケールする UI を作れるね。

見出しのマージン

h2 {
  margin-bottom: clamp(0.5rem, 2vw, 2rem);
}

スマホでは詰まりすぎず、PC では余裕を持った見栄えに。

5.まとめ

• clamp() は 最小・理想・最大 の 3 値で柔軟にコントロールできる
• font-size / width / padding だけでなく line-height / grid / ボタン / margin など幅広く応用可能
• メディアクエリを書きすぎずにスッキリした CSS が書ける

すごいー
メディアクエリいらずってすごいですねー
このclampを使いこなせばCSSの記述量がグッと減りますね！

それでは今回はこの辺で、
良いコーディングライフを！