CSS clampで、できるだけシンプルにレスポンシブな要素幅にする方法 | ニッティ・グリッティとはマーケティングweb戦略デザイン美容室向け記事 | お役立ち情報 | 岡山のホームページ制作会社。WEB戦略が得意なホームページ成績上げ屋さん！

css tricksで紹介されていた記事のなかに、メディアクエリを減らしてレスポンシブを実現する方法を説明した記事がありました。

とてもいい記事でしたので、詳細はオリジナルを読んでいただきたいのですが、

https://css-tricks.com/responsive-layouts-fewer-media-queries/

・できるだけ少ないコードで

・最後の要素をきっちり収める

・各行の要素数を調整できる

・要素の折り返しを調整できる

という条件で、メディアクエリを使用せずに要素を並べる方法が紹介されていました。

flexboxやgridなどいろいろな方法を試した後に、clumpを使用した下記コードにたどりついているのですが、ちょっと読みにくいですよね…

※flex:wrapが設定されています。

width:clamp(100%/(N + 1) + 0.1%, (400px - 100vw)*1000, 100%);

このコードが何をしているのか、読んでいきましょう

まずはclampについて確認しておきます。

clamp() は CSS の関数で、値を上限と下限の間に制限します。 clamp() によって、定義された最大値と最小値の間の値を選択することができます。最小値、推奨値、最大値の3つの引数を取ります。

つまり、clamp(最小値、推奨値、最大値)とすれば、最小値以下→最小値、最大値以上→最大値　最大値と最小値の間→推奨値となるということです。

今回は、

最小値：100%/(N + 1) + 0.1%

最大値：100%

推奨値： (400px – 100vw)*1000

ですね。

この推奨値がポイントです。

『400px – 最大画面幅』 がマイナスになるとき、すなわち最大画面幅が400を超える場合には、推奨値はマイナスになります。

そのため、最小値である100%(N+1)+0.1%幅になります(内容はあとで説明しますね)

『400px – 最大画面幅』 がプラスになるとき、すなわち最大画面幅が400に満たない場合には、推奨値はプラスになり、それに1000をかけているのでとても大きな

数値になりますが、最大値が100％なので、100％になります。

つまり、メディアクエリを使わなくても400pxを基準に要素の幅が切り替えられているんですね。

画面幅が400pxに満たなければ、要素の幅は100％、400pxを超える場合には、要素の幅は100%/(N+1)+0.1%になるということです。

最小値のcssの意味なのですが、

たとえば3カラムにする場合、100％÷(3+1)であれば、幅25%　4カラムですが、これにきわめて小さな幅である0.1%を足すことで、flex-wrapでの折り返しを発生させ、

4カラム目は次の行に押し出され、結果3カラムになる、ということなのです。

(もしgapを明示して指定する場合は、100％/(N-1)+(N-1)*gap　などとすることになります。)

たしかにこの方法であれば、メディアクエリを使用しなくても幅を切り替えることができますね！