CSS clamp()計算ツールとは
CSSのclamp()は、1つの式で最小値、優先される流動的な値、最大値を設定します。モバイルとデスクトップの間でスムーズにスケーリングでき、複数のメディアクエリを記述する必要がないため、レスポンシブなフォントサイズやスペーシングによく使用されます。
クイックアンサー
流動的なタイポグラフィ、スペーシング、レイアウト値のためのレスポンシブCSS clamp式を計算します。最小サイズと最大サイズをビューポート範囲とともに入力すると、それらの間でスムーズにスケーリングする値を生成します。
Last updated: 2026-06-11
制限事項
- clamp()値は一度生成されると静的です。DOMの変更、ユーザー操作、コンテナの寸法に適応しません。レイアウトを意識したスケーリングには、代わりにコンテナクエリ単位の使用を検討してください。
- ビューポートベースの優先値は、極端な画面サイズで調整が必要になる場合があります。生成されたclamp値を非常に小さなビューポートと非常に大きなビューポートでテストし、カーブが自然に感じられるか確認してください。
- このツールは優先値にビューポート幅（vw）を使用します。コンテナクエリ単位（cqw）や他の新しいCSS単位は考慮しません。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- プロパティに適用する最小サイズと最大サイズを入力します。
- 最小値が適用され始めるビューポート幅と、最大値に達するビューポート幅を入力します。
- 生成するCSSプロパティを選択します。
- clamp式をスタイルシートにコピーし、モバイル、タブレット、デスクトップの各幅でテストします。
主な用途
- 多くのメディアクエリなしで流動的な見出しを作成する。
- モバイルとデスクトップの間でスペーシングをスムーズにスケーリングする。
- clamp値を直接CSSにコピーする。