CSS clampで、できるだけシンプルにレスポンシブな要素幅にする方法 | お役立ち情報 | 岡山のホームページ制作会社。WEB戦略が得意なホームページ成績上げ屋さん!

NITTY GRTTY
NITTY GRITTY

お役立ち

ニッティ・グリッティの

お役立ち情報

CSS clampで、できるだけシンプルにレスポンシブな要素幅にする方法

UPDATE :

投稿者 : AOKI CHISHIO

aoki_icon

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 などとすることになります。)


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


無料診断

現状のHPを無料で診断いたします。
お気軽にお問い合わせください。

tel

お問い合わせ

tel


086-959-4456

受付時間 10:00〜17:00定休日/土日・祝日

BLOG

お役立ち情報

© 2022 NITTY GRITTY All Rights Reserved.
WEB GROW
WEB戦略を成功させる
システムできました。

自社で驚くほど簡単に更新・運用ができる!

セキュリーティー万全なWEBの内製化システム

ホームページ改善勉強会 ホームページ改善勉強会 ホームページで失敗しないためのノウハウをセミナー限定で完全公開
© 2022 NITTY GRITTY All Rights Reserved.
無料診断バナー 無料診断バナー