関数を使った高度な変数管理ができるようになりました！

※この記事は2025年6月3日にWebflowが公開した下記アップデート情報・ニュースを日本語訳したものです（一部加筆・修正あり）

Advanced variables with functions

‍

CSS関数（clamp(), calc(), min(), max(), color-mix() など）を用いて、Webflow上で動的なデザイン値を定義できるようになりました。

これにより、柔軟で再利用可能なスタイルを簡単に作成でき、モダンでスケーラブルなWebサイト構築をサポートします。

‍

Webflow Variablesの拡張

今回のアップデートにより、変数の値をネイティブCSS関数で直接定義できる「Function variables」が追加されました。

これにより、スタイル値がよりレスポンシブかつ柔軟に扱えるようになり、カスタムコードに頼らずスケーラブルなデザインシステムを構築できます。

‍

Function variablesとは？

Function variablesを使うことで、以下のようなことが可能になります。

• clamp() を使って流動的でレスポンシブなサイズを作成
• calc() を使ってレイアウト計算を実行
• min() / max() を使って条件ベースのスタイルを適用
• color-mix() を使って色をプログラム的にブレンド・変更

他の変数と同じように、Function variablesで定義した値はサイト全体で再利用でき、単一の情報源から更新・管理できます。

‍

よりスムーズでスマートな編集体験

Function variables対応に伴い、変数の作成・接続・編集ワークフローがアップデートされました。

• 「Connect」メニュー
  これまでの紫のドットメニューは「Connect」メニューへ名称変更。スタイルプロパティを変数やデータ、カスタム値に接続する意図がより明確になりました。新しいフィルター機能も追加され、必要なものを素早く探せます。

• カスタム値エディタの再設計
  強化されたカスタム値エディタでは以下が可能に
  • 変数やCSS関数の オートコンプリート
  • MDNリファレンス とコードスニペットを内蔵
  • マルチカーソル編集、ショートカットキー、新しい行やタブにも完全対応
• ワークフロー短縮のショートカット
  • VariablesパネルからCSS関数を直接変数フィールドに貼り付け可能
  • スタイルプロパティや変数設定時に「=」キーを押せば即座に関数エディタにアクセス

これらの改善によって、CSSを直接書かなくても動的スタイルの設定が直感的に行えるようになりました。

‍

‍