カスタムCSS プロパティと値

ネイティブのスタイルパネルコントロールがないプロパティであっても、カスタムCSS プロパティをクラスに適用することができます。

今回はWebflowでのカスタムプロパティと値を追加する方法についてご紹介します。

‍

HTML要素にスタイルを設定するには、クラスまたはセレクターにカスケーディングスタイル シート(CSS) プロパティを追加します。

Webflow では、スタイルパネルから多くのCSSプロパティ (位置、オーバーフロー、ボックス シャドウなど) にアクセスできますが、すべてのCSSプロパティをサポートしているわけではありません。

カスタムCSSプロパティと値を使用すると、スタイルパネルでネイティブにサポートされていない、より幅広いCSSプロパティと値を組み込むことができます。

これにより、スタイル設定の柔軟性が向上し、カスタムコードの埋め込みの必要性が減り、デザインプロセスが効率化されます。

‍

注記

ブラウザのサポートが制限されているCSSプロパティとベンダープレフィックス (例: -webkit) が付いたプロパティは、カスタム プロパティとしてサポートされていません。

‍

知っておくと良いこと

一部のCSSプロパティはサイトのパフォーマンスに影響を与える可能性があります。

複雑な CSS関数とプロパティの使用を最適化し、可能な限りCSSの過度な使用を最小限に抑えることをお勧めします。

‍

カスタムプロパティと値を追加する方法

始める前に

要素にクラスを作成するか、 HTML タグセレクターを使用して、カスタムプロパティを追加する要素のグループを選択します。

1. カスタムプロパティを適用する要素を選択します
2. Style panel>Custom propertiesに移動します
3. Addをクリック
4. 名前フィールドにCSSプロパティ名を入力します（例：text-decoration-color）
5. フィールドに値を入力します（例：#146EF5）
6. キーボードのEnterキーを押します

ヒント

• より正確で動的なデザイン制御のために、高度な関数 (calc()、color-mix() など) を使用するカスタム値を記述できます。
• Style panel>Custom propertiesに複数行の CSS を貼り付けることができます。Webflow は自動的にCSSをフォーマットし、選択した要素に適用します。

‍

プロパティ名を入力すると、使用可能なプロパティと対応するキーボードショートカット (例: Command + 1、Command + 2など) のオートコンプリート リストが表示されます。

プロパティフィールドを自動入力するには、目的のプロパティの横にあるオートコンプリートリストに表示されているCommand (Mac の場合) またはControl (Windows の場合) +数字を押すか、キーボードの上下キーを使用して使用するプロパティを強調表示し、EnterまたはTabキーを押して選択します。

‍

ヒント

• 一連のカスタム プロパティと値を適用する場合は、値を入力した後にTab キーを押して値を保存し、次に追加するプロパティを開始できます。

‍

カスタム プロパティと値を追加すると、デザイナーキャンバスに変更がすぐに反映されます。

Webflow でサポートされているプロパティを追加してカスタム値を指定すると、スタイルパネルで設定されている既存の値が上書きされます。

スタイル パネルで適用されたスタイルと同様に、異なるブレークポイントに異なる値を適用することもできます。

特定のプロパティの MDNドキュメントを確認する場合は、プロパティ名の上にマウスを移動して[View on MDN]をクリックします。

キーボードでCommand キー(Mac の場合) またはControl キー(Windows の場合)を押したままプロパティ名をクリックすると、新しいタブでその MDN ドキュメントが開きます。

クラスまたはタグからカスタムプロパティを削除するには、削除するプロパティの上にマウスを移動し、「ゴミ箱」アイコンをクリックします。

‍

Webflow でサポートされている CSS プロパティにカスタム値をバインドする方法

既存の Webflow 対応プロパティにカスタム値を追加するには、Style panel >Custom propertiesに値を入力しますが、Webflow 対応のフォント、サイズ、色のプロパティにカスタム値を直接バインドすることもできます。

1. Style panelを開く
2. カスタム値を適用する入力フィールドをクリックするか、マウスを移動します（例：幅プロパティの入力）
3. 紫色の「ドット」アイコンをクリックします。紫色の「ドット」アイコンはフォント、サイズ、色のプロパティにのみ表示されることに注意してください。
4. Customタブをクリックします
5. フィールドにカスタム値を入力します（例：clamp(1rem, 1.5rem, 1.5rem)）

注記

背景プロパティ (背景色、背景サイズなど) やサブプロパティ (box-shadow: 2px custom-value-offset 3px 4px #146EF5 など) にカスタム CSS 値を使用することはできません。

‍

カスタム値で変数を使用する方法

カスタム値に変数を使用できます。

注記

カスタム CSS 値が変数値と同じタイプである場合にのみ、変数をカスタム CSS 値として使用できます (たとえば、色値を受け入れるカスタム プロパティの値としてのみ色変数を設定できます)。

‍

1. Variables panelを開く
2. カスタムCSS値として使用したい変数にマウスを移動します
3. 設定の「歯車」アイコンをクリックします
4. CSSフィールドをクリックしてその値をコピーします (例: var(--webflow-blue))
5. カスタムプロパティを適用する要素を選択します
6. Style panel>Custom propertiesに移動します
7. Addをクリック
8. フィールドにCSSプロパティ名を入力します（例：text-decoration-color）
9. CSSフィールドからコピーした値を値フィールドに貼り付けます
10. キーボードのEnterキーを押します

注記

カスタム値で使用される変数の名前を変更する場合は、一致するようにカスタム値を手動で更新する必要があります。

‍

FAQとトラブルシューティング

ベンダープレフィックス付きのカスタム CSS プロパティを使用したいのですが、そのオプションがオートコンプリートリストにありません。

ブラウザのサポートが制限されている CSS プロパティとベンダープレフィックス (例: -webkit) が付いたプロパティは、カスタムプロパティとしてサポートされていません。

プロパティにカスタム値を設定したいのですが、そのプロパティがオートコンプリート リストにありません。

現時点では、次のプロパティにカスタム値を設定することはできません。

• 背景
• 背景添付
• 背景画像
• 背景位置
• 背景繰り返し
• 背景サイズ
• フォントバリエーション設定
• 遷移
• 遷移遅延
• 遷移期間
• 遷移プロパティ
• 遷移タイミング関数

カスタム値を入力すると入力エラーが発生します。

設定した値が有効なCSSであり、選択したプロパティでサポートされていることを確認してください。

プロパティ名の上にマウスを移動し、View on MDNをクリックしてMDNドキュメントにアクセスし、プロパティと値が正しく設定されていることを確認してください。

カスタムプロパティと値が Designer キャンバスに反映されません。

プロパティと値が正しく設定されているのにデザイナーのキャンバスに反映されない場合は、サイト上のカスタムコードやカスタムコード埋め込み要素をチェックして、競合するプロパティと値を削除します。

また、競合するロングハンドプロパティとショートハンドプロパティもチェックする必要があります。

たとえば、Style panel>Spacingを使用して margin-top を設定し 、Style panel>Custom propertiesでショートハンドmargin プロパティを追加した場合、一方の値がもう一方の値を上書きする可能性があります。

カスタム プロパティと値が公開されたサイトでレンダリングされません。

プロパティと値が正しく設定されているにもかかわらず、公開されたサイトでレンダリングされない場合は、テストに使用しているブラウザーがプロパティと値をサポートしているかどうかを確認してください。

Can I use? サイトにアクセスして CSS プロパティを検索し、ブラウザーの互換性を確認できます。

問題が解決しない場合、またはその他の問題を報告する場合は、問題を再現する手順を添えてカスタマーサポートチームにお問い合わせされることをお勧めします。

‍