Felly00505 https://blog.hatena.ne.jp/Felly00505/ arms inc. Engineers' Blog https://tech.arms-soft.co.jp/ フロントエンド CSS こんにちは、ユアサです。 コーディングをする際、レスポンシブレイアウトなどにどうしても数値の有効範囲を指定したいという場面があることも多いかと思います。今回は、数値の最大値・最小値を指定できる比較関数を備忘録もかねてまとめていきます。 使う場面の例 使える場面は様々ですが、冒頭にも言った通りレスポンシブレイアウトに使うのが主流になるかと思います。 親要素の◯◯%分のサイズ・位置を参照している、あるいはウィンドウ幅（vw・vh）に合わせて柔軟に対応しているけど、想定以上の数値になるのはちょっと・・・・という場面で役に立ってきます。 最大値を指定できるmin()、最小値を指定できるmax()、そし… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Ftech.arms-soft.co.jp%2Fentry%2F2023%2F06%2F07%2F090000" title="最小値や最大値を指定してスタイルを制限！比較関数min()、max()、clamp()を使おう - arms inc. Engineers&#39; Blog" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/F/Felly00505/20230920/20230920163840.jpg Hatena Blog https://hatena.blog 2023-06-07 09:00:00 rich https://tech.arms-soft.co.jp/entry/2023/06/07/090000 1.0 100%