“clamp()”関数

“clamp()”関数

“clamp()”関数は値を一定の範囲内に収まるように指定する比較関数です。

“clamp()”関数は以下の値が使用できる場所で使用できます。

• “<length>”値
• “<frequency>”値
• “<angle>”値
• “<time>”値
• “<flex>”値
• “<resolution>”値
• “<percentage>”値
• “<number>”値
• “<integer>”値

“clamp()”関数の構文

引数は3個の数式をコンマ(“,”)で区切って記述します。引数には数学関数(“min()”関数や“sin()”関数など)や数式が使用できます。

引数は最低値、中間値、最大値の順に記述します。

中間値が指定された最低値と最大値の間にある場合は“clamp()”関数は中間値をそのまま値として返します。中間値が最低値を以下である場合は最低値、中間値が最大値を以下である場合は最大値を値として返します。

最小値が最大値よりも大きい場合には最小値が優先されます。例えば、“clamp(800px,100%,200px)”は“800px”を表します。

“max()”関数に“min()”関数を入れ子にした場合と同じ値を表すことができます。

例えば、横幅を指定された範囲内で可変にしたい場合には“width”プロパティと“min-width”プロパティ、“max-width”プロパティを使用する方法もありますが、“clamp()”関数を使用するとよりシンプルに実装することができます。

相対単位を使用して大きさを指定する他の場面でも使用できます。

使用例

<p class="width-100p">

春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。

</p>

<p class="width-100px-100p-300px">

夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。

</p>

<p class="width-300px-100p-500px">

秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。

</p>

<p class="width-500px-100p-700px">

冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。

</p>

春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。

夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。

秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。

冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。

仕様書

定義されている仕様書

clamp()