CSS パネルには、アニメーション要素の keyframes ルールなど、選択した要素の定義済みのスタイルルールが表示されます。また、CSS パネルの [スタイル] タブでは、要素のクラスのスタイルを編集したり、インライン スタイルを追加したり、新しいスタイルルールを作成したりすることもできます。
要素の CSS プロパティのリストを表示するには、[計算済み] タブに切り替えます。
ドキュメントの新しいスタイルルールを作成するには:
- 新しいスタイルルールを適用する要素を選択します。
- CSS パネルの下部にある [ルールを追加] ボタン
をクリックします。
- Google Web Designer によって、編集可能な一意のクラスセレクタが生成されます。クラスセレクタを入力すると、選択した要素にそのクラスが追加されます。
- 新しいルールの宣言の波かっこの間で、[プロパティを追加] をクリックして、CSS のプロパティと値を入力します（例:
width: 209px;）。 - ルールが完全に定義されるまで、プロパティと値のペアを追加します。
をクリックします。要素にインライン スタイルを追加するには:
- 要素を選択します。
- CSS パネルの [インライン スタイル] ブロックで、[プロパティを追加] ボタンをクリックします。
- プロパティと値のペアを追加して、要素のスタイルを変更します。
スタイルを変更するには:
- ドキュメントの要素を選択します。要素に関連付けられているスタイルルールが CSS パネルに表示されます。
- 編集するプロパティまたは値をクリックします。プロパティを削除するには、プロパティ名を消去します。
プロパティを切り替えるには:
- プロパティ名の横にあるチェックボックスをオンにします。チェックボックスをオフにすると、ブラウザのプレビューと公開ファイルにそのプロパティは含まれません。
- プロパティを再度有効にするには、もう一度チェックボックスをオンにします。
アニメーションの keyframes ルール
CSS パネルには、CSS でアニメーション要素の keyframes ルール（キーワード @keyframes が含まれる）が表示されます。
要素の新しい keyframes ルールを作成するには:
- アニメーションなしで要素を選択します。
- CSS パネルの下部にある [keyframes ルールを追加] ボタン
をクリックします。Google Web Designer は、開始と終了のキーフレーム（0% と 100%）を追加し、アニメーションの長さをデフォルトで 1 秒に設定します。
- アニメーション プロパティをキーフレームに追加するには、[プロパティを追加] をクリックし、CSS のプロパティと値を入力します。
- ルールが完全に定義されるまで、プロパティと値のペアを追加します。
キーフレームを追加するには:
- アニメーション要素を選択します。
- CSS パネルの既存のキーフレーム間で [キーフレームを挿入] をクリックします。
- Web Designer はキーフレームが周囲のキーフレームの中間にくるように自動的に設定します。キーフレームのタイミングを変更するには、割合をクリックします。
- アニメーション プロパティは、周囲のキーフレームから補完されます。新しいキーフレームのプロパティを追加、編集、削除します。
既存のアニメーションの後にキーフレームを追加することはできないため、代わりにタイムラインを使用します。