STAFF BLOG
TOP ー STAFF BLOG
スタッフブログ
【CSS】比較関数min()・max()・clamp()の使い方と使用例！
Posted by Yabe
こんにちは、フロントエンドエンジニアの矢部です！
今回は、コーディングをする際に要素のサイズやレイアウトを柔軟に制御できる非常に便利なCSSの比較関数、min()・max()・clamp()について解説していきます。
比較関数について
CSSの比較関数は、要素のサイズやレイアウトを動的に設定する際に役立つ機能です。
特にmin()・max()・clamp()は、異なる値や単位を組み合わせて柔軟にスタイルを設定することができます。
min()の使い方
min()関数は、設定した値の中で最小値を返します。
次の例では、親要素の幅が200px以上であれば200px、それ以下の場合は親要素の100%の幅に設定されます。
このようにmin()関数は状況に応じた最小値を値として返してくれるで要素を200px以上大きくしたくない時などに使用することができます。
使用例
.box {
width: min(200px, 100%);
}
また、上記のmin()関数は次の例のようなプロパティと値を設定した場合と同じ動作になります。
今まで、widthとmin-widthで記述していたCSSがmin()を使用することで1行で納めるというわけです！！
.box {
width: 100%;
max-width: 200px;
}
max()の使い方
max()関数は、設定した値の中で最大値を返します。
これにより、要素のサイズを最大値で制限することができます。
次の例では、親要素の幅が200px以上であれば最大の値である100%、それ以下の場合は200pxに設定され、要素が200px以下にならないよう制限をしくれます！
使用例
.box {
width: max(200px, 100%);
}
上記のmax()関数は次の例のようなプロパティと値を設定した場合と同じ動作になります。
min()関数と同じように今まで、widthとmin-widthで記述していたCSSが1行で納めるというわけです！！
.box {
width: 100%;
min-width: 200px;
}
clamp()の使い方
clamp()関数は、設定した最小値、推奨値、最大値の範囲内で値を制限します。
つまり要素の最小値と最大値の範囲内で推奨値に設定した値を返してくれます！
次の例では200px以上500px以下の範囲で親要素の100%の値がboxの幅になります。
使用例
.box {
width: clamp(200px, 100%, 500px);
}
上記clamp()関数は次のmin-widthとmax-widthを使用した動作と同じ値になります。
.box {
width: 100%;
max-width: 500px
min-width: 200px;
}
まとめ
比較関数を活用することで、今まで複数行で記述していたコードを1行にまとめることや、レスポンシブデザインを実装する際に柔軟で効率的なスタイリングを行うことができます。異なるデバイスや画面サイズに対応したスタイルを設定する際に、是非とも活用してみてください。
