【CSS】「max()関数」について丁寧に解説。【分かりやすい】

CSSの「max()関数」の使い方を丁寧に教えてほしい。

この記事では「max()関数」の使い方について解説します。

この記事を読むことで、これらの知識が得られます。

また、下の動画でも「max()関数」について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

上手く使えば便利な場面もある関数なので、サクッと読んでね！

では、内容へ入っていきますね！

「max()関数」とは？

「max()関数」とはCSSに用意されている関数の１つです。

CSSという言語にも関数があります！

関数とは？

関数とは、「値を渡すと」「何か一定の処理をしてくれる」ものです。

例えば、複数の値を渡すと、その中で最小のものを選んで返してくれる、などですね。

「引数」とは？

関数に渡す値のことを「引数」といいます。

これはCSSに限らず他のプログラミング言語でも使われる用語なので知っておいてください！

「max()関数」を使うと何ができる？

p {
  width: max( 40%, 400px );
}

「max()関数」を使うと、引数の中で最大のものをプロパティの値にセットすることができます。

ここで重要なのは下記の２点です。

• 引数の中で「最大」のものが採用される
• プロパティの値にセットすることができる

これらについて詳しく、みていきます。

引数の中で「最大」のものが採用される

p {
  width: max( 40%, 400px );
}

上の例では、「40%」と「400px」が引数として渡されています。

その２つが比べられ「最大」のものが採用されます。

プロパティの値にセットすることができる

p {
  width: max( 40%, 400px );
}

上の例では、「width」プロパティに値をセットする感じで使っています。

そのような位置で「max()関数」は使います。

「max()関数」の使い方！

それでは「max()関数」の使い方のポイントは下記の通りです！

では一つ一つ丁寧に解説していきます！

「,」カンマ区切りで書く

p {
  width: max( 40%, 400px );
}

「,」カンマで区切って複数の値を書けます。

１個以上の引数を取る

p {
  width: max( 40%, 400px, 30vh );
}

１個以上の引数を渡してあげればOKです！３個でも４個でも。

その中で最大のものが採用されます。

計算される

p {
  width: max( 40%, 400px + 3vh );
}

引数には計算式が使えます。そのまま計算式を書いてあげればOKです！

( + ) ( – )( * ) ( / ) の演算子が使える

p {
  width: max( 40%, 400px * 1vh / 2 );
}

これらの演算が使えます。

（）括弧が使える

p {
  width: max( 40%, ( 30% + 30px ) * ( 1vh + 2px ) );
}

（）括弧を使うこともできます。括弧の中が先に計算されます。

min(),clamp()などを含めてもOK！

p {
  width: max( 500px, min(60%, 90vh) );
}

「max()関数」の中には「min()関数」「clamp()関数」を含めて書くことができます！

calc()は使わなくていい

p {
  width: max( 40%, calc(36% + 3vh) ); ✖
  width: max( 40%, 36% + 3vh );  〇
}

「calc()関数」を使わなくても、計算されるのでそのまま「計算式」を書いてあげればOKです。

順番は何でもOK！

p {
  width: max( 400px, 40% );
  width: max( 40%, 400px );
}

この２行は同じ意味になります。

複数の値の中から単純に最大の値が採用されるので、順番は入れ替えてもOKです。

「max()関数」を上手に使うコツ！

「max()関数」を上手に使うコツとしては下記が挙げられます。

では個別に書いていきますね！

「相対的な指定」と「絶対的な指定」の両方を一緒に使う

.box {
  width: max( 40%, 400px );
}

「max()関数」を上手に使うには「相対的な指定」と「絶対的な指定」の両方を一緒に使うといいです。

上の例では片方は「%」を使った相対的な指定で、もう片方は「px」を使った絶対的な指定になっていると思います。

こうすることで、画面幅などによって「相対的な指定」の方は変化していきます。そして、「絶対的な指定」を超えるかどうかで採用される値が変わる、という感じになりいい感じです。

「最小値」の設定をする感じで使う

.box {
  width: max( 40%, 400px );
}

「max()関数」という名前なのに最小値？と思うかもしれませんが、使い方としては最小値の指定をする感じで使います。

基本は「40%」などが使われて、「400px」などのもう一つの値よりも小さくなる場合はその「400px」が使われる、と言う感じなので、ここで絶対的な指定をしている「400px」というのは「最小値」になります。

相対的な指定をするには？

相対的な指定をするには下記の単位を使えばOKです。

• 「％」
• 「vw」
• 「vh」
• 「em」
• 「rem」

これらの単位の使い方については、僕の下記の記事でしています！

絶対的な指定をするには？

絶対的な指定をするには「px」を使って指定すればOKですね！

「max()関数」の使い方が分かってきた！分かりやすい！

「max()関数」の使用例！

ここでは「シンプルな使用例」と「上手い使用例」の２つを紹介します。

やったー！

「font-size」に使う。

p {
  font-size: max( 3vw, 16px );
}

基本的に画面幅に合わせてフォントサイズを変化させるために「3vw」が使われて、それが「16px」よりも小さくなるタイミングで「16px」が使われ始めます。

なので最小でも「16px」のフォントサイズを確保して、あとは画面幅に合わせてフォントサイズを大きくする、みたいな使用例ですね。

こんな感じで「max()関数」はレスポンシブ対応する際に便利ですね。

「max()関数」と「min()関数」を組み合わせて使う。

p {
  font-size: max( min( 3vw, 30px ), 16px );
}

上の例では、「max()関数」の中に「min()関数」を入れています。

こうすることで、フォントサイズは「16px～30x」の範囲で画面幅に合わせて変動します。

こうすることで極端に「大きくなりすぎず」「小さくなりすぎない」という柔軟な指定が可能です。

おお！これは便利だね。

「min()関数」については僕の下記の記事で解説しています！

「max()関数」を使う上での注意点！

「max()関数」を使う上での注意点についても書いておこうと思います！

気をつけてね！

「calc()関数」を使わなくてOK！

p {
  width: max( 400px, 40% + 30px );
}

このように「calc()関数」を使わなくても、計算されるのでそのまま「計算式」を書いてあげればOKです。

絶対指定したものは最小値になる。

.box {
  width: max( 40%, 400px );
}

先ほども書きましたがリマインドです。

上の例で「400px」という絶対的な指定がありますが、これが「最小値」になります。

Webブラウザの対応状況

引用元：https://caniuse.com/?search=max()

ブラウザの対応状況を調べるには、「Can I use」というWebサイトを参照するといいと思います。

「max()関数」は、主要ブラウザでは対応しているようなので、安心して使って大丈夫だと思いますね。

最新の情報は、上記のリンクから「Can I use」へアクセスして確かめてみてください。

IE（Internet Explorer）では対応していないので注意！

「max()関数」は「Internet Explorer」というWebブラウザには対応していないようです。

2022 年 6 月 16 日（日本時間）をもって、Internet Explorer のサポートが終了しました。現在も当該ソフトウェア製品を利用している場合は、速やかにサポートが継続しているブラウザへ移行し、IE コンテンツを改修してください。
引用元：IPA 独立行政法人 情報処理推進機構

Microsoft 社 Internet Explorer のサポート終了について

とはいえ「IE」はもう既に開発元である「Microsoft 社」にサポートされていないので、「max()関数」は使っても大丈夫だと個人的に思います。「IE」になんとしても対応しなければならない理由がある方は別ですけどね。

参考リンク。

仕様書。
https://drafts.csswg.org/css-values/#funcdef-max

MDN。
https://developer.mozilla.org/ja/docs/Web/CSS/max

Can I use
https://caniuse.com/?search=max()

あわせて読みたい記事。

まとめ。

「max()関数」とはCSSに用意されている関数の１つ。

「max()関数」を使うと、引数の中で最大のものをプロパティの値にセットすることができる。

引数は「,」カンマ区切りで書く。

１個以上の引数を取ることができる。３個でも４個でも。

値は計算される。

使える演算子は下記の通り。

（）括弧も使える。

そして、min(),clamp()などを含めてもOK！

calc()は使わなくていい。

値を書く順番は何でもOK！

「max()関数」を上手に使うコツとしては下記が挙げられる。

「max()関数」と「min()関数」を組み合わせて使うという、上手い使い方がある。

また、「max()関数」は、主要ブラウザでは対応しているようなので、安心して使って大丈夫だと思う。

だけど、IE（Internet Explorer）では対応していないので注意！

また、下の動画でも「max()関数」について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

ではまた！