【CSS】min(),max(),clamp()を使用したブレークポイントに依存しないレイアウト

はじめに

みなさん、こんにちは！
最近コーディングを行っている際にmin()を使用した所、かなり便利だったので使い方など紹介させていただければと思います！

使おうと思ったきっかけは下記のレイアウトに関する問題が発生したことでした。

上記の問題の解決の糸口になったのがmin()関数です。
まだ使用したことがない方は、ぜひ使用してみてください。
同じような使い方の関数でmax()とclamp()もあるので、そちらも紹介させていただきます。

そもそもmin()はどのようなものか紹介します。

min()は()内に二つの値を設定し、小さい方の値が表示されます。
具体的な記述が以下になります。

.sample {
  width: min(20%, 100px)
}

上記の記述をした場合、親要素の幅が500px以上の時に100pxが選ばれます。
親要素が400pxの場合は、widthが400×20%=80pxとなるので20%側が選ばれます。

同様にmax()も紹介します。
max()はmin()の逆で2つの値を設定した際に大きいほうが表示されます。

.sample {
  width: min(20%, 100px)
}

上記の記述をした場合、親要素の幅が500px以上の時に20%が選ばれます。
親要素が400pxの場合は、widthが400×20%=80pxとなるので100px側が選ばれます。

clamp()は上記2つとは異なり、3つの値を設定します。
具体的にはカンマ区切りで(最小値 , 推奨値 , 最大値)の3つを指定し、その中の値から条件に合うものが表示されます。

.sample {
  width: clamp(300px, 50%, 600px)
}

上記の記述をした場合、300pxが最小値、50%が推奨値、最大値が600pxとなります。

例えば親要素が1000pxの場合、50%=500pxの推奨値が適用されます。
1500pxの場合は推奨値が750pxとなり最大値を超えてしまうため、最大値の600pxが適用されます。
500pxの場合は推奨値が250pxとなり最小値未満となるため、最小値の300pxが適用されます。

イメージとしては、1行でmin-widthとmax-widthを設定できるようなプロパティです。

基本的な関数の使い方を紹介したところで、ここからは実際にレイアウト等での使用法をご紹介します！

カードの幅をmin()にて指定することで、ユーザーが画面幅を縮小してもレイアウトが崩れません。

.card {
  width: min(300px, 50%)
}

サイドバーにmax()を使用することで、必要以上に小さくならず、可読性が確保されます。

.sidebar {
  width: max(200px, 20%);
}

フォントサイズをclamp()で設定することで、デバイスに合わせてフォントがバランス良く調整されます。
ブレークポイントに依存せずちょうどいいサイズで表示されるため、個人的によく使います！

h1 {
  font-size: clamp(1rem, 5vw, 3rem);
}

コンテナ幅をmin()とmax()を合わせて指定することにより、画面幅に合わせて自動調整されます。

.container {
  width: min(max(300px, 30%), 90%);
}

どのように表示されるかケースごとに紹介します。

いかがでしたでしょうか。
今までmin-width等で指定していた要素の幅も紹介したmin()等を使用することで柔軟な幅の指定が可能になります。
改めてそれぞれの特徴をまとめます。

また、min()等を上手く活用することでブレークポイントを細かく設定せずとも要素幅が良い感じに自動調整されるので、
積極的な活用をおすすめします！

ぜひ色々な要素に使用してみてください！