レスポンシブデザインのコーディングでフォントサイズが大きくなりすぎたり小さくなりすぎたりするのはclamp()で回避できる

Webサイトを様々な大きさのデバイスに一つのHTMLで対応するレスポンシブデザインでは、ビューポート(表示エリア)の幅や高さに合わせて要素のサイズやレイアウトなどをコントロールするわけですが、フォントサイズはその性質上、幅や高さにストレートに合わせると大きくなりすぎたり、小さくなり過ぎたりします。そこで各ブレイクポイントごとにフォントサイズを指定していくわけですが、CSSのclamp()関数を使えばコーディングの負担が減りよりスマートにレスポンシブデザインを実現出来るかも知れません。

使い方

font-size: clamp(20px,6.4vw,64px);

()の中身は左から、最小値、推奨値、最大値となっています。
vwや%などのビューポートや親要素の相対値でサイズを扱う場合でも、最小値より小さくなる事はなく、最大値を超える事もないのです。


先の使い方(font-sizeプロパティ)を参考にすると、推奨値の6.4vwが基本的に使われるものの、20pxより小さくなる事はく64pxより大きくなる事はありません。
そしてclamp()は様々なプロパティで使うことが出来ます。
width、height、line-heightなどでも有効です。


投稿日

最終更新日

カテゴリー:

投稿者:

タグ: