【CSS Modules】clamp()関数の使い方
clamp()関数の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
clamp()関数は、指定された値を最小値と最大値の間に制限する計算を実行する関数です。この関数は、主にCSSプロパティの値を柔軟かつレスポンシブに設定するために使用されます。3つの引数を受け取り、それぞれ最小値、推奨値、最大値を表します。
具体的には、まず中央に指定された推奨値が計算されます。もしこの推奨値が最初の引数で指定された最小値よりも小さい場合、結果は最小値になります。逆に、推奨値が最後の引数で指定された最大値よりも大きい場合、結果は最大値になります。推奨値が最小値と最大値の範囲内にある場合は、その推奨値がそのまま最終的な値として採用されます。
この関数は、特にレスポンシブデザインにおいて非常に強力なツールです。例えば、ビューポートのサイズに応じてフォントサイズや要素の幅を動的に変更しつつ、極端に小さくなったり大きくなったりするのを防ぐことができます。これにより、デザインの一貫性を保ちながら、様々なデバイスで最適な表示を実現することが可能になります。
また、異なるCSS単位（例：px、em、rem、vwなど）を組み合わせて指定できるため、非常に柔軟な値の定義が可能です。これにより、固定値、相対値、ビューポートに応じた値などを組み合わせて、より洗練されたレスポンシブなスタイルを構築できます。clamp()関数は、現代のWeb開発において欠かせないCSS機能の一つです。
公式リファレンス: clamp()
構文(syntax)
1font-size: clamp(1rem, 2vw + 1rem, 2.5rem);
引数(parameters)
min, val, max
- min: 最小値を指定するCSSの値
- val: 現在の値を計算するためのCSSの値
- max: 最大値を指定するCSSの値
戻り値(return)
CSSの値
clamp() 関数は、指定された3つの値のうち、中央の値が下限値と上限値の範囲内に収まるように調整されたCSSの値を返します。