Divi 5のFlexboxレイアウトシステムと垂直に整列する方法

視覚的にバランスのとれたレスポンシブレイアウトを作成することは、最新のWebデザインでは不可欠であり、Divi 5の新しいFlexboxレイアウトシステムにより、垂直方向のアライメントがこれまで以上に簡単になります。この強力な新機能により、Diviユーザーは柔軟で動的なレイアウトを設計し、垂直方向のポジショニングを完全に制御できます。セクション内にテキストを調整するか、マルチコラムの行でコンテンツのバランスをとるか、レスポンシブデザインの作成であろうと、Divi 5は、視覚ビルダーに直接構築された直感的なコントロールでプロセスを簡素化します。

この投稿では、垂直方向のアライメントをマスターし、実世界の例を提供し、応答性のある洗練されたレイアウトを作成するためのヒントを提供するための手順を説明します。 Divi 5のFlexboxレイアウトシステムが垂直方向のアラインメントにアプローチを変換する方法を調べてみましょう。

Divi 5のFlexboxレイアウトシステムの理解

FlexBox、または柔軟なボックスレイアウトは、コンテナ内の要素の配置を簡素化するように設計されたCSSレイアウトモデルであり、水平および垂直のアライメントに最適です。フロートやマージンなどの従来の方法とは異なり、FlexBoxはコンテンツを整理するための簡単なアプローチを提供します。要素は、コンテナの寸法とビューポートに基づいて、サイズ、順序、およびアライメントを動的に調整し、すべての画面サイズにわたってレイアウトが一貫して応答性があるようにします。

FlexBoxを使用すると、コンテンツを簡単に中心に、スペースを均等に配布するか、特定の順序で要素をスタックできます。この柔軟性により、Webデザイナーにとっては必須であり、Divi 5は、ユーザーがCSSの高度な知識を必要とせずに洗練されたレイアウトを作成できるようにする力を活用しています。

Divi 5がFlexBoxを統合する方法

Divi 5は最近、FlexBoxレイアウトシステムを導入しました。このシステムは、FlexBoxを視覚ビルダーに直接統合し、ユーザーが直感的な設定でセクション、行、列、およびモジュールの配置を制御できるようにします。

主要な機能には、単一の列からマルチローチセクションまで、さまざまな新しい行テンプレートが含まれており、DIVIでレイアウトを作成することがこれまで以上に簡単になります。

Divi 5のFlexBoxコントロールを使用すると、レイアウトの方向を制御し、水平および垂直ギャップを調整し、スタート、センター、またはエンドのコンテンツを正当化し、ラッピングを有効にします。

Divi 5の新しいChange Column Structure機能により、小さなデバイスで列がどのように動作するかをより制御できます。列の数を簡単に変更したり、並べ替えたりすることで、どんな画面サイズでもデザインが見栄えを良くすることができます。

Divi 5は、列を互いにネストして、時代遅れのセクションタイプに依存せずに複雑でレスポンシブなデザインを作成できるため、専門のセクションとフルワイトセクションから離れて移動します。これらの進歩により、Divi 5のFlexboxレイアウトシステムは、ビルダー内に直接最新の適応可能なレイアウトを構築するための強力なツールになります。

DIVI 5で垂直アライメントを設定します

Divi 5のFlexboxレイアウトシステムは、Visual Builderにシームレスに統合されているため、ユーザーが柔軟でレスポンシブなデザインを作成できるようになります。開始するには、新しいページまたは既存のページでビジュアルビルダーを開き、セクションと行を追加します。レイアウト全体を作成したので、さまざまなシナリオでアイテムを垂直に整列させるための手順を歩いてください。

セクションの垂直アライメント

セクションの設定で、 [デザイン]タブに移動し、レイアウトオプションを見つけます。ここでは、FlexBoxコントロールがあります。

フレックスがレイアウトスタイルの下で選択されていることを確認してください。これにより、セクションのFlexBoxが有効になることが保証されます。

デフォルトでは、 Start （Flex-Start）がJustifyコンテンツの下で選択されます。これにより、コンテナの開始時にすべてのアイテムが揃っています。この例では、アイテムを垂直に中央に配置したい場合は、それらを中心、周囲、またはスペースに均等に並べることを選択できます。ネストされた行が含まれている単一の行があるため、セクションのすべての設計要素は、上記のオプションを垂直に中央に集中させます。

行の垂直アライメント

また、行レベルでコンテンツを垂直に整列することもできます。ただし、この例では、コンテンツを正当化して行内のモジュールを垂直に整列させるのではなく、 Alignアイテムを使用します。行の[デザイン]タブで、レイアウト設定を見つけます。 Flexを有効にして、 Align Itemsの設定を見つけてください。デフォルトでは、 STARTが選択され、これにより、列のすべてのモジュールがコンテナの上部に揃っています。

要素の整列方法に応じて、いくつかのオプションがあります。列のアイテムを垂直に中央にしたい場合は、中心を選択してください。終了を選択すると、すべてのアイテムが行の下部に並べられます。ストレッチにより、すべてのアイテムが列の高さを満たします。

マルチローチセクションでの垂直アライメント

このシナリオでは、セクションには3行があり、1列の行と2つの3列の行があります。 Justifyコンテンツ設定を使用して、行内のすべてのコンテンツを垂直に整列させます。

セクションが列をレイアウト方向として使用する場合、 Justifyコンテンツは行の行を垂直に整列させます。 STARTはデフォルトで選択されます。すべての行をセクションの上部に合わせます。行は、上端から始まり、一緒に詰められます。センターは、セクションのすべての行を垂直に並べます。行は、下端から一緒に詰め込まれます。終了を選択すると、すべての行がセクションの下部に合わせます。行は、下端から始まり、一緒に詰められます。

間の間のスペースは、主軸に沿って行を均等に分配します（垂直）。最初の行はセクションの上部、最後の行に対して下の行に対してフラッシュされ、その間の行の任意の行には、それらを分離する等量のスペースがあります。周囲のスペースは、各アイテムの周りに等しいスペースを持つ行を分配します。

隣接する行の間のスペースは、行の端（最初の行とセクションの上部の間のスペース、およびセクションの最後の行と下部の間のスペース）のスペースの2倍になります。最後に、スペースは周囲のスペースに均等に似ていますが、各行の間のスペースが同じであり、セクションの最初と最後のスペースもその間隔に等しくなります。

モジュールグループの垂直アライメント

Divi 5のFlexboxシステムは、特に動的コンテンツにループビルダーなどの機能を使用する場合、モジュールグループ内の垂直アライメントも簡素化します。画像、投稿のタイトル、投稿の抜粋、ボタンを備えたブログ投稿を表示するモジュールグループを検討してください。適切なアライメントがなければ、ボタンのような要素は、列間でずれているように見える場合があります。以前のDIVIバージョンでは、これには等しい列高さとカスタムCSSが必要でした。 Divi 5は、このプロセスをFlexBoxで合理化します。

要素を調整するには、モジュールグループの最初の列をクリックし、 [デザイン]タブに移動し、フレックス設定を見つけます。 justifyコンテンツを間にスペースに設定します。これにより、列内のモジュールが均等に配布され、カスタムCSSなしですべての列の読み取りボタンを完全に整列させます。このアプローチにより、ブロググリッドや製品リストなどの動的なコンテンツの一貫したプロフェッショナルレイアウトが保証されます。

ファイルをダウンロードします

無料でダウンロードしてください

Divi Newsletterに参加してください。究極のDiviランディングページレイアウトパックのコピーに加えて、他の驚くべき無料のDiviリソース、ヒント、トリックを大量にメールで送信します。フォローすると、すぐにDiviマスターになります。既にサブスクライブされている場合は、以下のメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

サブスクライブに成功しました。メールアドレスを確認してサブスクリプションを確認し、無料の毎週のDiviレイアウトパックにアクセスしてください！

応答性のある垂直アライメントのヒント

Divi 5のFlexboxレイアウトシステムにより、コンテンツを垂直的に整列させることができますが、考慮すべきヒントがいくつかあります。 Divi 5は、レスポンシブデザイン用の堅牢なツールを提供し、すべてのデバイスで垂直方向のアライメントを微調整できます。 Hero Sectionにコンテンツを集中化している場合でも、ボタンをマルチコラムレイアウトに合わせている場合でも、次のヒントはDivi 5の機能を活用して、一貫したプロフェッショナルなレイアウトを維持するのに役立ちます。

Divi 5のカスタマイズ可能なレスポンシブブレークポイントを使用します

Divi 5のFlexBoxシステムを使用すると、さまざまな画面サイズのモジュールの順序とアラインメントをカスタマイズして、レイアウトがすべての画面サイズに適応するようにします。 Visual Builderでは、 7つのカスタマイズ可能なレスポンシブブレークポイントを使用して、デバイス間でレイアウトがどのように表示されるかを制御できます。

垂直アライメントを最適化するために、タブレットおよびモバイルデバイスの列構造を調整できます。これにより、すべての画面サイズでレイアウトが完璧に見えるようになります。たとえば、タブレットに2つの列が必要になる場合があり、モバイルデバイスには1つだけが必要です。

Divi 5のFlexboxレイアウトシステムを使用すると、モバイルデバイス上の列の順序を変更して、モバイルユーザーが最初にセクションまたは行で表示するものを制御することもできます。

Divi 5の設計変数を使用します

Divi 5の設計変数機能は、レスポンシブビュー全体で一貫した間隔とアラインメントを維持するのに最適です。設計変数を使用すると、パディング、マージン、フォントサイズなどのプロパティの再利用可能な値を定義し、レイアウトの均一性を確保できます。垂直アライメントの場合、行またはセクション内の間隔を標準化する垂直パディングの変数を作成できます。たとえば、DiviのVariable Managerで垂直パディングという名前の設計変数を30pxに設定します。

変数を行に適用するには、[デザイン]タブに移動し、[間隔]ドロップダウンメニューをクリックし、[動的なコンテンツ]アイコンをクリックして使用します。

FlexBoxは垂直アライメントを簡単にします

Divi 5のFlexboxレイアウトシステムにより、垂直方向のアライメントが簡単になり、洗練されたレイアウトを作成するための柔軟で応答性の高いソリューションが提供されます。 FlexBoxをVisual Builderに統合することにより、Divi 5を使用すると、ユーザーはCSSの高度な知識を必要とせずに、セクション、行、列、モジュールグループのアラインメントを精度で制御できます。その機能は、すべてのデバイスで一貫したプロフェッショナルな設計を保証します。コンテンツを中央に配置したり、動的モジュールグループを調整したり、マルチローレイアウトを構築したりするかどうかにかかわらず、Divi 5は、結果を提供しながらプロセスを簡素化します。

最新のDIVI 5アルファをダウンロードし、新しいプロジェクトでFlexBoxレイアウトシステムを試してください。