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

CSS パネルには、アニメーション要素の keyframes ルールなど、選択した要素の定義済みのスタイルルールが表示されます。また、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. アニメーション プロパティは、周囲のキーフレームから補完されます。新しいキーフレームのプロパティを追加、編集、削除します。

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