Divi 5でmin（）とmax（）を使用してインテリジェントなレイアウトを作成します

CSS Min（）とMax（）は、レスポンシブWebデザインで2つの汎用性がありながら十分に活用されていない機能であり、Divi 5は高度なユニットの更新以来両方を完全にサポートしています。以前は、Calc（）を使用したClamp（）および動的計算を使用したFluid Typographyを検討していますが、Min（）およびMax（）は、レスポンシブデザインを実現するためのさらに簡単な方法を提供します。

この投稿では、DIVIを使用してこれらの機能を使用する方法を紹介します（DIVI 5は、新しいWebサイトで使用できるようになり、既存のサイトの移行に関する推奨事項が近日公開されます）。レスポンシブ機能を使用するためにできることはすべて、メディアクエリへの依存を減らします。CSSは美しいものです！

CSS min（）およびmax（）：よりシンプルなロジックを備えたよりスマートなレイアウト

clamp（）をすでに探索している場合は、min（）とmax（）をマスターする途中です！覚えている場合、Clamp（）は3つの値を同時に使用します（min、優先、およびmax）、minとmax in clamp（）は同じ概念ですが、特定の時間ではロジックの1/3のみです。

min（）とmax（）は何をしますか？

min（）およびmax（）関数を使用すると、画面サイズに基づいて最小（min）または最大の値（max）が表示される2つ以上の値を設定できます。

「遷移点」は、設定した2つの値にそれぞれ決定されるため、これは視覚化のみを目的としています

min（）：常に小さな値を選択します

MIN（）を使用して、広い画面がコンテンツを過度に伸ばすのを防ぎます。これは、大きな画面ではあまり大きく成長しないはずのレイアウトに最適ですが、画面サイズが小さくなるにつれて下向きにスケーリングする柔軟性が十分にあるはずです。

 width: min(100%, 500px); 

この例では、要素の幅は500pxを超えることはありませんが、その500pxマークの下にある場合、100％になります。

max（）：常に大きな値を選択します

max（）を使用して、特に小さい画面で、またはコンテンツが読みやすいまたは機能的なままにするために最小サイズが必要な場合、コンテンツが狭すぎたり小さくなりすぎたりしないようにします。これは、小さな画面（固定値）の特定のポイントを超えて縮小しないレイアウトに最適ですが、より大きなスペース（相対値を持つ）に対応するために拡張できます。

 width: max(80%, 300px); 

この例では、要素の幅は常に大きなオプションです。コンテナの80％または300pxです。小さな画面またはタイトなコンテナでは、80％が300px未満に計算された場合、要素は幅が少なくとも300pxの幅です。大規模な画面では、要素はコンテナの幅の80％に拡張されますが、300px未満を下回ることはありません。このアプローチは、より大きな画面で応答的にスケーリングしながら、要素が小さな画面で使用可能なままであることを保証するのに役立ちます。

なぜmin（）とmax（）で相対値と固定値を組み合わせるのですか？

CSSで最初にmin（）またはmax（）に遭遇すると、なぜパーセンテージやピクセルなどの値を組み合わせることが多いのかと思うかもしれません。これは、各ユニットタイプがレスポンシブデザインで異なる役割を果たしているためです。

たとえば、MIN（100px、200px）は常に100pxまで解決します。 2つの固定値の最小を選択するだけです。ただし、MIN（100％、500px）などのユニットを混ぜると、ブラウザに「親の幅の100％と500pxの間で小さい方を使用してください」と言っています。これにより、応答性が高くなります。

％、VW、EMなどの相対ユニットは、コンテキストに基づいて調整します。それが親要素、ビューポート、または継承されたフォントサイズであろうと。 PXのような固定ユニットはCSSに一定のままで、予測可能になります。

固定値と相対値を組み合わせることにより、min（）とmax（）を使用して、サイズの境界を施行しながら適応する柔軟なデザインを構築できます。

diviでmin（）およびmax（）を使用する方法

min（）とmax（）の基本をカバーしたので、いくつかの例について説明しましょう。

1。フィールドが少ないレスポンシブな行幅

DIVIを使用してコンテナ要素に幅と最大幅を設定することができました。ただし、min（）やmax（）のようなCSS関数を開くことで、同じことを行うことができますが、1つのデザインフィールドを使用します（そして、ページにもCSSも少し少ない出力を使用します）。

Diviでは、要素（この場合は行）、デザインタブ、サイジングに移動すると、幅を調整するためのいくつかのオプションが見つかります。幅を95％にし、最大幅を900pxに設定することにより、モバイルデバイスでは見栄えの良いものがありますが、デスクトップディスプレイ用に左右に多くのネガティブスペースを持つレイアウトも提供します。

これは、行にこのようなCSSを使用するようなものです。

 .container {
width: 95%;
max-width: 900px;
} 

Divi 5の高度なユニットを使用すると、さらに統合された別のオプションがあります。必要なすべてを幅フィールドのみに入力し、同じ結果を達成できます。

これは、このCSSをRow Containerで使用するようなものです。

 .container {
width: min(95%, 900px);
} 

CSSの1行と2行です。さらに重要なことに、幅と最大幅の両方を設定する代わりに、min（）を使用するたびに1つのステップと値が必要です。どちらのオプションも、このビデオで示されているのと同じ結果を達成します。

この特定のユースケースはそれほどエキサイティングではありませんが、min（）とmax（）のパワーと、古いCSS宣言をどのように置き換えることができるかを示しています。

間隔、サイジング、または境界にmin（）またはmax（）を使用する場合（Divi 5のより多くのフィールドで使用できます）、オプショングループプリセットまたは要素プリセットのいずれかで設定することを強くお勧めします。これにより、どこで使用しても、一貫したスケーリングを取得できます。

2。列のパディングと境界幅

以下には、画面サイズが大きくなるにつれて、より多くの内側のパディングと境界幅が大きくなるデザインがあります。これに対応するために、max（）関数を使用して右/左/上/下の境界幅とパディングを列に設定しました。 CSSは次のようなものになります：

 .container {
padding: max(10px, 2vw) max(10px, 2vw) max(10px, 2vw) max(10px, 2vw);
border-width: max(5px, 1vw) max(5px, 1vw) max(5px, 1vw) max(5px, 1vw);
} 

これは、max（）関数が、適用されている状況でどんな状況でも大きい方を選択することを意味します。両側の最小のパディングは10pxで、最大は2VWです。同様に、境界幅の場合、これがこれまでで最小のものは5pxで、最大は1VWです）。

この状況でのMax（）がデザイン>間隔> diviの列のパディングのように見えるものは次のとおりです。

この状況でのMax（）は、Diviの行の境界線>ボーダー幅のように見えるものです。

一緒に、列の内側にパディングが少なく、小さな画面に境界線の幅が薄くなるという効果が得られます。ただし、画面サイズが大きくなり、VW値（相対値であることを忘れないでください）が固定ピクセル値よりも大きくなるにつれて拡大します。

これにより、より小さな画面の可用性を最大化するのに役立ちますが、より広い画面はスペースをさらに埋めることができます。

3。フルハイトヒーローセクション

セクションの高さでMIN（）値を使用すると、少なくとも特定の高さであるが、単純なMIN（）関数を使用してフルスクリーンの高さの90％（これ以上）に収まるヒーローセクションを作成できます。

 height: min(800px, 90vh) 

これには、より大きな（背の高い）画面を除いて、フルハイトのヒーローセクションを持つ効果があり、その下の次のセクションが表示されます。 Diviサイジング設定では、2つの異なるフィールド入力（幅と最大幅）で実行できますが、min（）関数を使用すると、サイジングで1つのフィールドのみを使用して同じ効果を得ることができます。

ヒーローセクションはほとんどの画面サイズの主要なものとして保持されますが、より高い画面の解像度を備えたいくつかのインスタンスではあまり大きくなりません。

4。フォントサイジング

MINまたはMAXをフォントサイズに使用すると、静的ピクセル値よりも動的なサイジングを実現できます。このために、Max（）を使用して、画面サイズの条件に基づいてフォントサイズをスケーリングする必要があります。ピクセル/REM値を使用する小さな絶対サイズに設定し、相対値を使用して上方にスケーリングします。

1REMはルートフォントサイズに等しくなります（サイトスタイルでカスタマイズされていない限り16px）。最大サイズ（1REM、2VW）のフォントサイズは、2つの値のうち大きいものを取り、16pxよりも小さくなることはありません。

ご覧のとおり、最小のデバイスでは、フォントサイズが1REM/16pxに設定されています。特定の時点で、より大きな値が2VWになり、フォントサイズを上向きにスケーリングし、画面サイズが大きくなるにつれてフォントが大きくなります。

フォントのサイジングの場合、MINまたはMAXを使用することはお勧めしませんが、代わりにCLAMP（）を使用することをお勧めします。 min/maxは一方向のみで動的スケーリングのみを提供し、clamp（）の効果に近づくには、複数のブレークポイントでmin/maxフォントサイジングルールを設定する必要があります（これは可能ですが、クランプを使用するのははるかに簡単です）。

min（）/max（）とclamp（）の違い

Clamp（）は、min（）とmax（）の組み合わせで、その間に優先値を理解できます。 clamp（）は、最小キャップの1つの値、最大キャップとして1つの値、3番目の値（中央）を最小値と最大の変化の勾配を決定する優先値として取得します。

例：

 font-size: clamp(16px, 4vw, 40px); 

これは、設定しているフォントサイズが16pxよりも小さく、40pxを超えることはないことを意味します。ただし、（画面サイズに基づいて）変更されるレートは、中央の優先値によって決定されます。

Clamp（）を使用することに関する専用の記事を読んで、Clamp（）機能を作成する私の好みのfluidタイポグラフィジェネレーターを確認してください。

Divi 5でmin（）とmax（）を試してください

min（）およびmax（）は、clamp（）またはcalc（）ほど注目を集めていない場合がありますが、Divi 5のよりスマートでシンプルでクリーンなレスポンシブデザインに不可欠なツールです。

これらのCSS関数は、ウェブサイトの応答性を制御する独自の方法を提供します。 min（）とmax（）をいつ使用するかを理解したら、それらなしでどのようにレスポンシブデザインを管理したのか疑問に思います。それらは最新のブラウザ全体で完全にサポートされており、Diviはそれらを簡単に実装します。 Divi 5は、新しいWebサイトで使用する準備ができています。