CSS ・ レスポンシブ
clamp()
最小値・推奨値・最大値
値を「最小値・推奨値・最大値」の範囲に収める関数です。画面幅に応じて滑らかに変わる文字サイズや余白をつくれます。
01
サンプルコード
HTML
1<h1 class="title">画面幅で大きさが変わる見出し</h1>
2<p>ウィンドウの幅を変えると、見出しの大きさが滑らかに変化します。</p>
CSS
1.title {
2 font-size: clamp(1.25rem, 5vw, 2.5rem);
3 margin: 0 0 8px;
4}
02
実行結果
ブラウザでの表示このページのウィンドウ幅を変えると、見出しの大きさが変わります
03
解説
clamp() は3つの値を受け取り、推奨値を基本にしつつ、最小値より小さく・最大値より大きくならないように制限します。
推奨値に画面幅に比例する vw を使うと、画面が広いほど大きく、狭いほど小さくなります。上の例では、最小 1.25rem・最大 2.5rem の範囲で見出しが伸縮します。
メディアクエリで段階的に切り替えなくても、1行で滑らかなレスポンシブ対応ができます。
04
応用例・注意点
関連する関数
| 関数 | 説明 |
|---|---|
clamp(min, 推奨, max) | 範囲内に収める |
min(a, b) | 小さいほうを使う |
max(a, b) | 大きいほうを使う |
calc(式) | 計算する（例：calc(100% - 32px)） |
画面幅に応じて余白を変える
文字サイズ以外にも使えます。
CSS
1.section {
2 padding-block: clamp(40px, 8vw, 96px);
3}
4.container {
5 width: min(100% - 32px, 960px);
6 margin-inline: auto;
7}
注意点
- 01推奨値を vw だけにすると、ブラウザの拡大機能で文字が大きくならないことがあります。1rem + 2vw のように rem を混ぜると安心です。
- 02最小値が最大値より大きいと、最小値が使われます。