このトピックでは、CSS デザイナーパネルを使用し、Web ページの背景にグラデーションを適用して編集する方法について説明します。
CSS デザイナーパネルを使用して、Web サイトの背景にグラデーションを適用できます。 グラデーションプロパティは背景カテゴリーから使用できます。
グラデーションパネルを開くには、グラデーションプロパティの横にある 
をクリックします。 グラデーションパネルでは、次の操作を実行できます。
- 様々なカラーモデル（RGBa、16 進数またはHSLa）からカラーを選択し、 その後、さまざまな色の組み合わせをスウォッチとして保存します。
- 新しいカラーを元のカラーにリセットするには、元のカラー（K）をクリックします。
- スウォッチの順序を変更するには、スウォッチを目的の位置にドラッグします。
- スウォッチを削除するには、スウォッチをパネルから外にドラッグします。
- カラーストップを使用して複雑なグラデーションを作成します。 カラーストップを作成するには、カラーストップの初期設定の間の任意の場所をクリックします。 カラー分岐点を削除するには、カラー分岐点をパネルから外にドラッグします。
- 線形グラデーションの角度を指定します。
- パターンを繰り返すには、background-repeatプロパティを編集します。
- カスタムグラデーションをスウォッチとして保存します。
次のコードの意味を理解してください。
background-image: linear-gradient(57deg,rgba(255,255,255,1.00) 0%,rgba(21,8,8,1.00) 46.63%,rgba(255,0,0,1.00) 100%)
- 57deg：線形グラデーションの角度
- rgba(255, 255, 255, 1.00)：最初のカラーストップのカラー
- 0%：カラーストップ
Dreamweaver では、カラーストップの「%」値のみをサポートします。 他の px や em などの値を使用すると、Dreamweaver では「nil」として認識されます。 また、Dreamweaver は CSS カラーをサポートしていないため、コード内で CSS カラーを指定すると、「nil」として認識されます。
Web ブラウザーでのグラデーションのレンダリング
グラデーションを背景として使用する場合、異なる Web ブラウザーでグラデーションが適切にレンダリングされるように Dreamweaver を設定できます。 Dreamweaver は適切なベンダー接頭辞をコードに追加し、Web ブラウザーでグラデーションが適切に表示されるようにします。
Dreamweaver では、次のベンダー接頭辞と w3c フォーマットを記述できます。
- Webkit
- Firefox
- Opera
初期設定では、Dreamweaver は Webkit および Dreamweaver ライブビューのベンダー接頭辞を書き込みます。 環境設定ダイアログボックス（環境設定／CSS スタイル）で、必要に応じてその他のベンダーを選択できます。
Boxシャドウの場合、Preferencesで選択したかどうかに関係なく、WebkitとW3Cの接頭辞は常に生成されます。
グラデーションに加えられた変更は、ベンダー固有の構文にも反映されます。 Dreamweaverでベンダー固有の構文を含む既存のファイルを開く場合、Preferencesで必要なベンダー接頭辞を選択してください。これは、グラデーションを使用または変更したときに、Dreamweaver の初期設定では Webkit と Dreamweaver ライブビューに関連するコードのみが更新されるためです。 したがって、コード内のその他のベンダー固有構文は更新されません。
背景画像およびグラデーションの入れ替え
背景画像およびグラデーションの順序（コード内の表示順序）を 1 クリックで変更できます。
CSS DesignerでURLまたはグラデーションプロパティに隣接する矢印をクリックします。
Dreamweaverには、背景の入れ替え機能の基本的な実装が含まれています。複数の値または画像が存在する場合、入れ替えが想定どおりに機能しないことがあります。 また、1 つの画像と 2つ目の画像、および １ つのグラデーションを背景に適用すると仮定した場合、 グラデーションの入れ替え結果は、グラデーション、2 つ目の画像、最初の画像の順になります。
