max()

マックス（関数）

意味複数の値の中から最大値を選択

max()とは？

max()関数は、指定された複数の値の中から最大値を計算して適用するために使用します。

max()の具体的な使い方

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

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

<div class='max-width-box'>
  Max Width Box
</div>

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

最小マージンを保証する例

margin-top: max(10vh, 50px);

ビューポートの高さに応じて上マージンを設定し、最小50pxを保証します。

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

Q. max()とmin()の違いは何ですか？

A. max()は指定された値の中で最大の値を選択し、min()は最小の値を選択します。max()は「少なくともこの値」、min()は「最大でもこの値」という意味合いで使用されます。

Q. max()内で変数を使用できますか？

A. はい、max()関数内でCSS変数（カスタムプロパティ）を使用できます。例：max(var(--min-width), 50%)のように記述できます。

Q. max()は他の関数と組み合せられますか

A. はい、max()は他のCSS関数と組み合わせて使用できます。例えば、max(calc(100% - 50px), 300px)のように、calc()関数と組み合わせることができます。

CSSのmax()についても学べる書籍の紹介

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

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