# clamp()

> 最小値、推奨値、最大値を指定してレスポンシブな値を設定する関数です。clamp(最小, 推奨, 最大)の形式で、ビューポートに応じて値が自動調整されます。フルードタイポグラフィやスペーシングの実装に最適です。

- カテゴリ: レスポンシブ・関数
- URL: https://www.css-dictionary.com/property/clamp/

## 構文

```css
clamp(<min>, <preferred>, <max>)
```

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 79+ / Firefox 75+ / Safari 13.1+ / Edge 79+

## コード例

### 例1: 1remから3remの間でビューポート幅に応じて調整

```css
font-size: clamp(1rem, 4vw, 3rem);
```

### 例2: 300pxから800pxの間で50%の幅を維持

```css
width: clamp(300px, 50%, 800px);
```

### 例3: レスポンシブなパディング設定

```css
padding: clamp(1rem, 5vw, 4rem);
```

## TIPS

メディアクエリを減らせる。calc()と組み合わせるとさらに柔軟。

## AIがよく間違えるポイント

AIの生成するclamp()は中央値がvwのみ（例: clamp(1rem, 2vw, 2rem)）になりがちで、これはブラウザのズームや文字サイズ設定に追従しにくいアクセシビリティ上の問題があります。中央値はrem+vwの混合（例: clamp(1rem, 0.8rem + 1vw, 2rem)）が推奨です。最小値と最大値を逆に書く単純ミスもAIにはよくあります。

## AIへの依頼文例

- 見出しのフルードタイポグラフィをclamp()で設計して。ズームに追従するようrem+vwの混合で
- このclamp()の中央値がvw単体になっている問題をアクセシビリティ観点で修正して

## 関連プロパティ

- [min-max-functions](https://www.css-dictionary.com/property/min-max-functions.md)