ネイティブのスタイルパネルコントロールがないプロパティであっても、カスタムCSS プロパティをクラスに適用することができます。
今回はWebflowでのカスタムプロパティと値を追加する方法についてご紹介します。
HTML要素にスタイルを設定するには、クラスまたはセレクターにカスケーディングスタイル シート(CSS) プロパティを追加します。
Webflow では、スタイルパネルから多くのCSSプロパティ (位置、オーバーフロー、ボックス シャドウなど) にアクセスできますが、すべてのCSSプロパティをサポートしているわけではありません。
カスタムCSSプロパティと値を使用すると、スタイルパネルでネイティブにサポートされていない、より幅広いCSSプロパティと値を組み込むことができます。
これにより、スタイル設定の柔軟性が向上し、カスタムコードの埋め込みの必要性が減り、デザインプロセスが効率化されます。
注記
ブラウザのサポートが制限されているCSSプロパティとベンダープレフィックス (例: -webkit) が付いたプロパティは、カスタム プロパティとしてサポートされていません。
知っておくと良いこと
一部のCSSプロパティはサイトのパフォーマンスに影響を与える可能性があります。
複雑な CSS関数とプロパティの使用を最適化し、可能な限りCSSの過度な使用を最小限に抑えることをお勧めします。
始める前に
要素にクラスを作成するか、 HTML タグセレクターを使用して、カスタムプロパティを追加する要素のグループを選択します。
ヒント
プロパティ名を入力すると、使用可能なプロパティと対応するキーボードショートカット (例: Command + 1、Command + 2など) のオートコンプリート リストが表示されます。
プロパティフィールドを自動入力するには、目的のプロパティの横にあるオートコンプリートリストに表示されているCommand (Mac の場合) またはControl (Windows の場合) +数字を押すか、キーボードの上下キーを使用して使用するプロパティを強調表示し、EnterまたはTabキーを押して選択します。
ヒント
カスタム プロパティと値を追加すると、デザイナーキャンバスに変更がすぐに反映されます。
Webflow でサポートされているプロパティを追加してカスタム値を指定すると、スタイルパネルで設定されている既存の値が上書きされます。
スタイル パネルで適用されたスタイルと同様に、異なるブレークポイントに異なる値を適用することもできます。
特定のプロパティの MDNドキュメントを確認する場合は、プロパティ名の上にマウスを移動して[View on MDN]をクリックします。
キーボードでCommand キー(Mac の場合) またはControl キー(Windows の場合)を押したままプロパティ名をクリックすると、新しいタブでその MDN ドキュメントが開きます。
クラスまたはタグからカスタムプロパティを削除するには、削除するプロパティの上にマウスを移動し、「ゴミ箱」アイコンをクリックします。
既存の Webflow 対応プロパティにカスタム値を追加するには、Style panel >Custom propertiesに値を入力しますが、Webflow 対応のフォント、サイズ、色のプロパティにカスタム値を直接バインドすることもできます。
注記
背景プロパティ (背景色、背景サイズなど) やサブプロパティ (box-shadow: 2px custom-value-offset 3px 4px #146EF5 など) にカスタム CSS 値を使用することはできません。
カスタム値に変数を使用できます。
注記
カスタム CSS 値が変数値と同じタイプである場合にのみ、変数をカスタム CSS 値として使用できます (たとえば、色値を受け入れるカスタム プロパティの値としてのみ色変数を設定できます)。
注記
カスタム値で使用される変数の名前を変更する場合は、一致するようにカスタム値を手動で更新する必要があります。
ブラウザのサポートが制限されている CSS プロパティとベンダープレフィックス (例: -webkit) が付いたプロパティは、カスタムプロパティとしてサポートされていません。
現時点では、次のプロパティにカスタム値を設定することはできません。
設定した値が有効なCSSであり、選択したプロパティでサポートされていることを確認してください。
プロパティ名の上にマウスを移動し、View on MDNをクリックしてMDNドキュメントにアクセスし、プロパティと値が正しく設定されていることを確認してください。
プロパティと値が正しく設定されているのにデザイナーのキャンバスに反映されない場合は、サイト上のカスタムコードやカスタムコード埋め込み要素をチェックして、競合するプロパティと値を削除します。
また、競合するロングハンドプロパティとショートハンドプロパティもチェックする必要があります。
たとえば、Style panel>Spacingを使用して margin-top を設定し 、Style panel>Custom propertiesでショートハンドmargin プロパティを追加した場合、一方の値がもう一方の値を上書きする可能性があります。
プロパティと値が正しく設定されているにもかかわらず、公開されたサイトでレンダリングされない場合は、テストに使用しているブラウザーがプロパティと値をサポートしているかどうかを確認してください。
Can I use? サイトにアクセスして CSS プロパティを検索し、ブラウザーの互換性を確認できます。
問題が解決しない場合、またはその他の問題を報告する場合は、問題を再現する手順を添えてカスタマーサポートチームにお問い合わせされることをお勧めします。
会社名
Funwork株式会社
所在地
東京都千代田区東神田3-4-12
代表者
堀尾 尭史
電話番号
メール
03-5809-2979
URL
設立日
2020年5月18日
資本金
9,000,000円
取引銀行
きらぼし銀行
Webサイト、ITサービス受託開発
マーケティングコンサル事業
シェアオフィス及びコワーキングスペースの運営