Divi 5の新機能 : アドバンスユニット CSS関数, 変数を含めた幅広い単位定義が可能に

Divi 5に、幅広いCSSの単位系や関数・変数に対応した多機能フィールドが誕生。

unsetやfit-content、関数のclamp(), calc()などを含む全CSSに対応し、CSS変数の定義と参照もDivi 5内で行える機能が実装された。

Diviを用いた、より流動的なレスポンシブデザインの制作が可能となる。

Elegant Themes公式の新機能紹介動画がこちら。

多機能フィールドには、レンジスライダーとバリューピッカーがあり、値を直接入力するだけでなく、スライダーを調整することやボタンを押すことで値の調整が直感的にできる。

clamp()関数を文字サイズに適用することで、レスポンシブな編集をせずとも画面サイズの変更に合わせてスムーズに文字サイズの調整がされるようなデザインにすることが可能だ。

calc()を使うことで、静的な数値(pxなど)と相対的な数値(%など)の組み合わせによる調整が可能となる。 

上記の例では、中央配置のオブジェクトが、どの画面幅での表示においても常に両側が30pxずつ余白のあるデザインを制作することができる。 

多機能フィールドには、自身で定義したCSS変数を割り当てることもできる。

上記のように、hタグのフォントサイズをページ設定のカスタムCSSにて行うことも可能だ。

こちらは一例であり、実際は変数マネージャでヘッダーの文字サイズを定義した方が効率は良いだろう。

多機能フィールドへ定義した変数名を入力すれば、設定した数値が適用される。

これからもDivi 5新機能の登場は続くようなので、注目していきたいところだ。

前回発表されたDivi 5の新機能はこちら。

Divi 5がリリースされた場合、Diviの既存ユーザーであれば無料でアップデートができ利用できる。

リリース前のアルファ版 Divi 5のデモが公開されており、web上で使用感を体験することが可能だ。