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

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

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

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

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

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

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

「clamp()関数」とは？

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

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

「関数」とは？

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

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

「引数」とは？

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

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

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

p {
  width: clamp( 400px, 80%, 900px );
}

「clamp()関数」を使うと、最小値と推奨値と最大値の設定をした上で、それをプロパティの値にセットすることができます。

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

• 最小値と推奨値と最大値の設定ができる。
• プロパティの値にセットすることができる。

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

最小値と推奨値と最大値の設定ができる。

p {
  width: clamp( 400px, 80%, 900px );
}

１つ目の引数で「最小値」の設定ができ、

２つ目の引数で「推奨値」の設定ができ、

３つ目の引数で「最大値」の設定ができます。

基本的に「推奨値」が使われて、推奨値が最小値を下回る際は「最小値」が使われて、推奨値が最大値を上回る際は「最大値」が採用されます。

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

p {
  width: clamp( 400px, 80%, 900px );
}

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

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

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

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

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

３個の引数をとる

p {
  width: clamp( 400px, 80%, 900px );
}

「clamp()関数」は「３個の引数」をとります。

１つ目の引数で「最小値」の設定ができ、

２つ目の引数で「推奨値」の設定ができ、

３つ目の引数で「最大値」の設定ができます。

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

p {
  width: clamp( 400px, 80%, 900px );
}

引数は「,」カンマで区切って書きます。

計算される

p {
  width: clamp( 400px, 80% + 30px, 900px );
}

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

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

p {
  width: clamp( 400px, 20% * 1vw, 900px );
}

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

（）括弧が使える

p {
  width: clamp( 400px, ( 30% + 30px ) * ( 1vh + 2px ), 900px );
}

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

min()、max()が使える

p {
  width: clamp( 400px, max( 20vw, 20vh ), 900px );
}

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

calc()は使わなくていい

p {
  width: clamp( 400px, calc( 20% + 30px ), 900px );
}

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

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

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

やったー！

「推奨値」を相対的な値にする。

p {
  width: clamp( 400px, 80%, 900px );
}

「推奨値」を相対的な値にすることで、最小値と最大値が活きてきます。

逆に「推奨値」の「200px」みたいな感じで絶対的な指定をしたら、最小値と最大値の意味がなくなってしまいます。

「推奨値」が「最小値と最大値の範囲」の外に出るタイミングを意識する。

p {
  font-size: clamp( 16px, 10vw, 30px );
}

上の指定だと、画面幅が「300px」になったタイミングでフォントサイズが「30px」になります。

そして画面幅が「300px」以上だと、常に最大値の「30px」が使われるような指定です。

これだと、「380px以上」の画面幅のデバイスが多い現状を踏まえると、ほぼ全てのデバイスで単に最大値の「30px」が使われるだけになってしまいます。これだと「clamp()関数」が上手く活かせていませんね。

p {
  font-size: clamp( 20px, 4vw, 36px );
}

「4vw」が「20px」になるのは画面幅が「500px」の時で、

「4vw」が「36px」になるのは画面幅が「900px」になる時です。

なので画面幅が「500px～900px」の時はフォントサイズが画面幅に合わせて変動する、という指定になります。

このように、「最小値を下回るタイミング」と「最大値を上回るタイミング」を計算することで、どの画面幅の範囲でフォントサイズを可変にしたいか設定することができます。

この「可変になる範囲」が狭すぎたり、無かったりすると、「clamp()関数」が上手く活用できてないと言えると思うので注意してください。

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

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

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

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

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

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

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

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

p {
  font-size: clamp( 64px, 8vw, 80px );
}

基本的に推奨値の「8vw」が使われて、最小値が「64px」で、最大値が「80px」になるように設定しました。

「8vw」が最小値の「64px」を下回るのは、画面幅が「800px」より下回ったタイミングです。

また、「8vw」が最大値の「80px」を上回るのは、画面幅が「1000px」より上回ったタイミングになります。

なので画面幅が「800px」～「1000px」の範囲でフォントサイズが可変になってますね。

レスポンシブ対応する際に便利だね！

Webブラウザの対応状況

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

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

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

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

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

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

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

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

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

参考リンク。

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

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

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

あわせて読みたい記事。

まとめ。

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

「clamp()関数」を使うと、最小値と推奨値と最大値の設定をした上で、それをプロパティの値にセットすることができる。

１つ目の引数で「最小値」の設定ができ、

２つ目の引数で「推奨値」の設定ができ、

３つ目の引数で「最大値」の設定ができる。

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

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

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

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

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

ではまた！