clamp()関数とは何か
clamp()は、CSSの比較関数です。最小値、推奨値、最大値の3つのパラメータを受け取り、その中間の値を自動的に選択します。つまり、ビューポート幅に応じてフォントサイズを流動的に変更できるということです。
従来は、メディアクエリを複数書いて細かくフォントサイズを調整していました。でも、clamp()なら1行で済みます。モバイルから大画面まで、スムーズなスケーリングが実現できるんです。
clamp()の基本構文：
font-size: clamp(最小値, 推奨値, 最大値);
実装方法と具体例
見出しのサイズを調整する場合、こんな感じです：
h1 { font-size: clamp(1.75rem, 5vw + 1rem, 3.5rem); }
これは、最小1.75rem（28px）、推奨値はビューポート幅の5%プラス1rem、最大3.5rem（56px）という意味です。スマートフォン（320px）では見出しが28pxで、デスクトップ（1440px）では56pxになります。
注記： このガイドは、レスポンシブウェブデザインの教育目的で提供されています。実装する際は、あなたのブランドガイドラインやユーザーテストの結果に基づいて、フォントサイズを調整してください。デバイスごとの読みやすさを確認することが大切です。
本文テキストのclamp()活用法
本文は見出しほど大きく変わる必要はありません。でも、小さい画面では読みやすく、大きい画面では適切なサイズに保つ必要があります。
p { font-size: clamp(0.875rem, 1vw + 0.5rem, 1.125rem); }
これなら、スマートフォンで14pxから、デスクトップで18pxまで、なめらかに調整されます。読む側にとって、どのデバイスでも疲れにくいサイズになるんです。
clamp()を使うメリット
メディアクエリが減る
複数のブレークポイントで調整する必要がなくなります。コードがシンプルになり、保守も簡単です。
スムーズなスケーリング
ジャンプするような変化がなく、連続的にサイズが変わります。ユーザー体験が自然で快適です。
計算が簡単
複雑な計算式不要。最小値と最大値を決めるだけで、自動調整してくれます。
ECサイトでの実践的な活用
ECサイトでは、商品名や価格の見やすさが売上に直結します。clamp()を使えば、スマートフォンユーザーにも、デスクトップ閲覧者にも、最適なサイズを自動で提供できます。
あるECサイトでは、商品タイトルをclamp(1.25rem, 3vw, 2rem)に設定しました。すると、モバイル版では20px、デスクトップでは32pxになり、どちらも読みやすいと評価されました。
ポイントは、あまり極端な値にしないこと。ユーザーテストを通じて、あなたのサイトに合う範囲を見つけることが大事です。
