このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

max()”関数CSS Values and Units Module Level 4 で追加

記事Jun.25th,2021
与えられた複数の値の中からもっとも大きいものを値として使用するCSSの関数、“max()”について
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

max()”関数

max()”関数は与えられた複数の値の中からもっとも大きいものを選択する比較関数です。

max()”関数は以下の値が使用できる場所で使用できます。

max()”関数の構文

引数は1個以上の数式をコンマ(“,”)で区切って記述します。記述順序とは関係なく、記述されたもののうちもっとも大きなものが値として返されます。

max(〚数式①〛,〚数式②〛,〚数式③〛, ...)

引数には数学関数(clamp()”関数sin()”関数など)や数式が使用できます。

例えば、横幅を指定された大きさ以上で可変にしたい場合にはwidth”プロパティmin-width”プロパティを使用する方法もありますが、“max()”関数を使用するとよりシンプルに実装することができます。

max()”関数を使用しない場合
div {
width: 100%;
min-width: 200px;
}

max()”関数を使用した場合
div {
width: max(100%,200px);
}

相対単位を使用して大きさを指定する他の場面でも使用できます。

div {
font-size: max(2em,10px);
}

使用例

.width-100p { width: 100%;}
.width-100px-100p { width: max(100px,100%);}
.width-300px-100p { width: max(300px,100%);}
.width-500px-100p { width: max(500px,100%);}
.width-700px-100p { width: max(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>

ほそやかに清げなる君たちの直衣姿。をかしげなる童女の、表の袴などわざとにはあらで、ほころびがちなる汗袗ばかり着て、卯槌・薬玉など長くつけて、高欄のもとなどに、扇さし隠して居たる。

薄様の草子のいとつややかにて、紐の吹きなびかされたる、いとをかし。

白き組の細き。帽額に白き札つきて、碇の緒、組の長きなどつけて引きありくも、をかしうなまめきたり。

五月の節の菖蒲の立ち並み給へるに奉れる、いみじうなまめかし。取りて、腰にひきつけつつ、舞踏し、拝し給ふも、いとめでたし。

紫の紙を包み文にて、房の君たちも、いとなまめかし。

仕様書

定義されている仕様書
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告候補(CR) 作業草稿(WD)
max()
定義なし

定義なし

定義なし

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク