Divi 5の高度なユニットについて知る必要があるすべて

優れたデザインツールは、ウェブサイトのあらゆる側面を制御できます。完璧なパディングを釘付けにしたり、デバイス全体でテキストスケールを完璧に確保したりするかどうかにかかわらず、すべての詳細が重要です。 Diviは長年にわたってデザイナーにとって信頼できる仲間であり、プロのウェブサイトを構築するための強固な基盤を提供しています。 Divi 5はさらにそれを取り、Advancedユニットと呼ばれる機能を導入します。

DIVI 5の高度なユニットは、Webサイトの構築方法を改善するのに役立ちます。 calc（）の動的計算から、clamp（）の流体スケーリング、VWやREMなどの全範囲のCSSユニット、およびCSS変数の柔軟性まで。この投稿では、高度なユニット、Visual Builderで使用する方法、およびすべてのDIVIユーザーに必要な理由に深く掘り下げます。レイアウトを微調整したり、大胆な新しいデザインを夢見ている場合でも、高度なユニットはデザインの応答性をさらに制御できます。

飛び込みましょう。

Divi 5の高度なユニットとは何ですか？

DIVI 5の高度なユニットを使用すると、多機能ユニットフィールドで設計要素を制御できます。これは、CSSユニット、関数、および変数の全スペクトルを受け入れる単一の強力な入力フィールドです。

これは、FitContent、Unset、Calc（）、Clamp（）、およびCSS変数を新しいサポートでサポートするすべてのCSSユニットをサポートする視覚ビルダーの小さな変更です。

高度なユニットは、静的値の制約から解放されます。固定されたピクセルサイズを推測したり、ブレークポイントで格闘する必要はありません。ビジュアルビルダーを離れることなく、流動的なタイポグラフィ、適応型間隔、ビューポート対応デザインを使用して、曲がりくねったレイアウトを簡単に作成できます。オプションだけではありません。それは、より賢く、よりスケーラブルな創造性についてです。

DIVI 5の高度なユニットの探索

Divi 5のAdvancedユニット機能は、それぞれがレイアウトを形作るユニークな方法を備えたさまざまなデザインオプションを提供しています。キープレーヤーを調べて、それらがどのように機能するかを見てみましょう。

DIVI 5のCSSユニット

高度なユニットは、ピクセルとパーセンテージをはるかに超えて、CSSユニットのフルパレットを開きます。たとえば、Viewport幅（VW）を使用してください。セクションの幅を80VWに設定すると、デスクトップからモバイルに完全にスケーリングして、ビューポート幅の80％（水平方向に）になります。

ルートEM（REM）サイズをサイトのルートフォントサイズに結び付けます - 見出しの4.5レムなど、一貫したタイポグラフィのアイデア。

また、コンテンツに基づいて要素のサイズをサイズするFit-Contentを試すこともできます。たとえば、ヘッダーの幅に適合コンテンツを使用すると、完全に適応することができます。幅のコンパクトで比例して、洗練された外観を維持しながら、ヘッダーをコンパクトで比例して、ヘッダーをコンパクトで比例した状態に保つことができます。

これらのユニットは、画面のサイズとコンテキストに適応し、所定の位置にロックされるのではなく、生きていると感じるレイアウトを提供します。

calc（）は動的計算機です

CACL（）関数は、DIVIに組み込まれたミニ計算機のようなものです。動的な結果を得るために、ユニットと操作、減算、乗算、および分割を操作と組み合わせることができます。古典的な例はCalc（100％〜50px）で、セクションの幅を100％に設定し、50ピクセルを減算します。あなたの要素が中央に整列している場合、両側から25pxが減少します。

セクションまたは行の幅を設定して、両側に完全な溝を残すなど、応答性のある間隔にcalc（）を使用できます。 calc（）は、ビューポートが変更されるにつれてその場で調整され、手動の調整をせずにデザインのバランスを保つようにします。

流体制御用のCLAMP（）

Clamp（）関数は、画面サイズにわたってスムーズに調整するサイズを制御するのに役立ちます。最小サイズ、優先サイズ、最大サイズの3つの値を使用します。良い例は、クランプ（36px、4vw、48px）です。

つまり、サイズは36pxで始まり、ビューポート幅の4％に基づいて増加しますが、48pxを超えることはありません。小さな携帯電話と大画面の両方で見栄えの良い見出しモジュールのように、テキストに最適です。 clamp（）は、デバイスに関係なく、デザインがバランスを保ち、読みやすいままであることを保証します。

グローバルな柔軟性のためのCSS変数

CSS変数（またはカスタムプロパティ）では、Diviのテーマオプションまたはページ設定CSSフィールドなど、再利用可能な値を定義できます。 DIVI 5にCSS変数を追加するときは、次のような親要素にそれらを囲んでください。

:root {
--font-size:5em;
}

定義されたら、 var（–font-size）を見出しのテキストサイズフィールドにドロップして適用できます。

それはあなたのデザインをその場で一貫性を保ち、編集可能にする時間節約です。

ユニットレス値

Divi 5の高度なユニットには、初期、解決策、自動値も含まれます。初期プロパティは、CSS仕様で定義されているように、CSSプロパティをデフォルト値にリセットします。たとえば、設定の色：段落の初期は、カスタムスタイルや継承スタイルを無視して、黒に戻します。 Unsetは、不動産を自然状態に戻し、該当する場合は、依存していないプロパティの初期のように振る舞うか、継承された値に戻るように振る舞います。一方、 Autoは、コンテンツに合わせてセクションの高さが伸びるなど、コンテキストに基づいてブラウザを決定できるようにします。

Divi 5で高度なユニットの動作方法

Divi 5の高度なユニットは、新しいレベルのコントロールを視覚ビルダーに直接持ち込み、応答性のある動的なデザインを簡単に作成できます。 VW、calc（）、またはclamp（）などのCSSユニット、機能、または変数を即座に入力できます。結果を参照してください。 DIVIでの高度なユニットの動作を次に示します。

calc（）を使用したレスポンシブセクション幅

ビューポートの高さの80％に及ぶが、上部と下からパディングを削除するセクションが必要だとしましょう。セクションのデザインタブに移動し、高さフィールドを見つけ、電子（80VH - 60px）をフィールドに追加します。

この計算により、セクションはビューポートで流動的にスケーリングでき、ビューポートの高さの80％を維持しながら、上部と下から30pxを差し引くことができます。

clamp（）を使用した流体タイポグラフィ（）

Clamp（）は、画面サイズで成長しているが読みやすい見出しが必要な場合に役立ちます。見出しモジュールのデザインタブで、見出しテキストサイズをクランプに設定します（52px、2vw、36px） 。

これにより、テキストが52pxに設定され、ビューポート幅の2％に基づいてスケールアップし、サイズを36pxにキャップします。

可変駆動型フォントサイズ

Divi 5のCSS変数は、間隔、テキスト、その他の領域で均一性を得るための優れた方法です。モジュール、列、行、またはセクションユニットフィールドに追加するだけで、変数を1回設定してから、デザイン全体で繰り返し使用できます。たとえば、手動で設定したり、オプショングループプリセットを使用して定義することなく、一貫した見出しサイズが必要だとしましょう。

以下をテーマオプションまたはページ設定に追加することができます。

:root{
--text-size-h1: 86px;
--text-size-h2: 60px;
--text-size-h3: 48px;
--text-size-h4: 36px;
--text-size-h5: 28px;
--text-size-h6: 20px;
}

そこから、見出しモジュールの見出しテキストサイズに変数を追加するだけです。たとえば、ヒーローセクションのこの見出しでは、 var（–text-size-h1）を追加するだけです。 Diviはそれを変数として認識し、適切なスタイルを見出しに割り当てます。

高度なユニットのベストプラクティス

Divi 5で高度なユニットを最大限に活用するために、思慮深いアプローチは時間を節約し、デザインが輝くことを保証できます。ここにあなたを導くためのいくつかのベストプラクティスがあります：

簡単に開始します

CSS関数と変数を使用するのが初めての場合は、ピクセル（PX）やパーセンテージ（％）などの馴染みのあるユニットを使用して、基本的な動的調整のためにCALC（）で実験してください。たとえば、Clamp（）またはCSS変数に飛び込む前に、セクション幅のCalc（100％-40px）を試してください。これは、早くからあなたを圧倒することなく自信を築きます。

一般的なスタイルの変数を活用します

サイト全体の一貫性のためのテーマオプションでCSS変数を定義します。たとえば、設定–Nutter：30pxを使用すると、セクション、行、モジュール全体の間隔を再利用できます。 CSS変数は、すべての見出しに均一なテキストサイズを設定するのに適しています。 1つの編集は、すべてを更新し、設計プロセスを高速化し、デザインをまとまります。

テスト応答性

Diviのレスポンシブビューシステムは、複数の画面サイズにわたってデザインを設計するのに最適な方法です。 VWやClamp（）などのユニットを適用した後、デスクトップ、タブレット、モバイルビューを切り替えて、レイアウトがスムーズに適応するようにします。クランプ（20px、3VW、40px）への見出しセットは、デスクトップで完璧に見えるかもしれませんが、小さな画面を調整する必要があるかもしれないので、確かにテストしてください。

複雑になりすぎないでください

Calc（Clamp（20px、5VW、50px） - 10px）のような機能をネストすることはできますが、少なくとも学習中は単純な式に固執する必要があります。過度の複雑さは、パフォーマンスを遅くし、物事が必要に応じて表示されないときにトラブルシューティングを難しくすることができます。清潔で意図的な計算に固執して、生活を楽にします。

高度なユニットがDIVIを高める理由5

高度なユニットは、設計プロセスを合理化するのに最適です。この新しい機能に伴う重要な利点のいくつかを以下に示します。

• Creative Freedom：ミキシングユニット、関数、および変数は、DIVIの以前のバージョンで達成するためにより時間がかかるレイアウトのロックを解除します。単純な式では、高さ、幅、フォントサイズなどを調整できます。この柔軟性により、視覚的なビルダー内で、より良く構築し、より速く実行できます。
• より良いレスポンシブデザイン：高度なユニットは、Diviを簡単に適応する流体設計にシフトします。 VWまたはCLAMP（）を使用すると、どのデバイスでもサイトが自然に感じられ、手動のオーバーライドが必要になり、洗練された体験が提供されます。
• それは将来のプルーフです：高度なユニットは、今日のウェブの視覚ビルダーを近代化するというDivi 5の使命と一致しています。 CSSの全力を採用することにより、Divi 5は最新のWebサイトを構築するために必要なツールを装備します。追いつくことだけではありません。それは、プロの開発者が使用するものを反映するツールを使用して、曲線の先を行くことです。

最新のDivi 5アルファをダウンロードします

Advanced Unitsは、Calc（）の精度からCLAMP（）の精度からCSS変数の効率まで、Divi 5に最近追加された有用な機能です。これらのツールは、間隔、サイジング、およびスケーラビリティをこれまで以上に直感的にします。 Diviを何年も使用している場合でも、それを発見したばかりでも、努力を少なくしてレスポンシブで動的なWebサイトを構築できます。

自分で見る準備はできていますか？ Divi 5 Alphaを今すぐダウンロードして、高度なユニットの実験を開始します。 Viewportの間隔でVWとVHをプレイし、タイポグラフィのテストクランプ（）、または構築方法を再考する変数を設定します。それはあなたのデザインをさらにプッシュし、可能なことを発見するチャンスです。