Divi 5に、幅広いCSSの単位系や関数・変数に対応した多機能フィールドが誕生。
unsetやfit-content、関数のclamp(), calc()などを含む全CSSに対応し、CSS変数の定義と参照もDivi 5内で行える機能が実装された。
Diviを用いた、より流動的なレスポンシブデザインの制作が可能となる。
Elegant Themes公式の新機能紹介動画がこちら。
多機能フィールドには、レンジスライダーとバリューピッカーがあり、値を直接入力するだけでなく、スライダーを調整することやボタンを押すことで値の調整が直感的にできる。
CSS関数の適用例
clamp()関数を文字サイズに適用することで、レスポンシブな編集をせずとも画面サイズの変更に合わせてスムーズに文字サイズの調整がされるようなデザインにすることが可能だ。
calc()を使うことで、静的な数値(pxなど)と相対的な数値(%など)の組み合わせによる調整が可能となる。
上記の例では、中央配置のオブジェクトが、どの画面幅での表示においても常に両側が30pxずつ余白のあるデザインを制作することができる。
CSS変数の適用例
多機能フィールドには、自身で定義したCSS変数を割り当てることもできる。
上記のように、hタグのフォントサイズをページ設定のカスタムCSSにて行うことで変更や修正がしやすくなる。
多機能フィールドへ定義した変数名を入力すれば、設定した数値が適用される。
これからもDivi 5新機能の登場は続くようなので、注目していきたいところだ。
前回発表されたDivi 5の新機能はこちら。
Divi 5 新機能紹介 : オプショングループプリセット
Webサイトのデザイン管理がより一層簡単に、便利になるDivi 5の中でも重要な機能だ。
詳細情報
Divi 5
リリース時期 : 未定
価格 : $89(年間プラン), $249(買い切りプラン)
Divi 5がリリースされた場合、Diviの既存ユーザーであれば無料でアップデートができ利用できる。
リリース前のアルファ版 Divi 5のデモが公開されており、web上で使用感を体験することが可能だ。
Divi 5公式ページはこちら
新着記事
ElementorがAllyを発表 無料のWebアクセシビリティ向上を補完するプラグイン
当記事は広告を含みますElementorElementor(エレメンター)は3月26日、WordPress用無料プラグイン"Ally"のリリースを発表した。 Webのアクセシビリティ向上を補助してくれる機能が盛り込まれている。ElemantorはWordPress用無料プラグイン"Ally(エーライ)"をリリースした。 コントラスト調整やテキストサイズの変更などのWebのアクセシビリティ向上に関する機能を有している。 基本無料で、一部機能が有料プランにて開放される。...
Divi 5の新機能 : 列のネスト 列を入れ子構造にしたエレメントの配置構成が可能に
当記事は広告を含みますDivi 5Elegant Themesは3月28日、Divi 5 の新機能として、列のネスト(Nested Row)を実装することを発表した。 よりデザインを組みやすくなる、待ち望まれていた機能の一つだ。Divi 5に列のネストが実装される。 機能としては至ってシンプルで、列(Row)の中に更に列を配置できるというもの。 Elegant Themes公式の列のネスト、新機能紹介動画がこちら。従来のDivi 4までは、列の中にはテキストや画像などのモジュールを入れる事しかできなかった。...
Diviが大幅に進化 Divi 5とは? 特徴や公開時期、価格について解説
当記事は広告を含みますDiviWordPressテーマ及び、WebサイトビルダーのDiviは2025年で発売から17年目を迎えるロングセラーの人気テーマです。 そんなDiviが、Divi 5となって大幅に進化するので詳しく説明していきます。CONTENTS Divi 5とは Divi 5の特徴 Divi 5の進行状況 公開時期や価格は? まとめDivi 5 パブリックベータ版 近日公開予定 2024.9.27 Divi 5 パブリックアルファ版 公開Divi Anniversary...