CSSの比較関数が便利すぎる！ min(), max(), clamp()の使い方を詳しく解説

CSSの数学関数と言えば、calc()が便利ですよね。 しかし、便利な数学関数はcalc()だけではありません！ 先月、Firefoxにサポートされたことにより、すべてのモダンブラウザにサポートされたCSSの比較関数「min()」「max()」「clamp()」の使い方を紹介します。 最大幅や最小幅を計算式で定義できる「min()」「max()」、フォントサイズの最小値と最大値をコの字のクランプのように計算式で定義できる「clamp()」、 これからのWebページやスマホアプリの実装にかなり役立つと思います。 Everything I Learned About min(), max(), clamp() In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの比較関数の

[coliss]

CSSの数学関数 min(), max(), clamp()の使い方のまとめ

[ifttt]

日本国内向けページでモダンブラウザのみ対象ってどんくらいあるんだろうね

[takehikom]

『min(50%, 500px)』こういう引数指定はプログラミング言語で考えたことがなかった

[RCHeLEyl]

こりゃ使うのに一癖も二癖もありそうなものを出してきたな。CSSがどんどん複雑になっていくorz

[sd-craft]

IE11 2025

[elm_arata]

clamp()

[kyompi]

便利そうではあるけど、これを活かすタイミングが全く思い浮かばない・・・

[Nyoho]

“width: min(50%, 500px);”

[otchy210]

普通にプログラム書いてて max(min()) でしょ、って時に逆に書くバグとかやらかすことあるので clamp いいな。今度 max(min()) 使う機会あったら clamp 自分で定義しちゃうかも。

[primedesignworks]

IE 非対応はタイトルにちゃんと書いてほしい。

[mojimojikun]

CSSはほとんど使わないんだけど使う時は使うんで、その使う時にこういう事を知ってると良さそうだなぁと思うんだけど使わないから忘れるんよね。(´・ω・`)

[kouyan_h]

いや、すごいな

[honma200]

す、数学関数？Excelもそんな名前だっけ？数学じゃない関数ってなんぞ？

[yarumato]

“要素の最大幅 min(50%, 500px)　最小値設定にはmax()　clamp()はmax()とmin()同時使用と同等”

[RATCHO]

width: 50%; max-width: 500px; でよくね？／clamp()は3行→1行だし直感的に読みやすいしシンタックスシュガーとして良いかも！／　兎に角、IEは早く成仏してくり〜〜🙏

[simochee]

めちゃくちゃ便利やん

[pado3]

ありがたい解説！iPodとAndroidとPCでの見栄えの違いが割に簡単にコントロールできて便利です

[KoshianX]

CSS どんどん便利になるがいろいろ増えすぎてついていくのたいへん。。。

[Dragoonriders]

仕様見ても「比較関数」だな。外側のビューの状態に依存する。数学関数や数式とともに使うけどという余計なツッコミさておき、制約ってどこまで有効なんだろ。あんま変な制約入れられると文字小さくてツライ（老眼）

[ultimatebreak]

とりあえずIE死ね、あ、今死ねって言ったらダメかな？早くお隠れあそばせ？

[Shinwiki]

変数の記述が冗長すぎるのでまだあんまし使いたくない。

[style_blue]

サイズに合わせて動的なボーダー枠やギャップ幅が使えるの便利かも。最近メーカーのサイトで小画面表示向けの設定がPCで見るとあらゆる要素が大きくなる時があるんだけどこれで解決していただきたい。