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公式ページはこちら
新着記事
【2025年版】WordPressテーマ Divi 特徴やおすすめする6つの理由を解説
当記事は広告を含みますDiviWordPressを利用して簡単にデザイン性の高いWebサイトやブログ作りを始めたい方におすすめの人気テーマDiviを紹介します。 特にデザインにこだわりたい、他と差をつけたページを作りたい方におすすめのテーマです。Divi Anniversary Sale 2025 開催中Divi Anniversary Sale 2025 公式ページはこちら...
Divi 5 新機能 : フレックスボックス レイアウト
当記事は広告を含みますDivi 5Elegant Themesは4月10日、Divi 5 の新機能としてフレックスボックス(Flexbox)を用いたレイアウト機能の実装を発表した。 より自由なデザイン配置が可能となる。従来のDiviでのレイアウトシステムを刷新し、Divi 5ではフレックスボックスをベースとしたレイアウト調整が可能になる。 Elegant Themesのフレックスボックスについての紹介動画がこちら。列(Row)のテンプレートも大きく変わる。...
Rank Math がスプリングセールを開催中 最大28%OFF 4月9日まで
当記事は広告を含みますRankMathWordPress用SEOツールを提供する Rank Math は2025年4月2日より、期間限定のSpring Saleを開催している。 各種プランが最大29%OFFで購入できる。WordPress用 人気SEOツール Rank Mathがスプリングセールを期間限定で開催中だ。 期間 : 4月2日(水) - 4月9日(水) 19:30 日本時間 各種有料プランがセール価格となっている。 PRO : $7.99 $5.75/月 29%OFF...