Divi 5を使用したギャップベースの間隔システムの作成

一貫した間隔は、洗練されたプロのウェブサイトの基盤です。個々の要素のマージンを1つずつ管理する代わりに、レイアウトを清潔に保ち、サイト全体でバランスを保つ単一のシステムに頼ることができます。

Divi 5の新しい設計変数とFlexBox機能により、Visual Builderにギャップベースの間隔システムを直接構築できるようになり、カスタムコーディングは必要ありません。見てみましょう！

従来の間隔の方法が不足する理由

マージンとパディングは十分に簡単に思えます。ここにスペースを追加し、そこにパディングを調整します。しかし、このアプローチは簡単に乱雑になる可能性があります。これが実際にどのように展開するかです：

1つのテキストブロックに30pxマージンを設定します。その後、ボタンの周りにスペースが必要なので、20pxを追加します。

別のモジュールには呼吸室が必要なので、40pxを選択します。それぞれの決定はその瞬間に正しいと感じていますが、あなたはカードの家を建てています。

モバイルに切り替えると、すべてがバランスが取れているように見える場合があります。これらの慎重に選択されたピクセル値は翻訳されません。あなたの間隔はデスクトップでは完璧に見えますが、小さな画面サイズではバランスが崩れています。したがって、モバイル固有の値を作成し、タブレット値を作成します。

これで、3つの異なる間隔システムが管理されています。この分割アプローチにより、サイト全体で一貫した視覚リズムを維持します。

ギャッププロパティが間隔をシンプルにする方法

ギャッププロパティは、従来のマージンとは異なります。各要素に個別に間隔を適用しません。代わりに、親コンテナに間隔ルールを設定します。コンテナは、すべての子要素間の間隔を自動的に処理します。

FlexBoxを有効にすると、2つのギャップコントロールが取得されます。水平と垂直です。水平ギャップを24pxに設定すると、すべての子供の要素が水平に24pxのスペースを取得します。垂直ギャップを15pxに設定し、積み重ねられた要素を15pxの垂直スペースを取得します。

これは、フレックスボックスコンテナ内の任意のコンテンツに対して機能します。テキストモジュール、画像、ボタン、仕切り、およびそこに入れたものはすべて、同じ一貫した間隔を取得します。個々のモジュールを掘り下げてマージンを個別に調整する必要はありません。ギャッププロパティは、間隔の数学を処理します。

従来の方法により、ランダムな間隔の選択があります：ここでは10px、そこには20px、どこかで40pxです。これらの散乱値は矛盾を引き起こし、どの間隔が適用されるかを知ることを困難にします。ギャッププロパティすべての要素に対して1つの一貫したルールを使用して、当てはまりを削除します。

このアプローチにはまだ制限があります。使用したすべての価値を覚えておき、必要な場所に手動で適用する必要があります。どの値が機能するかを推測する必要があります。これらの値を設定すると、心を変えるということは、それぞれを見つけて手動で置き換えることを意味し、エラーや矛盾の余地を残します。

FlexBoxおよび設計変数を備えたギャップベースの間隔システムは、はるかに優れたアプローチです。

Divi 5でギャップシステムをセットアップする方法

ギャップベースの間隔システムの構築は複雑に聞こえますが、Divi 5は驚くほど簡単になります。コーディングの知識や外部フレームワークは必要ありません。 Visual Builderは、設計変数とFlexBoxコントロールを介してすべてを処理します。間隔変数の作成から再利用可能なプリセットの保存まで、各ステップを説明します。

1.間隔変数を作成します

DIVI 5は、設計変数を使用して視覚ビルダー内にギャップ値を保存できます。間隔システムを1回構築し、それらの値を適用して、FlexBoxコントロールが表示される場所で、カスタムCSS関数は必要ありません。

変数マネージャーは、ビジュアルビルダーの左側のサイドバーにあります。そのアイコンをクリックしてから、[数字]タブを開き、間隔変数を追加できます。

ここでは、ハードコードされたピクセルの代わりにサイト全体で使用できる値を作成します。いくつかの設計変数が利用可能です。この投稿にはそれらをカバーしませんが、優れたガイドがあります。

ベース間隔ユニットから始めます。ほとんどのデザイナーは、8〜12pxで基礎として作業していますが、4px、10px、またはデザインのリズムに合ったものを選択できます。ちょうどピクセルとは別に、ここで高度なユニットを使用できます。たとえば、ピクセルの代わりにREMから始めています（ブラウザのデフォルト1rem = 16pxを想定しています）：

• ギャップXS：0.75REM（アイコンとテキストのみのある列のタイトな関係のための〜12px）
• ギャップS：1.25rem（テキストブロック付きの列の場合は〜20px）
• ギャップM：2レム（機能ボックス、サービス列の場合は〜32px）
• ギャップL：3REM（メインコンテンツセクション、サイドバーレイアウトの場合は〜48px）

これらのラベルは固定されていません。あなたとあなたのチームは、必要に応じてそれらの名前を変更できます。さらにギャップ変数を追加することもできます。 REMユニットはブラウザフォント設定を備えたスケールであるため、テキストサイズを大きくする訪問者は比例した間隔を上げます。これにより、アクセシビリティが向上します。

クランプを使用して、スケーラブルなギャップを作成します

Clamp（）も使用できます。クランプ（）が何であるかわからない場合は、簡単に説明します。ただし、最初に、数値変数に以下を追加することを検討してください。

• 水平列のギャップ：クランプ（16px、2vw、32px）（カード、機能などの水平ギャップ用）
• 垂直列ギャップ：クランプ（16px、1.5vw、32px）（カード、機能などの垂直ギャップ用）

Clamp（）は、使用する安全なCSSユニットです。最小、優先、および最大3つの値を示します。ブラウザは優先値を試みますが、小さすぎる場合は最小を使用し、大きすぎると最大値を使用します。

たとえば、水平カラムギャップ：クランプ（16px、2vw、32px）。画面幅のあるギャップスケーリング（2VW =ビューポートの2％）。小さな画面では16px未満で、大きな画面では32px以上になりません。これにより、ブレークポイントやメディアクエリなしで間隔のバランスを保ちます。

任意の値を使用できます。この方法を選択し、維持が簡単で、変化に適応し、より一貫した結果を生み出すためです。

2.セクションでフレックスボックスレイアウトを有効にします

新しいセクションでは、デフォルトでFlexBoxを使用します。古いサイトの場合、[設定]アイコンをクリックして[デザイン]タブを開き、[レイアウト]タブの下の[レイアウトスタイルの選択]、[Flex]の選択でセクションを変換します。行や列についても同じことをします。

Flexを有効にした後、AlignmentとDistributionのコンテンツをJustifyなどのオプションを取得します。アイテムコントロールの整列により、スペースが水平に伸びたときのアイテムの動作を設定できます。

ここでは、ギャップコントロールを見つけることができます。ギャップコントロールは、列またはモジュール間の間隔を列に渡すために、個別の水平スライダーと垂直スライダーを備えています。

3.変数を使用してギャップ値を適用します

Diviの変数マネージャーにギャップ変数を設定すると、FlexBoxギャップ設定にそれらを適用すると、動的コンテンツシステムを介して簡単になります。レイアウト設定に移動し、水平または垂直ギャップフィールドのラベルの上にホバリングして、動的なコンテンツアイコンを表示します。

[動的なコンテンツアイコン]をクリックして、[変数選択]ダイアログを開きます。このメニューに保存されたギャップ変数が表示されます。

ご存知かもしれませんが、それらが使用されるコンテキストに基づいて、2セットのギャップを追加しました。より深いダイビングをして、理由を理解しましょう。

クランプギャップ：フレックスカラム間

クランプギャップは、DiviのFlexBox設定を介して「コンテナ」レベルで機能します。

水平列のギャップ[クランプ（16px、2vw、32px）]を適用します。列を並べて配置した場合、1つの列の3つのサービスカードのように。選択したら、Diviは自動的にギャップ設定に適用されます。フィールドには変数名が表示され、接続が確認されます。これにより、レイアウト方向が列に設定されている場合、列1、列2、列3の間に比例した水平間隔が作成されます。

垂直列のギャップ[クランプ（16px、1.5vw、32px）]を適用します。]レイアウト方向が列に設定されたら、アイテムを垂直に積み重ねます。これにより、レイアウト方向が列として設定されると、上から下に比例してアイテムをスペースにします。

行の方向がある列が複数の行に巻かれている場合、1行あたり3列に配置された6枚のカードなど、両方のギャップを適用します。水平ギャップは各行内にアイテムをスペースし、垂直ギャップは行自体をスペースにします。

ベースギャップ：行内のコンテンツ

ベースギャップは、各列内のコンテンツピース間の関係を制御します。見出しの後に、同じ列の段落とボタンが続く場合は、それらの間にギャップXS（0.75REM）を適用することを検討してください。

特に列のレイアウト方向が列に設定されている場合は、2つの列間の大きな間隔が必要な場合は、複数のテキスト要素を持つコンテンツグループまたはギャップL（3REM）にGAP S（1.25REM）を使用することを検討してください。

設計変数の利点

設計変数には、タイピング値に対して手動でいくつかの利点があります。ラベルはコンテキストである可能性があるため、ピクセル値やREM値を記憶せずに間隔を一貫性を保ちます。

間隔哲学を変更するときは、変数マネージャーの変数を更新して、サイト全体で使用されるすべてのギャップを更新します。

この視覚的方法は、チームメンバーが異なる値を入力すると、間隔エラーを回避します。ギャップ変数間隔の共通言語を作成し、設定したデザイン標準に合わせてレイアウトを整列させます。これは、多くの貢献者がいる大規模なプロジェクトや、クライアントがページを編集または追加するときにクライアントの引き渡し後に特に役立ちます。

4.応答性のあるギャップを設定します

携帯電話の水平スペースは限られています。 3列のサービスレイアウトはデスクトップで見栄えがよくなりますが、360pxの電話画面で読むのにcr屈で硬くなります。

Divi 5は、電話、携帯電話、タブレット、幅、デスクトップ、ワイドスクリーン、ウルトラ幅の7つのカスタマイズ可能なブレークポイントを提供します。各ブレークポイントは独立して機能します。レイアウト方向を変更したり、ギャップ変数を交換したり、デスクトップを台無しにすることなくモバイルのアライメントを調整できます。これにより、レイアウトが変更する必要がある正確な画面幅をターゲットにすることができます。

電話のブレークポイントに切り替えて、レイアウト方向を「行」から「列」に変更します。列は水平スペースのために戦うのではなく垂直にスタックするため、水平ギャップオプションをクリアします。

クランプベースの垂直ギャップは縮小し、ビューポート幅が変化すると自動的に成長します。小さな電話画面では、2VWは約7pxですが、クランプは最低16pxを超えません。より大きな画面では、2VWが18pxを意味し、さらに大きな画面で20pxを意味する場合があります。

画面サイズが変化すると、これらの制限間で間隔がスムーズに増加します。異なる値を手動で設定することなく、デスクトップ上のモバイルと寛大な間隔で緊密な間隔が得られます。

ベースギャップは、ブレークポイントごとに手動の調整が必要になる場合があります。ギャップMは、モバイルではきつすぎると感じるかもしれません。垂直ギャップオプションの代わりに、モバイルブレークポイントに切り替えて、ギャップLを適用します。

また、「Gap Mobile S」や「Gap Mobile L」などのモバイル固有の変数を作成し、電話やタブレットのブレークポイントに適用することもできます。ただし、ほとんどの場合、基本的なベースとクランプギャップはうまく機能します。

5.構成をプリセットとして保存します

ギャップシステムは今うまく機能します。設計変数により、作業中の視覚インターフェイスを介した間隔を制御できます。しかし、FlexBox構成を何度もセットアップすると、速く古くなります。レイアウトの方向、アライメント、ラッピング設定を調整する必要があります。次に、新しいセクションごとにギャップ変数を適用します。このプロセスは時間を食べます。

オプショングループプリセットこの問題を修正します。レイアウト方向、アライメント、ラッピング、正当化、設計変数を参照する水平ギャップと垂直ギャップなど、完全なFlexBoxセットアップを保存します。

すべてのフレックスボックス設定を構成したら、レイアウトスタイルパネルの上にホバリングします。オプショングループプリセットアイコンが表示されます。

それをクリックして、「現在のスタイルからプリセットの作成」を選択します。レイアウトが行うことに基づいて名前を付けます：「3列グリッド」、「サービスグリッド」、または「カードディスプレイ」。

プリセットは、FlexBox構成を任意のコンテナに運びます。背景の色、フォント、またはその他の視覚スタイリングはコピーしません。

「3列グリッド」プリセットを任意の行に適用します。同じ間隔、アライメント、およびラッピング動作を自動的にセットアップします。各行または列は、同じレイアウト構造を使用しながら、視覚的な外観を保持します。

すでに完成したセットアップの再作成に費やす時間が少なくなります。視覚的アイデンティティは、各セクションに固有のままです。構造基盤は、サイト全体で一貫しています。ギャップシステムは速く滞在して実装し、実証済みのレイアウトパターンは効率的に再利用されます。

Divi 5で毎回完璧な間隔を入手してください

Divi 5の新しいフレックスボックスと設計変数により、一貫した間隔は楽になります。ギャップは、デバイス間のレイアウトのバランスを制御しますが、変数はサイト全体に更新が1回の変更で反映されることを保証します。

絶え間ない修正の代わりに、信頼できる明確なシステムが取得されます。間隔を一度設定し、どこにでも再利用し、訪問者のための素晴らしい体験のデザインに集中してください。