CSSのmax(), min(), clamp() は、値を制限するための関数です。これらの関数は、レスポンシブデザインや動的に可変するスタイルの適用時に役立ちます。
コンテンツの幅・高さやフォントサイズなど大きさを指定するものには基本的に使用できるので、どんどん使って作業を効率化していきましょう。
以下に詳しく解説していきます。
max()
max() 関数は、指定された値のうち最大の値を選択します。これは、サイズや長さなどのプロパティに適用されます。この関数は、異なる単位の値（例: px、%）を比較することもできるので大変便利です。
width: max(200px, 50%);
/* 200px もしくは 50% のうち、大きい方を適用 */この例では、要素の幅が 200px または親要素の幅の 50% のうち、大きい方が適用されます。
maxという名前ですが、最大値を設定するのではなく、２つの数字のうち大きい方を採用する関数なので、固定値の部分は最小値を指定してください。
min()
min() 関数は、指定された値のうち最小の値を選択します。これもサイズや長さなどのプロパティに適用されます。この関数も同様、異なる単位の値（例: px、%）を比較することができるので大変便利です。
width: min(200px, 50%);
/* 200px もしくは 50% のうち、小さい方を適用 */この例では、要素の幅が 200px または親要素の幅の 50% のうち、小さい方が適用されます。
minという名前ですが、最小値を設定するのではなく、２つの数字のうち小さい方を採用する関数なので、固定値の部分は最大値を指定してください。
clamp()
clamp() 関数は、指定された範囲内で値を選択します。3つのパラメータがあり、最小値、推奨値、最大値の順で指定します。
width: clamp(100px, 50%, 200px);
/* 最小値: 100px, 推奨値: 50%, 最大値: 200px */この例では、要素の幅が最小で 100px、推奨値が親要素の幅の 50%、最大で 200px の範囲で選択されます。
フォントサイズの指定などで、大変便利なので使ってください。その際にline-heightなどをemで指定しておくと一緒に可変されるので併用して使ってください。
推奨値の計算
紹介した３つの関数の使い方は特別難しいものでもないので、理解が容易だと思いますが、問題は推奨値の計算ですよね。
推奨値の計算を簡単に行えるサイトを２つ紹介するのでぜひ活用してください。
こちらは、clamp() の計算に大変便利なサイトです使い方も直感的でわかりやすいので問題なく使えると思います。
もう一つは、今回紹介した関数以外のこともいろいろ計算できるサイトです。このサイトはほんとに重宝しているので、みなさんも使ってみてください。ほんとに便利です。
まとめ
この記事はレスポンシブで便利なmin(),max(),clamp()について解説しました。レスポンシブ対応の際にメディアクエリを何回も書いてそのたびにフォントサイズなどを設定するのは大変手間ですが、今回紹介した関数を使えば、かなり時短になるし表示も綺麗に可変することが可能なのでマスターしていきましょう。最初は難しいと思いますが、継続して頑張れば必ずできるはずなので頑張ってください。
「読んだだけでは100%身に付きません」
必ず行動に移してください。
そう言っても、
行動する人は20%
それを継続する人は5%
行動し続けるだけで、
上位5％に入ることができます。
今すぐ行動して上位5％に入り、
Web制作で本気で人生変えたい
そんな人は今すぐ登録してください
今行動しなきゃ、人生変わらないですよ
こちらの公式LINEではTwitter開始して1週間で案件獲得した勉強法、仕事の取り方などweb制作での収益化の方法を発信しています！
是非登録してみて下さい！
コメント