CSS clamp() 計算ツール

小さい画面で使いたいサイズ、大きい画面で使いたいサイズ、そのあいだの 2 つのビューポート幅を入力してください。その 2 点を直線で結ぶ clamp() 値が作られ、よく使われる 7 つの幅での実際のサイズも表示されます。プレビューのサンプル文は生成された値でスタイル指定されているので、ウィンドウの幅を変えると本当に大きさが変わります。

入力したデータはどこかに送信されますか？

いいえ。ここで行われるのはブラウザー内の計算だけです。入力した数値がサーバーに送られることはなく、アカウントもログもネットワーク通信もありません。

計算の仕組みは？

CSS の clamp() は最小値、推奨値、最大値の 3 つを取ります。ブラウザーは推奨値を使いますが、最小値を下回ることも最大値を超えることもありません。

面白いのは推奨値の部分です。ビューポートに応じて伸び縮みする必要があり、それを担うのが vw 単位です。1vw はビューポート幅の 1 パーセントにあたります。ビューポート 320px で 16px、1280px で 48px にするには、960px の幅の変化で 32px 増やす必要があります。1 ピクセルあたり 0.0333px、つまり 3.3333vw です。ただし傾きだけでは狙ったサイズになりません。そこで固定のオフセットを足して直線の位置を合わせます。こうしてできるのが clamp(1rem, 0.3333rem + 3.3333vw, 3rem) で、中央の項が 2 つの部分に分かれているのはこのオフセットのためです。

数値は小数第 4 位で丸め、末尾のゼロは削除するので、1.5000rem ではなく 1.5rem が得られます。サイズの入力単位は px です。出力単位を rem にすると、ルートフォントサイズ（ブラウザーの初期設定では 16px）で割った値になります。

数値の組み合わせがおかしい場合は？

黙って誤った値を出さず、警告を表示します。2 つのビューポート幅が同じ場合は変化する範囲がないので、サイズは一定になり vw の項も消えます。最小サイズと最大サイズが同じ場合も同じ理由で警告が出ます。

特に注意したいのは、最小サイズが最大サイズより大きい場合です。CSS は clamp() を max(MIN, min(VALUE, MAX)) として解決するため、最小値が勝ち、サイズはそこに固定されたままになります。ブラウザーはこれを何も言わずに行います。プレビューの表には固定された値が表示され、警告がその理由を説明します。

どんなときに使う？

デスクトップでは大きく、スマートフォンでは読みやすくしたい見出し。375px の画面で 8rem のままにしたくないセクションの余白。カードグリッドの間隔。どんな幅でも空間を埋めてほしいヒーローテキストなどです。