- Dreamweaver ユーザーガイド
- はじめに
- Dreamweaver と Creative Cloud
- Dreamweaver のワークスペースとビュー
- サイトの設定
- ファイルの管理
- レイアウトとデザイン
- CSS
- ページコンテンツとアセット
- ページプロパティの設定
- CSS 見出しプロパティおよび CSS リンクプロパティの設定
- テキストの操作
- テキスト、タグ、属性の検索と置換
- DOM パネル
- ライブビューでの編集
- Dreamweaver でのドキュメントのエンコード
- ドキュメントウィンドウでのエレメントの選択および表示
- プロパティインスペクターでのテキストプロパティの設定
- web ページのスペルチェック
- Dreamweaver での区切り線の使用
- Dreamweaver でのフォントの組み合わせの追加と変更
- アセットを使用した作業
- Dreamweaver での日付の挿入と更新
- Dreamweaver でのお気に入りアセットの作成と管理
- Dreamweaver でのイメージの挿入と編集
- メディアオブジェクトの追加
- Dreamweaver でのビデオの追加
- HTML5 ビデオの挿入
- SWF ファイルの挿入
- オーディオエフェクトの追加
- Dreamweaver での HTML5 オーディオの挿入
- ライブラリ項目の操作
- Dreamweaver でのアラビア語およびヘブライ語のテキストの使用
- リンクおよびナビゲーション
- jQuery Widget と効果
- web サイトのコーディング
- Dreamweaver でのコーディングについて
- Dreamweaver のコーディング環境
- コーディングの環境設定
- コードカラーリングのカスタマイズ
- コードの記述と編集
- コードヒントとコード補完機能
- コードの折りたたみと展開
- スニペットでコードを再利用する
- 構文チェックコード
- コードの最適化
- デザインビューでのコードの編集
- ページのヘッドコンテンツの操作
- Dreamweaver でのサーバーサイドインクルードの挿入
- Dreamweaver でのタグライブラリの使用
- Dreamweaver へのカスタムタグの読み込み
- JavaScript ビヘイビアーの使用(基本操作)
- JavaScript に組み込まれているビヘイビアーの適用
- XML および XSLT について
- Dreamweaver でのサーバーサイド XSL 変換の実行
- Dreamweaver でのクライアントサイド XSL 変換の実行
- Dreamweaver での XSLT の文字エンティティの追加
- コードのフォーマット
- 製品間ワークフロー
- テンプレート
- Dreamweaver テンプレートについて
- テンプレートおよびテンプレートから作成されたドキュメントの認識
- Dreamweaver テンプレートの作成
- テンプレート編集可能領域の作成
- Dreamweaver でのリピート領域およびテーブルの作成
- テンプレートの任意の領域の使用
- Dreamweaver での編集可能なタグ属性の定義
- Dreamweaver でネストされたテンプレートを作成する方法
- テンプレートの編集、更新、削除
- Dreamweaver での xml コンテンツの書き出しおよび読み込み
- 既存のドキュメントでのテンプレートの適用または削除
- Dreamweaver テンプレートでのコンテンツの編集
- Dreamweaver でのテンプレートタグのシンタックスルール
- テンプレート領域のハイライト表示の環境設定
- Dreamweaver でテンプレートを使用する利点
- モバイルとマルチスクリーン
- 動的サイト、ページおよび web フォーム
- web アプリケーションについて
- アプリケーション開発のためのコンピューター設定
- データベース接続のトラブルシューティング
- Dreamweaver での接続スクリプトの削除
- 動的ページのデザイン
- 動的コンテンツソースの概要
- 動的コンテンツのソースの定義
- ページへの動的コンテンツの追加
- Dreamweaver での動的コンテンツの変更
- データベースのレコードの表示
- Dreamweaver でのライブデータの入力とトラブルシューティング
- Dreamweaver でのカスタムサーバービヘイビアーの追加
- Dreamweaver を使用したフォームの作成
- フォームを使用したユーザーからの情報の収集
- Dreamweaver での ColdFusion フォームの作成と有効化
- web フォームの作成
- フォームエレメントの HTML5 サポート強化
- Dreamweaver を使用したフォームの開発
- アプリケーションのビジュアル開発
- web サイトのテスト、プレビュー、パブリッシュ
- トラブルシューティング
このトピックでは、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 スタイル)で、必要に応じてその他のベンダーを選択できます。
ボックスシャドウでは、Webkit と w3c の接頭辞は、環境設定で選択したかどうかに関係なく、常に生成されます。
グラデーションに加えられた変更は、ベンダー固有の構文にも反映されます。ベンダー固有の構文を含む既存のファイルを Dreamweaver CC で開く場合、必ず環境設定で必要なベンダー接頭辞を選択してください。これは、グラデーションを使用または変更したときに、Dreamweaver の初期設定では Webkit と Dreamweaver ライブビューに関連するコードのみが更新されるためです。したがって、コード内のその他のベンダー固有構文は更新されません。
背景画像およびグラデーションの入れ替え
背景画像およびグラデーションの順序(コード内の表示順序)を 1 クリックで変更できます。
CSS デザイナーの url プロパティまたは gradient プロパティの横にある矢印をクリックします。
Dreamweaver CC には、背景の入れ替え機能の基本実装が含まれています。複数の値または画像が存在する場合、入れ替えが想定どおりに機能しないことがあります。また、1 つの画像と 2つ目の画像、および 1 つのグラデーションを背景に適用すると仮定した場合、グラデーションの入れ替え結果は、グラデーション、2 つ目の画像、最初の画像の順になります。