PlusOne Blog

【CSS】比較関数 min()関数

比較関数とは、複数の値を比較し、使用された関数に基づいてそれらの1つの値を利用する関数です。
比較関数として次の3つが挙げられます。
・min()
・max()
・clamp()
この3つについて、これから3回にわけて順に説明していこうと思います。
 

min()

min()関数には、1つ以上のコンマ区切りの計算が含まれ、それらの最小値を表します。つまり、最大値を設定するにはmin()を使用します。
 
例えば、要素の最大幅を700pxにしたい場合は、下記のように記述します。

 .element {
    width: min(50%, 700px);
 }


 

min()関数を使用すると、ブラウザは値(50%, 700px)の中で最も小さい値を選択する必要があります。
どちらを選択するかはこの場合は%単位を使用しているため、ビューポートの幅に依存します。
50%の値が700pxよりも大きい場合は無視され、代わりに700pxが使用されます。

 
そうでない場合、つまり50%の値が700px未満の場合は、50%が幅の値として使用されます。
そうなる場合のビューポートの幅は、Xの50%イコール700pxなので、ビューポートの幅は1,400pxです。
 
 

この記事を読む
記事一覧に戻る