Jun.25th,2021
＃
“min()”関数
“min()”関数は与えられた複数の値の中からもっとも小さいものを選択する比較関数です。
“min()”関数は以下の値が使用できる場所で使用できます。
- “<length>”値
- “<frequency>”値
- “<angle>”値
- “<time>”値
- “<flex>”値
- “<resolution>”値
- “<percentage>”値
- “<number>”値
- “<integer>”値
＃
“min()”関数の構文
引数は1個以上の数式をコンマ(“,”)で区切って記述します。記述順序とは関係なく、記述されたもののうちもっとも小さなものが値として返されます。
min(〚数式①〛,〚数式②〛,〚数式③〛, ...)
引数には数学関数(“clamp()”関数や“sin()”関数など)や数式が使用できます。
例えば、横幅を指定された大きさ以下で可変にしたい場合には“width”プロパティと“max-width”プロパティを使用する方法もありますが、“min()”関数を使用するとよりシンプルに実装することができます。
“min()”関数を使用しない場合
div {
width: 100%;
max-width: 800px;
}
“min()”関数を使用した場合
div {
width: min(100%,800px);
}
相対単位を使用して大きさを指定する他の場面でも使用できます。
div {
font-size: min(2em,30px);
}
＃
使用例
.width-100p { width: 100%;}
.width-100px-100p { width: min(100px,100%);}
.width-300px-100p { width: min(300px,100%);}
.width-500px-100p { width: min(500px,100%);}
.width-700px-100p { width: min(700px,100%);}
<p class="width-100p">
ほそやかに清げなる君たちの直衣姿。をかしげなる童女の、表の袴などわざとにはあらで、ほころびがちなる汗袗ばかり着て、卯槌・薬玉など長くつけて、高欄のもとなどに、扇さし隠して居たる。
</p>
<p class="width-100px-100p">
薄様の草子のいとつややかにて、紐の吹きなびかされたる、いとをかし。
</p>
<p class="width-300px-100p">
白き組の細き。帽額に白き札つきて、碇の緒、組の長きなどつけて引きありくも、をかしうなまめきたり。
</p>
<p class="width-500px-100p">
五月の節の菖蒲の立ち並み給へるに奉れる、いみじうなまめかし。取りて、腰にひきつけつつ、舞踏し、拝し給ふも、いとめでたし。
</p>
<p class="width-700px-100p">
紫の紙を包み文にて、房の君たちも、いとなまめかし。
</p>
ほそやかに清げなる君たちの直衣姿。をかしげなる童女の、表の袴などわざとにはあらで、ほころびがちなる汗袗ばかり着て、卯槌・薬玉など長くつけて、高欄のもとなどに、扇さし隠して居たる。
薄様の草子のいとつややかにて、紐の吹きなびかされたる、いとをかし。
白き組の細き。帽額に白き札つきて、碇の緒、組の長きなどつけて引きありくも、をかしうなまめきたり。
五月の節の菖蒲の立ち並み給へるに奉れる、いみじうなまめかし。取りて、腰にひきつけつつ、舞踏し、拝し給ふも、いとめでたし。
紫の紙を包み文にて、房の君たちも、いとなまめかし。
＃
