BLOG株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。by一緒にラクーンのサービスをつくりませんか?採用情報カジュアル面談2021.4.1デザインフォントサイズを可変にしてみよう!css関数clampの便利なお話HTMLcssブログをご覧の皆様こんにちは、デザイン戦略部のJKです。googleがモバイルフレンドリーを提唱してからもはやレスポンシブ対応は必須になりましたが、レスポンシブ対応って悩ましいですよね。各デバイスの代表的な端末の解像度に合わせて作ればよいのですが、ウィンドウ幅を縮めてテストを繰り返していると微妙な幅の時にレイアウトが崩れているのが気になってしょうがない、なんてことザラにあります。width、height、font-size、padding、margin...上げていくとキリがありません。今回はそんな中でも頭を悩ませがちなfont-sizeに焦点をあてて、clampというCSSの関数をご紹介します。設定して可変にすることができる関数です。widthでいうmax-widthやmin-widthがイメージに近いです。最大値);という書き方になります。25px);とすると、ウィンドウ幅に対して1vwの大きさを基本としウィンドウ幅を縮小した場合15px以下になることはなく、逆にウィンドウ幅を拡大した場合に25px以上になることはありません。15~25pxの間で可変をしてくれるようになります。サンプルこちらのレイアウトでfont-size37pxを指定してみます。ウィンドウ幅が1000pxという中途半端な場合にカラム落ちを起こしてしまいます。clamp(30px,3vw,37px);と指定をすると簡単に解決できました!ウィンドウ幅を縮めるとフォントサイズも徐々に変わるというのも、何だかモダンな感じがしますね。問題点とても便利なclamp関数ですがやはり、欠点がありましてIEでは動きません。25px);というようにfont-sizeを重複指定する事で、IEでは20pxの指定を読み込むのでフォローできます。CSSチェッカーなどをお使いの場合、プロパティの重複があることによりエラー検知をしてしまうのでご注意を。※いっそIEは見限ってしまうのも手かもしれません補足ちなみにこのclamp関数、font-size以外でも使うことができます。padding、margin、width、heightなど、記述の仕方は全く一緒です。前述の通りclampはIEでは効かず、余白や高さ、横幅などは致命的なレイアウト崩れにつながるのでIEを考慮するなら使わないほうが無難でしょう。min関数、max関数clampに似ている仕様としてmin関数、max関数がありますのでご紹介します。いずれも値を二つ設定します。30px);minの場合は2個の値のうち、最小値となる値が適用されます。上記の場合30px以上になることはないですが、画面幅によって5vwに基づきフォントサイズは小さくなり続けます。30px);一方maxの場合は2個の値のうち、最大値となる値が適用されます。上記の場合30px未満になることはないですが、画面幅によって5vwに基づきフォントサイズは大きくなり続けます。両者とも場面によって使えそうですが、個人的にはclamp1つで間に合うかな、という印象です。総括clampいかがだったでしょうか?この幅の時だけ崩れていなければよい!という方針であれば不要かもしれませんが、指定幅以外の時に崩れているのをテスト段階で何度も見てしまうと、やはり直したくなるのが人情。いったcssを追求していくと、メディアクエリ無しでレスポンシブコーディングができてしまう、そんな予感もします。