マニュアル キャンセル

背景へのグラデーションの適用

 

 

このトピックでは、CSS デザイナーパネルを使用し、Web ページの背景にグラデーションを適用して編集する方法について説明します。

CSS デザイナーパネルを使用して、Web サイトの背景にグラデーションを適用できます。グラデーションプロパティは背景カテゴリーから使用できます。

グラデーションプロパティ
グラデーションプロパティ

グラデーションパネルを開くには、グラデーションプロパティの横にある をクリックします。グラデーションパネルでは、次の操作を実行できます。

  • 様々なカラーモデル(RGBa16 進数または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%)
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%)
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 スタイル)で、必要に応じてその他のベンダーを選択できます。

注意:

ボックスシャドウでは、Webkit と w3c の接頭辞は、環境設定で選択したかどうかに関係なく、常に生成されます。

グラデーションに加えられた変更は、ベンダー固有の構文にも反映されます。ベンダー固有の構文を含む既存のファイルを Dreamweaver CC で開く場合、必ず環境設定で必要なベンダー接頭辞を選択してください。これは、グラデーションを使用または変更したときに、Dreamweaver の初期設定では Webkit と Dreamweaver ライブビューに関連するコードのみが更新されるためです。したがって、コード内のその他のベンダー固有構文は更新されません。

背景画像およびグラデーションの入れ替え

背景画像およびグラデーションの順序(コード内の表示順序)を 1 クリックで変更できます。

CSS デザイナーの url プロパティまたは gradient プロパティの横にある矢印をクリックします。

注意:

Dreamweaver CC には、背景の入れ替え機能の基本実装が含まれています。複数の値または画像が存在する場合、入れ替えが想定どおりに機能しないことがあります。また、1 つの画像と 2つ目の画像、および 1 つのグラデーションを背景に適用すると仮定した場合、グラデーションの入れ替え結果は、グラデーション、2 つ目の画像、最初の画像の順になります。

ヘルプをすばやく簡単に入手

新規ユーザーの場合