カスタマイズされた CSS 属性と特性

HTML要素をカスタマイズするには、 カスケードスタイルシート （CSS）属性をクラスやセレクターに追加します。Webflowでは、スタイルパネルから多数のCSS属性（location、overflow、box-shadowなど）にアクセスできますが、 全て CSS 属性。

カスタマイズされた CSS 属性と仕様を利用することで、スタイル パネルで本来サポートされていないより幅広い CSS 属性と値を統合できます。これにより、デザインの柔軟性が向上し、カスタマイズされたコード埋め込みの必要性が減り、デザイン ワークフローが合理化されます。

述べる： ブラウザのサポートが制限されている CSS 属性とベンダー プレフィックス (例: -webkit) が付いた属性は、パーソナライズされた属性としてサポートされていません。

役に立つ洞察: 特定の CSS 属性は、Web サイトのパフォーマンスに影響を与える可能性があります。可能な場合は、複雑な CSS 関数と属性の使用を最適化し、過剰な CSS の使用を最小限に抑えることをお勧めします。

このチュートリアルでは、次のことを理解します。

1. カスタマイズされた属性と価値を組み込む方法
2. パーソナライズされた値をWebflow互換の属性にリンクする方法
3. パーソナライズされた値に変数を実装する方法
4. よくある質問と問題解決のテクニック

カスタマイズされた属性と価値を組み込む方法

開始前に： 要素にクラスを確立するか、HTML タグ セレクターを使用して、カスタマイズされた属性を追加する要素のセットを選択します。

クラスにパーソナライズされた属性を追加するには:

1. パーソナライズされた属性を適用する要素を選択します
2. 訪問 スタイルパネル > カスタムプロパティ
3. クリック 追加
4. CSS属性を入力してください 指定 指定フィールド（例：text-decoration-color）
5. 入力してください 価値 フィールド内（例：#146EF5）
6. 打つ 入力 キーボードで

インサイダーヒント: より正確で動的なデザインへの影響を得るために、高度な関数 (calc()、color-mix() など) を含むカスタマイズされた値を使用できます。

インサイダーヒント: 複数のCSS行を挿入することができます スタイルパネル > カスタムプロパティ. Webflow 自動的に 選択した要素に CSS を整理して適用します。

プロパティ名を入力すると、アクセス可能なプロパティとそれに対応するキーボードショートカット（例： 指示 + 1, 指示 + 2など）が具体化されます。プロパティフィールドを自動化するには、 指示 (Macの場合) または コントロール (Windowsの場合) + 番号 希望するプロパティの横にあるオートコンプリートリストに表示される 上 そして 下 キーボードのキーを押して、利用したいプロパティをハイライトし、 入力 または タブ 選択します。

インサイダーヒント: 一連のカスタマイズされた属性と値を適用する場合は、 タブ 値を入力した後、値を記録します そして 追加したい次のプロパティを開始します。

カスタマイズされた属性と値を導入すると、デザイナー キャンバスに即座に変更が反映されます。Webflow 互換の属性を挿入し、カスタマイズされた値を割り当てると、スタイル パネルで設定されている既存の値よりも優先されます。スタイル パネルで適用されたスタイルと同様に、異なるブレークポイントに異なる値を割り当てることもできます。

特定の属性についてMDN documentationを参照する場合は、属性名の上にマウスを移動してタップします。 MDNで見る. 開催することもできます 指示 (Macの場合) または コントロール (Windows の場合) キーボードで を入力し、属性名をタップすると、新しいタブで MDN documentation のロックが解除されます。

クラスまたはタグからパーソナライズされた属性を削除するには、削除したい属性の上にマウスを移動し、「ごみ”アイコンをクリックします。

パーソナライズされた値を Webflow 互換の CSS 属性にリンクする方法

既存のWebflow互換属性にパーソナライズされた値を入力することで追加できますが、 スタイルパネル > カスタムプロパティ、パーソナライズされた値を Webflow 互換のフォント、サイズ、および色の属性に直接リンクすることもできます。

1. 起動する スタイルパネル
2. パーソナライズされた値を適用する入力フィールドをクリックするか、マウスを移動します（例：幅プロパティの入力）
3. 紫色の「ドット”アイコン — 紫色の「ドット”アイコンはフォント、サイズ、色の属性にのみ表示されます
4. クリック カスタム タブ
5. 入力してください パーソナライズされた価値 フィールド内（例：クランプ（1rem、1.5rem、1.5rem））

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

フォント、サイズ、色以外の属性にパーソナライズされた値を適用する場合は、まずパーソナライズされた値を スタイルパネル > カスタムプロパティ.

Webflow互換属性からパーソナライズされた値を切り離すには、削除したいパーソナライズされた値をタップし、「リンクを解除” アイコンをクリックします。リンクが解除されると、値は Webflow のデフォルトに戻ります (例: 幅は自動に戻り、不透明度は 100% に戻ります)。

パーソナライズされた値で変数を活用する方法

パーソナライズされた値に変数を統合できます。

述べる： カスタマイズされた CSS 値が変数値と同じ型である場合、変数をカスタマイズされた CSS 値としてのみ使用できます (たとえば、色の値を受け入れるカスタマイズされた属性の値としてのみ、色の変数を設定できます)。

変数を属性の値に関連付けるには:

1. 開始する 変数パネル
2. パーソナライズされたCSS値として使用したい変数にマウスを移動します
3. 設定をタップします。歯車” アイコン
4. タップして CS 値を複製するフィールド（例：var(–webflow-blue)）
5. パーソナライズされた属性を適用する要素を選択します
6. 前進する スタイルパネル > カスタムプロパティ
7. クリック 追加
8. CSS属性を入力する 指定 フィールド内（例：text-decoration-color）
9. 複製した値を貼り付けます CS フィールドの 価値 分野
10. 打つ 入力 キーボードで

述べる： パーソナライズされた値で使用される変数の名前を変更する場合は、パーソナライズされた値を手動で更新して調整する必要があります。

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

ベンダー プレフィックス付きのパーソナライズされた CSS 属性を利用したいと思っていますが、オートコンプリート リストに選択肢がありません。

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

属性にパーソナライズされた値を定義したいのですが、その属性がオートコンプリート リストにありません。

現在、次の属性にパーソナライズされた値を定義できません。

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

パーソナライズされた値を入力すると、入力エラーが発生します。

設定した値が有効なCSSであり、選択した属性でサポートされていることを確認してください。属性名の上にマウスを移動してタップします。 MDNで見る MDN documentation にアクセスし、属性と値が正しく設定されていることを確認してください。

パーソナライズされた属性と値が Designer キャンバスに反映されません。

属性と値が適切に設定されているにもかかわらず、デザイナーのキャンバスに反映されていない場合は、サイト上のカスタムコードやカスタムコード埋め込み要素を精査し、競合する属性と値を排除してください。また、競合する長文と 省略形プロパティ 例えば、margin-topをコントロールを使って定義した場合、 スタイルパネル > 間隔そして 短縮形のマージン属性を追加しました スタイルパネル > カスタムプロパティ、一方の値が他方の値より優先される場合があります。

パーソナライズされた属性と値が公開されたサイトでレンダリングされません。

属性と値が正しく設定されているにもかかわらず、公開されたサイトでレンダリングされない場合は、テストに使用しているブラウザが属性と値をサポートしていることを確認してください。 「使えますか？」サイトをご覧ください CSS 属性を検索してブラウザの互換性を確認します。

問題が解決しない場合、またはその他の懸念事項を報告する場合は、 カスタマーサポートチームにお問い合わせください 問題を再現するための手順。