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公式ページはこちら
新着記事
Divi 5 新機能 : 変数デザイン 数値, フォントの種類, サイズやリンクも全て変数で管理
当記事は広告を含みますDivi 5Elegant Themesは4月4日、Divi 5 の新機能として 変数デザイン(Design Variables)を実装したことを発表した。 Diviが得意とするデザインの一括管理機能が更に充実した。Divi 5に変数デザイン機能が実装された。 変数を自分で定義して、色やフォントのスタイル, サイズ、文章や画像などコンテンツの内容などの幅広い要素に対して適用できる機能だ。 変数の値を変更すれば、適用した箇所全てに一括で変更が加えられる。 Elegant...
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までは、列の中にはテキストや画像などのモジュールを入れる事しかできなかった。...