こんにちは！
福岡のホームページ制作会社 デザイントランスメディアの小畑です。
昨今、みなさまがご覧になっているホームページは、レスポンシブ対応しているものが多いのではないでしょうか。
この、レスポンシブ対応のために、制作陣は日々苦労していたりします。
どのデバイスで見ても綺麗に、わかりやすいサイトを作るのは意外と工数がかかるものなのです。
そしてレスポンシブ対応を簡単にするため、技術も日々進化しています。
今回は、ホームページのスタイルを指定するための言語、CSSの中で、私が感動したプロパティ「clamp()」についてお話ししたいと思います。
便利すぎるCSS比較関数
clamp()のすごいところは、任意のプロパティの最小値と最大値を指定しつつ、画面幅に合わせた推奨値を指定できるところです。
といっても難しいと思うので…
例えば、ある写真をウィンドウ幅の80%のサイズで出したいとします。
でもウィンドウ幅が小さい時は写真が小さくなりすぎたり、逆にウィンドウが大きい時は写真が大きくなりすぎて見辛くなってしまいがちです。
そこで、写真横幅の最小値を900px・最大値を1300pxと決めたいとします。
clamp()がなくても実現可能でしたが、clamp()を用いるととても簡単に指定できます。
このように幅指定がとても楽になるのですが、私が感動したのは、この指定が最小値や最大値が指定できないプロパティ、つまりフォントサイズの指定にも使えるということです！
今まで、画面幅によってフォントサイズを変えたい場合、vwで画面幅に応じた指定をしつつ、ある一定のウィンドウ幅より小さい場合と大きい場合を別で指定していました。
しかし、clamp()を使うとこの指定も1行で出来てしまうのです！感動！
様々なデバイスに対応するホームページ制作の中で、何が可能なのか、どういうことが難しいのかというのは、実際に制作してみなければわからないことだと思います。
今回の記事を読んでいただいた皆様には、その部分を少しでもわかっていただけたなら嬉しいです！
