こんにちはrey( @reydesign8376) です
都内の勤務生活を辞めてWebデザイナーに。今は趣味のサーフィンなどしながら海沿いでのんびり暮らしています。
私、レスポンシブのコーディンがめちゃ下手です！
「フォントサイズやボタンの幅、どうやって調整してる？」 「メディアクエリを減らしてレスポンシブ対応したい！」
めんどくさがりなので、楽してコーディングしたい。。。って考えてます。
そんな感じで、レスポンシブデザインに欠かせない clamp() や min() の使い方をおさらいしてきます
ではいく〜
clamp() とは？
CSSの clamp() を使えば、値を「最小値・推奨値・最大値」の範囲で自動調整できます。
例えば、フォントサイズをレスポンシブにするにはこんな感じ！
font-size: clamp(14px, 2vw, 20px);このコードがどう動くかというと…
- 最小値：14px（どんなに狭い画面でもこれ以下にはならない）
- 推奨値：2vw（ビューポートの2%を基準に変動）
- 最大値：20px（どんなに広い画面でもこれ以上にはならない）
つまり、 画面が狭い時は14px、広くなると2vwで変動し、20pxを超えない！
メディアクエリを増やさずに、柔軟なサイズ調整ができるのがポイントです。
min() とは？
min() は、指定した値の 最も小さいもの を適用する関数です。
例えば、ボックスの幅を「90% か 1200px のどちらか小さい方」にしたい場合…
.container {
width: min(90vw, 1200px);
}- 90vw（ビューポートの90%）
- 1200px（固定幅）
この場合、画面幅が1340px以上なら1200px、狭い時は90vwになる！
「最大幅を制限しつつ、柔軟に調整したい」ときに便利です。
min()の応用編
もう一つの min() の活用例として、次のような書き方もあります。
font-size: min(16px, 16/750*100vw);ポイント
- 16px → 最小サイズ（これ以下にはならない）
- 16/750 × 100vw → 画面幅750pxを基準にしたレスポンシブなフォントサイズ
例えば、750px のデザインカンプで 16px のフォントサイズを指定していた場合、 「その比率をそのまま維持しながら、750px以下なら16pxを基準にスケールさせる」 という仕組みになります。
これにより、大きな画面では 750px幅のデザイン比率を維持しつつ、狭い画面では最小16pxを確保 できます！
ついでにmax() も覚える
max() は min() の逆で、最も大きい値 を適用します。
例えば、ボタンの高さを最低50pxにしつつ、10vhを基準にしたい場合…
button {
height: max(50px, 10vh);
}「小さい画面でも最低限のサイズを確保しつつ、大きい画面ではゆったり調整する」なんてときに使えます。
clamp() vs min() vs max() の使い分け
| 関数 | 使い方 | 例 | 主な用途 |
|---|---|---|---|
clamp() | 範囲内で調整 | clamp(16px, 2vw, 24px) | フォントサイズ・余白など |
min() | 最大値を制限 | min(90vw, 1200px) | コンテンツの最大幅制限 |
max() | 最小値を確保 | max(50px, 5vw) | 高さ・最小余白など |
実際のコード例
① フォントサイズをレスポンシブに調整
h1 {
font-size: clamp(18px, 3vw, 32px);
}→ 画面が狭い時は18px、広い時は32pxに！
② ボックスの最大幅を調整
.container {
width: min(90vw, 1200px);
}→ 90vw を基準にしつつ、最大1200pxに制限！
③ フッターの高さを調整
footer {
height: max(60px, 5vh);
}→ どんなに小さい画面でも最低60pxは確保！
まとめ
CSSの clamp() や min() を使えば、 メディアクエリを減らして、より柔軟なレスポンシブデザインが可能！
clamp()→ 範囲内で値を調整min()→ 最大値を制限max()→ 最小値を確保
ぜひ、プロジェクトに取り入れてみてくださいね！
今後も、デザインに役立つCSSテクニックを紹介していきますので、ぜひチェックしてくださいね！
では〜👋
コメント