複数の値から最小値または最大値を選択する関数です。レスポンシブデザインで条件分岐的な値設定が可能です。
min(<value>, <value>, ...) | max(<value>, <value>, ...)width: min(100%, 600px);100%と600pxの小さい方を選択
font-size: max(1rem, 3vw);1remと3vwの大きい方を選択
margin: min(5vw, 2rem) auto;レスポンシブなマージン設定
clamp()の代替として使える。calc()と組み合わせて複雑な計算も可能。
min()とmax()は直感と逆に働くためAIも人も混乱します: min(100%, 600px)は「最大600pxまで」という上限指定、max(50%, 300px)は「最低300pxを確保」という下限指定です。AIが逆の関数を選んでいないか、境界値で必ず確認してください。
コンテナ幅を「基本100%、ただし最大600px」にしたい。min()とmax()のどちらが正しいか説明付きで書いて
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。