min()

ミン（関数）

意味値の最小値を計算する関数

min()とは？

min()関数は、指定された値の中で最小の値を計算して適用するために使用します。

min()の具体的な使い方

要素の最小幅を設定する例

<style>
  .min-width-box {
    width: min(500px, 100%);
    padding: 20px;
    background: lightgray;
  }
</style>

<div class='min-width-box'>
  Min Width Box
</div>

親要素の幅が500ピクセル以下の場合は幅を500ピクセルに、それ以上の場合は幅を100%に設定します。

レスポンシブなフォントサイズを設定する例

<style>
    body {
        font-size: min(5vw, 30px);
    }
</style>

<p>レスポンシブなフォントサイズのテキスト</p>

ビューポートの幅に応じて文字サイズを調整し、最大30pxに制限します。

min()に関するよくある質問

Q. min()は複数の値を比較できますか？

A. はい、min()関数は2つ以上の値を比較できます。例えば、min(100px, 50%, 10vw)のように複数の値を指定できます。

Q. 計算式を含めることはできますか？

A. はい、min()関数内で計算式を使用できます。例えば、min(100% - 20px, 500px)のように記述できます。

Q. 異なる単位の値を比較できますか？

A. はい、min()関数は異なる単位の値を比較できます。ブラウザが自動的に適切な変換を行います。

min()が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのmin()やattr()、calc()、clamp()、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。