CSS パネルでのスタイルの変更

CSS パネルには、アニメーション要素の keyframes ルールなど、選択した要素の定義済みのスタイルルールが表示されます。また、CSS パネルの [スタイル] タブでは、要素のクラスのスタイルを編集したり、インライン スタイルを追加したり、新しいスタイルルールを作成したりすることもできます。

要素の CSS プロパティのリストを表示するには、[計算済み] タブに切り替えます

ドキュメントの新しいスタイルルールを作成するには:

  1. 新しいスタイルルールを適用する要素を選択します。
  2. CSS パネルの下部にある [ルールを追加] ボタン をクリックします。
  3. Google Web Designer によって、編集可能な一意のクラスセレクタが生成されます。クラスセレクタを入力すると、選択した要素にそのクラスが追加されます。
  4. 新しいルールの宣言の波かっこの間で、[プロパティを追加] をクリックして、CSS のプロパティと値を入力します(例: width: 209px;)。
  5. ルールが完全に定義されるまで、プロパティと値のペアを追加します。

要素にインライン スタイルを追加するには:

  1. 要素を選択します。
  2. CSS パネルの [インライン スタイル] ブロックで、[プロパティを追加] ボタンをクリックします。
  3. プロパティと値のペアを追加して、要素のスタイルを変更します。

スタイルを変更するには:

  1. ドキュメントの要素を選択します。要素に関連付けられているスタイルルールが CSS パネルに表示されます。
  2. 編集するプロパティまたは値をクリックします。プロパティを削除するには、プロパティ名を消去します。

プロパティを切り替えるには:

  1. プロパティ名の横にあるチェックボックスをオンにします。チェックボックスをオフにすると、ブラウザのプレビューと公開ファイルにそのプロパティは含まれません。
  2. プロパティを再度有効にするには、もう一度チェックボックスをオンにします。

アニメーションの keyframes ルール

CSS パネルには、CSS でアニメーション要素の keyframes ルール(キーワード @keyframes が含まれる)が表示されます。

要素の新しい keyframes ルールを作成するには:

  1. アニメーションなしで要素を選択します。
  2. CSS パネルの下部にある [keyframes ルールを追加] ボタン をクリックします。Google Web Designer は、開始と終了のキーフレーム(0% と 100%)を追加し、アニメーションの長さをデフォルトで 1 秒に設定します。
  3. アニメーション プロパティをキーフレームに追加するには、[プロパティを追加] をクリックし、CSS のプロパティと値を入力します。
  4. ルールが完全に定義されるまで、プロパティと値のペアを追加します。

キーフレームを追加するには:

  1. アニメーション要素を選択します。
  2. CSS パネルの既存のキーフレーム間で [キーフレームを挿入] をクリックします。
  3. Web Designer はキーフレームが周囲のキーフレームの中間にくるように自動的に設定します。キーフレームのタイミングを変更するには、割合をクリックします。
  4. アニメーション プロパティは、周囲のキーフレームから補完されます。新しいキーフレームのプロパティを追加、編集、削除します。

既存のアニメーションの後にキーフレームを追加することはできないため、代わりにタイムラインを使用します。

この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。