画面サイズに応じた文字サイズ、面倒じゃありませんか？
レスポンシブデザインって、ついメディアクエリだらけになりがちですよね。
「スマホでは小さく」「PCでは大きく」と思っても、細かく条件を書き分けるのは骨が折れます。
そんなときに使えるのが、clamp()。
このCSS関数を使えば、最小値・理想値・最大値を一行で定義できるので、画面幅に応じてスムーズに値が変化してくれます。
clamp()を使いこなす3ステップ
まずは基本の使い方を、順を追って見ていきましょう。
- 最小値：これ以下にはならない下限を設定します（px単位が多め）
- 理想値：通常は
vwなどの相対値を使って動きを出します - 最大値：大画面で大きくなりすぎるのを防ぐ上限です
具体的なコードはこんな感じです：
/* スマートなフォントサイズ調整 */
h1 {
font-size: clamp(1rem, 4vw, 2.5rem);
}この1行だけで、スマホから4Kモニターまで、読みやすくて違和感のないサイズ感が実現できます。
文字サイズ以外でも活躍！clampの応用例
実はclamp()はfont-sizeだけじゃないんです。以下のようなプロパティにもバッチリ使えます。
/* レスポンシブな余白 */
section {
padding: clamp(16px, 5vw, 64px);
}
/* ボタンの横幅調整 */
button {
width: clamp(120px, 30vw, 300px);
}例えばカードレイアウトで、余白が狭すぎたり広すぎたりすると崩れた印象になりますよね。
でもclamp()を使えば、デバイスごとにベストな間隔を自動調整してくれます。
clamp()をもっと使いこなすコツ
- vwだけに頼りすぎない：理想値に
calc()を組み合わせると微調整に便利 - デザインの基準を明確に：最小・最大のサイズを先に紙に書いておくと設計しやすい
- CSS変数との併用：テーマ対応やダークモードとの相性も良好です
/* CSSカスタムプロパティと組み合わせる例 */
:root {
--spacing: clamp(1rem, 2vw, 2.5rem);
}
.container {
padding: var(--spacing);
}こんなふうに使えば、柔軟かつ保守性の高いスタイル設計が可能になりますよ。
まとめ：clamp()でCSSをもっと気持ちよく
メディアクエリでガチガチに書き分けていたあの頃とは、もうお別れ。clamp()を使えば、コードはスッキリ、見た目は自在にコントロールできます。
「ちょっと小さすぎ？」「デカすぎてダサい…」そんな悩みをCSSレベルで解消したいなら、今すぐclamp()を取り入れてみましょう！
