CSSのクランプ（）とは（およびそれを使用する方法）

携帯電話と巨大なモニターの両方でサイトを見栄えを良くしようとしたことがあるなら、間隔の破損、フォントが劇的に縮小するか、過度にスケーリングし、要素が圧倒されるか消えてしまうかを見てきました。それをすべて修正するために、1つのレイアウトのメディアクエリの長​​いリストを書くことになります。それがClamp（）が役立つ場所です。

これは、設定サイズを簡素化するCSS関数です。固定されたブレークポイントで複数の値を定義する代わりに、画面が変化するにつれて要素が流動的にスケーリングできるように、最小値、優先、および最大値を設定できます。最良の部分は、それらがあなたの定義された制限内にとどまることです。そのため、レイアウトの矛盾はありません。

この投稿では、Clamp（）の仕組み、メディアクエリよりも多くの場合効率的になる理由、およびDivi 5でコードの1行を作成せずに使用する方法について説明します。

クランプとは

clamp（）はCSSのネイティブ関数であり、画面サイズに基づいて調整する応答性の値を定義するために使用されます。単一の数字をハードコードする代わりに、ブラウザに連携する範囲を提供します。最小値、スケーラブルな優先値、最大値を設定します。これらはレイアウトをより柔軟にし、画面サイズごとに複数のメディアクエリを記述する必要はありません。

画面サイズに基づいて増加/減少する流体フォントサイズの例でこれを理解しましょう。

font-size: clamp(40px, 7vw, 100px);

ここでは、フォントサイズが40pxを下回ることはなく、ビューポート幅の7％に基づいてスケールを拡大し、100pxに達すると成長を停止します。

Clamp（）を使用することのもう1つの大きな利点は、メディアクエリとは異なり、剛性のジャンプを回避し、スタイルをより予測可能で読みやすくすることです。

これとはどういう意味ですか？ Clamp（）とメディアクエリを比較して、これを理解しましょう。

Clamp（）とメディアクエリの比較

メディアクエリは、異なる画面幅に対してフォントサイズを調整するもう1つの一般的な方法です。ここでは、スタイルが変化する特定の画面幅でブレークポイントを定義します。たとえば、デスクトップには1つのフォントサイズ、タブレットには別のフォントサイズ、モバイル用の3番目のサイズを割り当てることができます。これにより、画面の幅が各ブレークポイントに当たったときにのみフォントサイズが変更されます。

この方法は機能しますが、流動的ではありません。 1000pxから501pxの間に、フォントサイズは100pxでロックされたままです。画面が500pxに達した瞬間、フォントは突然30pxに低下します。これは、スムーズな遷移がなく、鋭い変化のみを意味します。

したがって、スケーリングをより自然に感じたい場合は、いくつかのブレークポイントを追加し、それぞれのフォントサイズを手動で調整する必要があります。これにより、コードが長くなり、肥大化します。

対照的に、Clamp（）は、突然の移行と長いコードからあなたを救います。実際、それは単一の行で書くことができます：font-size：clamp（30px、7vw、100px）。

これにより、ブラウザは、ビューポート幅の7％に基づいて30pxから100pxの間のフォントをスケーリングすることが示されます。フォントサイズは、突然のジャンプや複数のブレークポイントが必要な場合、すべての画面サイズにわたって流動的に調整されます。あなたはまだ制限を定義しますが、その間のスケーリングは自動的で一貫性があります。

実写では、メディアクエリのブレークポイントとclamp（）のフォントのサイズ変更の比較を次に示します。

応答性のあるサイズ変更の場合、Clamp（）は顕著な違いをもたらします。固定画面幅がスタイルの変更をトリガーするのを待つのではなく、その間のすべてのピクセルに応答します。これにより、すべてのデバイスでコードをきれいにし、設計をより一貫性を維持します。それに加えて、ほとんどの最新のブラウザで広くサポートされているため、これらのブラウザでうまくレンダリングされ、信頼性の高い実用的な交換になります。

Clamp（）が舞台裏でどのように機能するか

clamp（）は、CSSプロパティを拡大するために連携する3つの値を取得します。

 clamp(minimum, preferred, maximum) 

関数の各部分には特定の役割があります。

• 最小値：可能な限り最低値。画面がどれほど小さくても、要素はこのポイント以下で縮小しません。
• 優先値：この値は、画面サイズに基づいてスケールします。通常、自由流動性を可能にするために、VWやcalc（）式などの相対ユニットを使用して設定されます。
• 最大値：最高の許可サイズ。非常に大きな画面でも、要素はこの値を超えません。

ブラウザが最終サイズを計算すると、最初に優先値を評価します。ブラウザは、画面サイズが十分に小さく、優先値が最小値を下回る場合に最小限を使用します。同様に、画面が最大値を超えるほど十分に広い場合、それはそれに固執します。

これにより、動作が予測可能になります。デザインが定義された範囲内にとどまることを常に知っていますが、それらの制限間の柔軟なスケーリングが得られます。最小限と最大制限を設定することにより、Clamp（）は、要素が流動的にスケーリングしますが、あまり多すぎることはありません。ちょうど十分です。

適切な優先値を選択します

優先値（中央の値）がこのすべてで大きな役割を果たしていることに気付いたかもしれません。要素がどのように拡大するかを決定します。

まず、クランプ（40px、 80px 、120px）のような固定値ではないはずです。この場合、優先値がまったく拡大しないためです。 80pxはすでに制限の間にあるため、ブラウザはそれをロックし、画面サイズの変更を無視します。これにより、静的な値が得られ、そもそもClamp（）を使用する目的を無効にします。

代わりに、クランプ（40px、 7VW 、120px）のように、優先値は常に相対的でなければなりません。ここでは、7VWはViewportの幅に応答します。これにより、要素は画面サイズでスムーズにスケールすることができます。クランプ関数は、40pxを40pxを下回ることはないことを保証し、サイズを画面の幅の7％に応答します。

また、相対値のサイズを考慮する必要があります。たとえば、 2VWのような値が小さいため、画面サイズでより徐々に要素をスケーリングしますが、 6VWのような値が大きいとスケーリングが高速で、最大サイズに到達します。どのスケーリングが機能するかを特定するには、Fluid Typeスケール計算機を試してください。さまざまな値をプレビューし、すぐに使用できるCSSをエクスポートできます。

注：流体型スケール計算機はVI値を出力します。 DIVIで生成された出力を使用する場合は、VIユニットをVWに変更してください。

clamp（）のさまざまな種類のユニット

Clamp（）内のユニットは、デバイス全体での動作方法に影響します。使用できるのは次のとおりです。

ほとんどの場合、開発者は最小値と最大値にPXを使用し、VWのような流体ユニットを優先値に使用します。これにより、コントロールと応答性の最良のバランスが得られます。

ただし、 Clamp（2REM、4REM、8REM）などの最小値と最大値に相対ユニットを使用することもできます。これにより、ルートフォントのサイズが変更された場合、デザインがよりアクセスしやすく、スケーリングしやすくなります。これは、読みやすくするためにブラウザの設定を調整するユーザーにとって特に便利です。

divi 5のclamp（）

CSSのClamp（）関数は非常に便利ですが、コードを書くのが快適な場合のみです。 StyleSheetに触れずにWebサイトを視覚的に構築することを好む人はどうですか？ Clamp（）を使用してFluidレイアウトを構築しますが、コードを作成しませんか？

その場合、Divi 5の高度なユニットが役立ちます。

YouTubeチャンネルを購読してください

長い話を簡単に言えば、Divi 5はBuilder全体の高度なユニットとしてClamp（）をサポートしており、それらにアクセスするのは非常に簡単です。フォントサイズ、間隔、またはセクション幅などの数値を入力できるところはどこでも、clamp（）を直接使用するオプションが見つかります。

入力フィールドをクリックして、Divi 5で利用可能なさまざまな高度なユニット（見出しテキストサイズの横にある暗い色のリストを参照）から選択し、ユニットタイプを変更し、最小値、優先値、最大値を定義します。

そしてそれだけです！コーディングやCSSはまったくありません。あなたがしたのは、クランプ（）値を入力することだけで、そのように見出しが流動的になりました。

DIVI 5を使用すると、カスタムCSSを作成せずに、流動的で応答性の高いデザインを簡単に作成できます。視覚エディターのシンプルさで、クランプ（）のすべての柔軟性を取得します。 （Divi 5は、Clamp（）を含む他の多くの高度なユニットをサポートしています）。

Divi 5の高度なユニットに関するすべてを学びます

Divi 5でClamp（）を使用する方法は？

これまでに、Divi 5でClamp（）を使用するのがどれほど簡単かを見てきました。Clamp（）ユニットを選択して、優先値を追加するだけです。カスタムコード、CSSファイル、クリーンで視覚的なインターフェイスはありません。

しかし、clamp（）を真に強力にしているのは、Diviの内部だけでなく、機能そのものではありません。それはそれが働くものです。

DIVI 5は、モジュラー設計システムを中心に構築されています。つまり、Clamp（）とCalc（）などのDesign変数やCSS関数などの他の高度な機能を組み合わせて、レイアウトを応答性だけでなく、一貫性と簡単なスケーリングもすることができます。そして、それが興味深い場所です - Divi 5を使用すると、Clamp（）をワークフローに簡単に収めることができます。

Clamp（）は、設計変数で動作します

Divi 5でClamp（）を効果的に使用する最良の最も効率的な方法は、設計変数と組み合わせることです。

設計変数を使用すると、グローバルな値（タイポグラフィ、色、さらにはフォントサイズなど）を定義できるため、サイト全体で使用して一貫性を保つことができます。 Clamp（）値を数値変数として保存することもできます。これにより、レスポンシブなグローバル値を保存することができ、それらを変更すると、すべてのインスタンスが一度に更新されるようになります。

たとえば、このようなH1-H6見出しのClamp（）サイズを定義します。

Divi Builderの変数マネージャー内でそれらを保存します。

その後、Webサイト全体のすべての見出しは、定義されたClamp（）値に基づいて適応します。

これで、H3サイズを更新する場合は、その数値変数を変更するだけで、使用した場所で更新されます。 （ Divi 5で独自のタイポグラフィシステムを作成したいのですか？Clamp（）および設計変数を使用したフォントとフォントサイズの管理に関する完全なガイドを次に示します。）

このアプローチにより、集中制御が可能になり、各インスタンスを手動で調整することなく、タイポグラフィの設定をグローバルに簡単に更新できます。オプショングループプリセットを介してこれらのClamp（）変数を適用することにより、設計プロセスを合理化します。

clamp（）はcalc（）と結合します

また、Clamp（）内のcalc（）関数を使用して、値のスケーリング方法を微調整することもできます。これは、ベースラインサイズを追加し、VWのような相対ユニットでより正確にスケーリングする場合に特に便利です。

たとえば、フォントサイズ：クランプ（1rem、calc（0.75rem + 2vw）、2.5rem）を使用して、安定したベース（0.75rem）を追加し、2VWでさらにスケーリングします。

これにより、フォントはビューポートの幅に基づいてスケーリングできますが、ベースフォントサイズでヘッドスタートを導くこともできます。これは、複数のクランプバリエーションを必要とせずに、小さな画面で読みやすさを維持するのに役立ちます。 Clamp（）内部のCalc（）トリックは、物事の拡大方法を追加する必要がある場所に最適です。

clampの実践的なユースケース（）

次に、Clamp（）の一般的なユースケースと、Divi 5で適用するときに簡単になるかを見てみましょう。

1.すべてのデバイスにわたる一貫した見出しサイズ

レスポンシブタイポグラフィは、クランプ（）の最良のユースケースです。設計変数のClamp（）を使用して、見出し（H1-H6）サイズをすでに定義していたので、今度はそれらが動作しているのを見る時が来ました。

メニュー項目にH5Sを使用してこのページを作成しました。次に、H5の見出しテキストサイズのそれぞれにH5番号変数を適用しました。ご覧のとおり、それぞれの見出しはブレークポイントを越えて流動的にスケーリングします。

テキストは、定義されたすべてのレスポンシブブレークポイントで明確でバランスが取れており、視覚的に一貫性があります。

また、Clamp（）を使用して、ラインの高さと文字間隔に使用することもできます。画面が広くなるにつれて、わずかに増加するラインのギャップや間隔で最適な読みやすさを維持するのに役立ちます。わずかな変更ですが、それは長い形式のコンテンツをより通気性が高くするでしょう。

2.大きな画面上の段落セクションの幅を設定します

パラグラフは、コンパクトなスクリーンの短い線によりコンテンツの消化性があるため、自然にモバイルで読みやすいです。ただし、超幅のモニターでは、全幅セクションがテキストを伸ばしすぎると、読者は水平行全体をスキャンすることを余儀なくされます。看板を読んでいるように感じます。文の理想的なラインの長さは約50〜75文字です。そのため、ウェブサイトが広い画面に無限の文を表示すると、読者の興味を失う可能性があります。

これを修正するには、クランプ（300px、65VW、800px）などのレスポンシブ幅を設定して、段落を固定幅（800px）にスケーリングして、より広い画面でも読みやすく表示されます。

これは、ブログの投稿をより広い画面で読みやすくするのに最適な方法です。

3.単一または注目の画像にclamp（）幅を設定します

同様に、単一の画像（注目の画像など）は、超幅の画面では大きすぎるように見えます。タブレットでは完璧に見えますが、4Kモニターでぎこちなく伸びる可能性があります。

これを修正するには、クランプなどのクランプベースの画像幅（300px、60vw、1000px）を使用します。画像が画面サイズで流動的に成長するようにしますが、レイアウトを支配する前に停止します。

または、すべての要素（画像、見出し、テキスト）が均一にスケーリングされるように、コンテナ行全体にクランプ（）幅を設定することができます。

4.クランプ（）で液体パディングとマージンを追加します

デザイナーは多くの場合、デスクトップの間隔を正しく取得しますが、より小さな画面や非常に大きな画面で常にうまく機能するとは限りません。固定されたパディングとマージンは、必ずしも画面サイズで調整するとは限りません。それがClamp（）が役立つ場所です。

たとえば、画像ギャラリーのクランプ（0.5レム、2VW、2REM）マージンとクランプ（1REM、3VW、4REM）パディングは、画面で小さくスケールを開始するスペースを作成します。

それはあなたのレイアウトのスペースを与えて、大きな画面で呼吸し、モバイルで物事をしっかりと保ちます：

Clamp（）は、特に一定のブレークポイントを調整せずに意図的な間隔が必要な場合は、カードレイアウト、画像ギャラリー、セクションコンテナ、テキストブロックの周りにパディングをスムーズにスムーズに拡大するのにも役立ちます。

5.シームレスにスケーリングするレスポンシブヒーローセクションを作成します

Clamp（）を使用して、ヒーローの見出し、ボタンパディング、字幕間の間隔を定義することにより、すべての画面でヒーローセクションを完璧に見せることができます。これらのClamp（）値を設計変数として保存して、アプリケーションを簡素化しました。 （ただし、詳細を保存することで、変数マネージャーに記入したくありません。）

これらの値を適用することは簡単です。

保存すると、それぞれが画面サイズに自動的に適応し、ヒーローセクションにすべてのデバイスで完璧な第一印象を与えます。

Clamp（）を使用してPixel-Pixel-Fectレイアウトを設計し、単一のコードを書くことなく

Clamp（）は、無限のメディアクエリに依存することなく、流動的で応答性の高いレイアウトを設計するのに役立ちます。そして、Divi 5を使用すると、それを使用するために単一のコードを記述する必要はありません。コーディングを好むか視覚的なデザインを楽しむかに関わらず、Diviの高度なユニットにより、Clamp（）をフォントに適用し、間隔を容易にします。

Clamp（）などの強力な機能が非常に簡単にアクセスできますが、Divi 5を自分で試してみませんか？さまざまな値をテストし、独自のレスポンシブシステムを作成し、レイアウトがどれほど柔軟になるかを確認します。また、お気に入りのClamp（）トリックがある場合は、以下のコメントで共有してください！私たちはあなたが作成したものを見たいです。