ツールでできること
最小サイズと最大サイズ、ビューポート範囲を CSS clamp() の値に変換し、主要な画面幅での表示結果を示したうえで、素の CSS、カスタムプロパティ、Tailwind クラスとして書き出します。タイプスケールモードではモジュラースケール一式を、余白モードでは padding・margin・gap 用の値を同じように作成できます。
こんな人のために
スプレッドシートを開かずに確かな clamp() の値を手に入れたいフロントエンド開発者、レスポンシブな文字組みの仕様を引き渡すデザイナー、フルードなトークンでデザインシステムを構築するチームのためのツールです。各ページの解説は、初心者でも計算の流れを追えるように書かれており、経験豊富な開発者は結果をコピーしてすぐ作業に戻れます。
つくり
サイトは Next.js で静的に生成され、すべてブラウザ内で動作します。アカウントもデータベースもなく、サーバー側の処理もありません。入力した値はページの URL にだけ存在します。計算処理はユニットテスト済みの小さな TypeScript モジュールで、サイトは 7 言語に対応しています。
フィードバック
FluidClamp は、ContrastCheck やアスペクト比計算ツールなど、ほかの無料 Web ツールとあわせて運営しています。バグや不自然な翻訳を見つけたら、プロジェクトの GitHub リポジトリからお知らせください。