CSS clamp()・単位変換

CSSのclamp()とは

clamp(MIN, VAL, MAX)は、中央の可変値VALを最小値MINから最大値MAXの範囲に制限するCSS数学関数です。概念的にはmax(MIN, min(VAL, MAX))と同じです。MINとMAXが逆の場合はCSS仕様上MIN側が優先されますが、このツールの直接作成モードでは入力ミス防止のため、同じ単位でMIN > MAXをエラーにします。

font-size: clamp(16px, 2vw, 24px);なら16px未満と24px超を防ぎ、中間では2vwを利用します。どの画面幅で境界に達するかは中央の式によって変わります。引数内の単純な加算式は、不要なcalc()を重ねず記述できます。

仕様の基準：W3C CSS Values and Units Level 4

画面幅に応じて滑らかにサイズを変える

2つの画面幅とサイズを結ぶ一次関数を作り、傾きを(最大側サイズ - 最小側サイズ) ÷ (最大画面幅 - 最小画面幅)、切片を最小側サイズ - 傾き × 最小画面幅として計算します。1vwはviewport widthの1%なので、傾き×100をvw係数として利用できます。

pxはCSSの絶対長単位です。remはルート要素のfont-sizeを基準にする相対単位で、本ツールでは変換基準を変更できます。メディアクエリを何段階も追加せず、一定範囲で連続的に変化させたいfont-sizeや余白などに利用できます。各プロパティが指定した値型を受け付けるかは確認してください。

px・rem・em・ptの変換方法

remはルート要素、emは利用する文脈のfont-sizeを基準にします。rem = px ÷ root font-size、em = px ÷ em基準font-sizeで変換し、2つの基準値は独立して指定できます。

CSSの絶対長では1in = 96px、1pt = 1/72inです。したがってpt = px × 72 ÷ 96となります。中間値は丸めず、最終表示だけ指定した小数桁へ整形します。画面上のptはreference pixelを基準にする場合があり、物理的な印刷実寸を保証するものではありません。