DIVI 5のCSSグリッドの導入

これは大きなものです。私たちは最高のCSSグリッドビルダーを構築しましたが、今日はDivi 5で利用できます。それはエレメンタルよりも優れています。レンガよりも優れています。グリッドをマスターしたい場合でも、Diviの新しいグリッドテンプレートを使用する場合でも、このアップデートが気に入るはずです。

次のビデオをチェックして、新しい機能を参照してください。

皆のためのCSSグリッド

Divi 5は、その前身とはかけ離れています。 FlexBox、Advancedユニット、プリセット、設計変数などの新機能を備えた、DiviをWeb Design Powerhouseに変えてきました。 CSSグリッドは次の大きな一歩です。

同時に、既存のユーザーが新しい設定に迷子または埋葬されていると感じたくありません。初心者がアクセスできるようにしながら、高度なユーザーに必要なツールを提供することとの間の適切なバランスをとりました。

あらゆる機会のグリッドテンプレート

CSSグリッドのことを聞いたことがなく、グリッドレイアウトのインとアウトを学びたいと思っていない場合は、心配しないでください。新しい事前に構築されたグリッドテンプレートをお楽しみください！

グリッドテンプレートを使用することの美しさは、グリッドがコンテナレベルで制御され、新しいアイテムを追加すると、グリッドに自動的に適合することです。それははるかに直感的で、新しい種類のデザインのロックを解除します。

Diviにはあらゆる状況に合わせてグリッドテンプレートがあり、既存のコンテンツにそれらを適用するのは簡単です。

グリッドの専門家の完全な制御

あなたがベテランのCSSグリッドの専門家である場合、Diviのグリッドオプションはあなたを妨げません。ポイントにまっすぐに到達し、列と行のグリッドテンプレートを手動で定義し、オフセット編集を使用してさまざまなグリッドレイアウトを作成できます。

もちろん、カスタムCSSパネルを使用してインターフェイスを忘れてグリッドルールを適用することもできます。あなたに最適なものは何でも。

Webアセンブラーの直感的なグリッドオプション

あなたが中間にいるなら、Divi 5のグリッドビルダーが本当に輝いています。

CSSグリッドパラメーターを設定に変換して、垂直または水平グリッドを作成し、列と行の寸法をカスタマイズし、グリッド方向、要素のアライメントと正当化などをカスタマイズしました。

さらに、サイジングオプショングループには、グリッド内の個々のグリッドアイテムの幅、高さ、および位置を調整できる新しい列および行オプションが含まれています。

グリッドオフセット編集

Divi 5のグリッドビルダーの最もユニークな側面の1つは、オフセットエディターです。これを使用して、コンテナレベルで非対称のグリッドパターンを繰り返し作成できます。現実世界の例を挙げましょう。

Divi 5のループビルダーを使用して、以下のビデオでブログテンプレートを作成しました。各列は、動的なコンテンツで満たされたループアイテムです。親コンテナでグリッドレイアウトスタイルを有効にすると、列がグリッドに自動的に適合します。

列の数を調整し、カスタム列または行パターンを入力し、ギャップサイズを変更し、他の多くのことを行うことができます。

さらに、オフセットエディターを使用して、グリッド内の特定のアイテムにルールを適用できます。

各行で繰り返される標準の列パターンの代わりに、たとえば、4項目ごとに2列ごとに2番目と3番目のアイテムから始まることにより、オフセットパターンを作成できます。これらのオフセットパターンは、Divi 5の事前に構築された行テンプレートに非常に多様性を与えます。

CSSグリッドデモ（無料ダウンロード）

これまでに不可能なCSSグリッドを使用して、壮大なレイアウトを作成できます。インスピレーションが必要な場合は、Divi 5の最新バージョンを使用して作成したデザインチームの見事なレイアウトをご覧ください。

それらを無料でダウンロードして、自分でテストすることができます。

今日Divi 5を試してみてください

DIVI 5のCSSグリッドは本日利用可能であり、今年DIVIに登場する多くの機能の1つです。

Divi 5以降の最終リリースを進むにつれて、2週間ごとに更新を進めることができます。優先順位に応じて、Divi 5を使用して新しいWebサイトを構築したり、機能を追加するまで待機したりすることができます。

Divi 5のオリジナルの多相リリーススケジュールで概説されているように、Divi 5 Public Alphaは「Divi 5 Lite」のようなものです。いくつかの機能が欠落しており、既存のWebサイトには適していない場合がありますが、Divi 4のエクスペリエンスを好む場合は、新しいWebサイトで使用する準備ができています。

私たちはあなたにそれを試してほしい、そしてあなたがそれを愛しているなら、それを使ってください。誰もがそれを愛しているとき、私たちはそれを公式にします。

Divi 5のカスタム属性を試しましたか？

見逃した場合に備えて、最近、新しいカスタム属性をリリースしました。これにより、Alt、Title、Rel、Aria-Labelなどの属性を要素とほとんどのサブエレメントに追加できます。

Diviは、クラスやIDなどの特定の属性をサポートしていますが、現在、あらゆる要素に任意の属性を追加できます。これは、アクセシビリティにとって特に重要であり、たとえば、画像にAltテキストを追加することができます。

すべての詳細については、このビデオをご覧ください。

Divi 5の更新が進行中です

2025はDivi 5の年です。退屈な仕事は私たちの後ろにあります。私たちはSuper-Fast Foundationを構築しましたが、Diviがカムバックする時が来ました。

Diviのカムバックのためにここにいる場合は、このビデオが好きでコメントを残して、私たちに大きな恩恵を与えてください。あなたがDiviを応援しているのを見るのは私たちにとって多くのことを意味し、アルゴリズムを供給して言葉を広めることが不可欠です。

YouTubeでフォローし、Diviニュースレターを購読することを忘れないでください。そうすれば、更新を見逃すことはありません。もう1つのDivi 5機能の発表でお会いしましょう。