最近便利なCSSおれおれAdvent Calendar 2023 – 16 日目

自分はよく本文の幅に使ってます。基本的に（余白を別にして）横一杯に広げるけど最大最小の幅も一緒に指定できます。

例

.Container {
  width: clamp(320px, 100%, 50rem);
}

clamp(A, B, C) は max(A, min(B, C)) と同じです。

ちなみに width に限るならこれも同じ結果に。

.Container {
  min-width: 320px;
  width: 100%;
  max-width: 50rem;
}

演算できる

clamp() の値には数式を利用できるので、他の関数を入れ子で利用したり、calc() なしに四則演算を記述したりできます。

.Container {
  width: clamp(100px * 3 + 20px, max(0%, 100%), 50 * 16px);
}

良い感じの例が思い付きませんでしたｻｰｾﾝ。

クランプとは

実物はものを固定する工具です。

クランプ（英: clamp）は、材料を作業台に固定する工具。締め具ともいわれ、作業時に手を使わずに材料を安全かつ確実に押さえる事が出来る。

クランプの写真。

おしまい

JavaScript でもときどき欲しいときがある。

参考