Divi 5でClamp（）を使用して、流動的な応答性のあるタイポグラフィを作成します

DIVI 5は、CSSクランプ（）を使用して流体のタイポグラフィをサポートしています。これは、レスポンシブデザインの大きな前進であり、ウェブサイトの構築の速度と品質を劇的に向上させます。ここでは、これを読む前に何も知らなかったとしても、Divi 5でClamp（）を使用して始める方法をお見せしたかったのです。

理論とそれを適用する方法を理解するために一緒に読んでください。また、Clamp（）計算を作成することができる役立つツールにもリンクします。

clamp（）vsレスポンシブタイポグラフィのメディアクエリ

メディアクエリは、ブレークポイントのサイズに基づいてタイポグラフィのサイズを変更できます。ページが上下にスケールして次の定義されたブレークポイントにヒットすると、メディアクエリはそれらに関連付けられたスタイルを自動的に適用します。したがって、3つのブレークポイント（モバイル、タブレット、デスクトップ）がある場合、テキストはそれらの各ブレークポイントで変更される可能性があります。

これは非常にうまく機能し、多くのWebデザイナーが使用に慣れたものです。ただし、流動的ではありません。つまり、767pxのビューポート幅で1つのフォントサイズが100px大きくなる可能性がありますが、776pxではすぐに56pxに低下する可能性があります（ブレークポイントとH1値が両方で割り当てられた場合）。

一方、Clamp（）を使用すると、小さな画面に小さなタイポグラフィを用意し、スクリーンビューポートのスケールアップとしてスケーリングできます。このビデオでは、3つのブレークポイントをH1の3つのフォントサイズと同様のサイジング規則と比較しますが、代わりにClamp（）で行われます。

この例では、CLAMP（）は突然のジャンプなしで30pxから100pxまでスムーズに遷移しますが、さまざまなブレークポイントでの単純なピクセル宣言は、単一のピクセル幅の過程で大きな変化を引き起こします。その結果、どちらの方法でも選択する最小/最大フォントサイズがありますが、Clamp（）を使用すると、フォントはより応答性が高く、画面サイズに基づいてより良く見えます。 Diviの7つのブレークポイントをすべて使用して、ほとんどの画面サイズでハードコーディングされたフォントサイズを取得して見栄えを良くする必要があります。

clamp（）をサポートするDivi 5タイポグラフィ要素

Divi 5では、タイポグラフィの設定で最もclamp（）を使用する可能性があります。具体的には、clamp（）を使用して以下を設定できます。

• フォントサイズ（最も一般的な使用）
• 線の高さ
• 文字間隔

これにより、タイポグラフィの設定にブレークポイント宣言を設定することなく、読みやすく、レスポンシブなタイポグラフィが得られます。したがって、これはより流動的な設計になるだけでなく、ビルド時間をスピードアップしています。

フォントサイズ、文字間隔、およびラインの高さは、見出しとボディのタイポグラフィの両方で使用できます。

クランプ（）の仕組み

Clamp（）関数は3つの値を使用します。

clamp(min-value, preferred-value, max-value)

各値はコンマで分離され、それぞれが特定の役割を果たします。

最小値：これは最小の許可サイズです。画面がどれほど小さくても、フォントはこれの下に収縮しません。

優先値：これは理想的または「ターゲット」サイズです。通常、動的ユニットまたは数学関数（calc（）など）を使用して、minとmaxの間で流動的にスケーリングします。

最大値：これにより、可能な限り最大のサイズを設定します。巨大な画面でも、要素はこの値を超えません。

Clamp（）でCSSユニットを理解する

ユニットは、clamp（）のスケールに大きく影響します。

• PX （ピクセル）：絶対ユニット。固定された安定したサイズ。明確な境界を確立するために、MIN/MAX値に役立ちます。
• REM ：ルートフォントサイズに基づく相対ユニット。ユーザーのブラウザフォントが変更された場合、REMはそれに応じてスケールします。アクセシビリティに最適です。
• VW （ビューポート幅）：画面幅に基づいてスケーリングする動的ユニット。流体スケーリングを作成するのに優れた価値に最適です。
• VH （ビューポートの高さ）：VWに似ていますが、高さ用。右から左から下に印刷する言語を操作しない限り、あまり役に立ちません（またはその逆）。
• EM ：親要素のフォントサイズに比べて、より制御されたレスポンシブスケーリングに最適です。
• そして、あなたが快適に使用するすべてのユニット。

通常、MINとMAXはPX/REMなどの絶対的または安定したユニットを使用しますが、優先値はVW/％などの動的ユニットやレスポンシブスケーリングに数学機能を使用します。

優先値がClamp（）にどのように影響するか

優先値は、Clamp（）が本当に輝く場所です。テキストがどのようにスケーリングするかを定義します。

より高い優先値は、要素がより早く最大クランプの制限に到達することを意味します。これは速く混乱します（VWやREMのようなものは相対ユニットであるため）が、優先値でわずかに異なるVW乗数を使用する2つの同様のClamp（）関数を表示したかったのです。上部の見出しは値が小さく、ビューポートスケールとしての見出しの実際のサイズ（黄色で強調表示されています）に注目してください。

より低い優先値は、より高い優先値（スケーリングするとすぐに）よりも早く、わずかに広いビューポートで最小値にスケーリングします。逆は、より高い値に最大値に達する高い値に当てはまります。

これが、このインスタンスで何が起こっているのかのグラフビューです。

デモンストレーションのために、ここでは、わずかに異なる2つのわずかにシンプルなクランプ（）関数を比較した別のグラフです。

繰り返しますが、これは複雑に感じますが、実際には、それほど少ないです。 CSSクランプをサポートするタイポグラフィサイズのジェネレーターを使用することを強くお勧めします。私のお気に入りの1つは、流動型スケール計算機です。試してみたい値を提供すると、クランプ関数でCSS変数が自動的に生成されます。スーパーおしゃれな！

下にスクロールして、画面の幅に基づいてタイポグラフィがどのように拡大するかを確認できます。

すぐに、Divi 5の設計変数にこれらのCSS変数を保存し、別のCSSスタイルシートに依存せずにプリセットに簡単に呼び出すことができます。

Diviを使用したタイポグラフィにClamp（）を使用します

Clamp（）が動作しているのを見てみましょう。 Diviを使用してWebサイト全体のタイポグラフィをセットアップする1つの方法は次のとおりです。

クランプ（）を見出しとタイトルに適用します

上記で紹介された流体型スケールジェネレーターを簡単に使用します。これは、私が作成したClamp（）を使用した流体のタイポグラフィのセットの1つです。このようなVARSを使用できますが、デフォルトオプショングループプリセットで値を直接使用して、Diviを最大限に使用する方法を示します。

:root {
--divi-sm-body: clamp(0.8rem, 0.11vi + 0.77rem, 0.94rem);
--divi-button: clamp(1rem, 0.2vi + 0.95rem, 1.25rem);
--divi-body: clamp(1.25rem, 0.33vi + 1.17rem, 1.67rem);
--divi-h6: clamp(1.56rem, 0.53vi + 1.43rem, 2.22rem);
--divi-h5: clamp(1.95rem, 0.81vi + 1.75rem, 2.96rem);
--divi-h4: clamp(2.44rem, 1.2vi + 2.14rem, 3.95rem);
--divi-h3: clamp(3.05rem, 1.77vi + 2.61rem, 5.26rem);
--divi-h2: clamp(3.81rem, 2.56vi + 3.18rem, 7.01rem);
--divi-h1: clamp(4.77rem, 3.66vi + 3.85rem, 9.35rem);
}

まず、各見出し/タイトルレベルのデフォルトオプショングループプリセットを作成します。これを行うには、見出しまたはタイトルのあるモジュールをクリックします（モジュール間でわずかに異なる名前がありますが、オプショングループを共有しています）。 [デザイン]タブで、見出しテキストまたはタイトルテキストを見つけます。オプショングループプリセットアイコンをクリックします。

これにより、少なくともデフォルトのオプショングループプリセットのメニューが表示されます。先に進み、ここではH1にデフォルトのOGプリセットを使用します。 「ギア」アイコンをクリックして、OGプリセット設計設定を開きます。後のステップでは、各見出しレベル（H1-H6）に対してより多くのOGプリセットを作成します。

ライトモードからダークモードへの反転で作業しているオプショングループに気付くでしょう（またはダークモードで開始した場合はその逆）。これは、どのデザインコンテキストがあるかを知るのに役立つ方法です。私たちの場合、これをH1に使用しています。

 clamp(4.77rem, 3.66vi + 3.85rem, 9.35rem) 

下にスクロールして[保存]をクリックしてください。そうしないと、OGプリセットを正常に適用しないでください。

今、私たちはすべての見出しレベルを継続します。次の見出しレベル（H2）をお見せします。以前と同じ方法で、OGプリセット領域にアクセスして、今回は新しいプリセットの追加をクリックします。

H2Sで使用するOGプリセットには、ジェネレーターからこのclamp（）関数を使用します。

 clamp(3.81rem, 2.56vi + 3.18rem, 7.01rem); 

見出しレベルの選択領域からH2オプションを選択します。次に、クランプ（）値を見出しテキストサイズに貼り付けます。テキストサイズは、そのOGプリセットを使用してH2見出しのサイズを設定します。

そこから、あなたはあなたの見出しレベルを継続します。また、ボディテキストのサイズとボタンテキストなどのものを設定することもできます。多くのモジュールには、これらのclamp（）値を使用できる可能性のある特別なタイプのテキストがありますが、一部の場合は、さらに（フォームモジュールラベルやブログ投稿メタテキス​​トなど）を作成することをお勧めします。

CSS変数を使用したい場合は、同じ正確な手順に従って（テーマオプション> CSSにフォントサイジング変数をロードしたと仮定します）が、Clamp（）値を貼り付ける代わりに、VAR（「–Divi-H1」などの命名条約のようなもの）を貼り付けます。

今日、Divi 5エクスペリエンスに飛び込みます

Divi 5は、ブレイクネックのペースで機能を追加しています。レスポンシブブレークポイント、すべての高度なCSSユニット、およびオプショングループプリセットは、新しく開発されたインフラストラクチャの最初の果物のほんの一部です。

DIVIでプロのウェブサイトを構築することは、さらに簡単で強力になっています。新しい体験を試してみることに興奮することはできませんでした。 CSSクランプは、Diviユーザーが現在尋ねてきた多くの機能の1つにすぎません。したがって、最新のDivi 5アルファをダウンロードしていない場合は、今後です。

ビルド全体にわたってさまざまなCSS関数を試して、新しいデザインの可能性をどのように開くかを確認してください。この小さな機能には強力な影響があり、Divi 5が設計プロセスをこれまで以上に改善するように設計されていることを証明しています。