Wix Studio エディタ：CSS の編集について

スタイル要素とその個々の要素に独自の CSS コードを追加しましょう。エディタでは利用できないデザインオプションと動作の変更を適用できるため、CSS はクライアントのサイトを構築する際にツールボックスを拡張します。

要素に CSS を追加することで、まったく新しいスタイルの可能性が広がります。要素のデザインを好みに合わせて変更することができるため、エディタでまだ利用できないオプションに特に便利です。

また、CSS を使用すると、要素を自由にアニメーション化することができます。選択したプロパティで独自のアニメーションを作成し、必要に応じて要素に複数のアニメーションを適用します。

CSS のもう 1つの重要な用途は、レスポンシブ性を最大化することです。たとえば、ビューポートサイズまたはデバイス機能に基づくメディアクエリを使用して、要素がすべての画面で適切に表示されるようにします。

Wix Studio エディタでは、要素はセマンティッククラスに分割されるため、必要な個々の部分をカスタマイズできます。たとえば、ボタンには 3つの CSS クラスがあります：

リストからクラスを選択すると、自動的にコードに追加され、作業を開始できます。

独自の CSS クラスを global.css ページに追加することもできます。これにより、ある特定の要素のすべてのインスタンスではなく、カスタムクラスで指定した要素にスタイルと書式を適用できます。カスタムクラスについての詳細はこちら

エディタのコードパネルには、すべての編集用のグローバル CSS ページが含まれています。このページのコードは、すべてのサイトページで、関連するクラスを持つすべての要素にグローバルに適用されます。

このページに追加した CSS コードは、Wix Studio エディタパネルで行った選択をオーバーライドします。たとえば、CSS を使用してすべてのボタンの背景を変更すると、要素設定パネルで設定した背景をオーバーライドします。