clamp関数について知っておこう

IE11が2022年6月16日を以てサポートが終了となり、起動するとEdgeが立ち上がるようになります。ということでいままでIE11未対応のため使いづらかったものも、ようやく素直に実装していくことが出来るようになります。CSSのclamp関数(およびmax、min)もそのひとつです。

clamp(最小値, 推奨値, 最大値);

推奨値が固定値だとなんの意味もなさないので、推奨値には%やvw、qwなどの可変値を使います。

このあたりで詳しく解説されています。

「max-widthでいいのでは？」とか「メディアクエリやコンテナクエリで都度書けばいいのでは？」と考えがちですが、最大値や最小値が一行で済むこと以上に、その間の値をシームレスに設定できることに強みがあります。

Bootstrapのようなフレームワークではメディアクエリが768px、992px、1200pxなど設定されており、そのサイズの時の見え掛かりを中心に確認しがちです。しかし実際のところ閲覧者が設定しているブラウザサイズはばらばらであるし、スマートフォンやタブレットも様々なサイズが存在します。

それら全てのサイズで都度確認することは現実的ではないので、「どういう幅であっても幅に合わせて伸縮して収まる」という作りが、これまで以上に重要になります。前回書いたコンテナクエリのように、親要素が可変するギミックも多数あります。

新たな仕組みを導入するのはいつでも大変ですが、ミニマムに導入して動作確認を取っていくなどして、過去案件含めて少しずつアップデートしていきたいものです。

ジェイオンラインではスタッフを随時募集しております。
採用情報ページよりお気軽にお問い合わせください。