header-logo
Wix の使用方法を学び、サイトとビジネスを構築する。
直感的な Wix 機能でサイトをデザインして管理する。
定期購入、プラン、請求を管理する。
ビジネスを運営し、サイト会員とつながる。
ドメインの購入、サイトへの接続と移管方法を学ぶ。
ビジネスとウェブプレゼンスを成長させるツールを入手する。
SEO とマーケティングツールで知名度を上げる。
より効率的な作業を支援する高度な機能を利用する。
解決策や既知の問題について確認し、問い合わせる。
placeholder-preview-image
コースとチュートリアルでスキルを習得する。
ウェブデザインやマーケティングなどのヒントを得る。
検索エンジンからのトラフィックを増やす方法について学ぶ。
フルスタックプラットフォームでカスタムサイトを構築する。
あなたの目標達成をサポートするエキスパートを見つけましょう。
placeholder-preview-image

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

3分
スタイル要素とその個々の要素に独自の CSS コードを追加しましょう。エディタでは利用できないデザインオプションと動作の変更を適用できるため、CSS はクライアントのサイトを構築する際にツールボックスを拡張します。
ヒント:
CSS を使用したデザインの強化については Wix Studio アカデミーのウェビナーをご覧ください。(英語)CSS を使用したスタイル設定の詳細については、MDN CSS に関する文書をご覧ください。

デザインをより細かく制御する

要素に CSS を追加することで、まったく新しいスタイルの可能性が広がります。要素のデザインを好みに合わせて変更することができるため、エディタでまだ利用できないオプションに特に便利です。
また、CSS を使用すると、要素を自由にアニメーション化することができます。選択したプロパティで独自のアニメーションを作成し、必要に応じて要素に複数のアニメーションを適用します。
CSS のもう 1つの重要な用途は、レスポンシブ性を最大化することです。たとえば、ビューポートサイズまたはデバイス機能に基づくメディアクエリを使用して、要素がすべての画面で適切に表示されるようにします。
注意:
サポートされている要素の一覧を参照して、CSS で要素をカスタマイズできるかどうかを確認します。

要素の特定の部分を変更する

Wix Studio エディタでは、要素はセマンティッククラスに分割されるため、必要な個々の部分をカスタマイズできます。たとえば、ボタンには 3つの CSS クラスがあります:
  • .button:ボタン要素全体。
  • .button__label:ボタン上のテキスト。
  • .button__icon:ボタン上のアイコン。
リストからクラスを選択すると、自動的にコードに追加され、作業を開始できます。
利用可能なクラスは?
要素とそのクラスの完全なリストはこちら
記事で説明されている、キャンバス上で選択されたボタンと利用可能なクラスを示したスクリーンショット。

カスタム CSS クラスを作成する

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

すべての CSS 編集を 1つのグローバルページで管理する

エディタのコードパネルには、すべての編集用のグローバル CSS ページが含まれています。このページのコードは、すべてのサイトページで、関連するクラスを持つすべての要素にグローバルに適用されます。
コードパネルの CSS ページ
このページに追加した CSS コードは、エディタ内の他のパネルで行った選択をオーバーライドします。たとえば、CSS を使用してすべてのボタンの背景を変更すると、要素設定パネルで設定した背景をオーバーライドします。

この機能の使い方

  1. コードパネルで CSS セクションにアクセスします:
    1. エディタ左側で「コード」アイコン  をクリックします。
    2. (このサイトに初めてアクセスする場合)「コーディングを開始」をクリックします。
    3. ページコード」をクリックします。
    4. CSS」下の「global.css」をクリックします。
  2. 要素のスタイルを設定します:
    1. キャンバス上で該当する要素を選択します。
      注意:CSS パネルが開いていることを確認してください。
    2. (CSS パネル内)「CSS クラス」下で該当するクラスを選択します:
      • クラス:「グローバルクラス」下でクラスを選択します。
      • 独自のクラス:「カスタムクラス」下に入力します。
    3. CSS コードを追加します。
Wix Studio エディタで「global.css」タブを開き、キャンバス上のテキスト要素を選択して、該当するグローバルクラスを選択しています。
記事で説明されている、キャンバス上で選択されたボタンと利用可能なクラスを示したスクリーンショット。
コードパネルの CSS ページ
Wix Studio エディタで「global.css」タブを開き、キャンバス上のテキスト要素を選択して、該当するグローバルクラスを選択しています。