CSS デザイナーパネルのソースパネルで 
をクリックし、次のいずれかのオプションをクリックします。
- 新しい CSS ファイルを作成: 新しい CSS ファイルを作成してドキュメントに添付します
- 既存の CSS ファイルを添付: 既存の CSS ファイルをドキュメントに添付します
- ページ内で定義: ドキュメント内で CSS を定義する
最終更新日 :
2024年4月25日
CSS デザイナーパネルを使用してスタイルシート、メディアクエリー、セレクターを作成または添付し、CSS プロパティを設定する方法について説明します。
CSS Designer パネル（ウィンドウ > CSS Designer）は、CSS スタイル、ファイル、プロパティの設定、およびメディアクエリを「視覚的に」作成できる CSS プロパティインスペクターです。
CSSデザイナーのインターフェイスでは、以下のセクションを利用できます。
- ソース: プロジェクトに関連付けられた CSS ファイルのコレクション
- @Media: 画面サイズを制御するメディアクエリ
- セレクター: @Media パネルで選択されたメディアクエリに関連付けられたセレクター
- プロパティ: 選択されたセレクターに関連付けられたプロパティで、設定されたプロパティのみを表示するオプション付き
CSS Designer を使用すると、CSS スタイルシートの個々のルールを編集できます（CSS Designer の「現在」タブを使用）。また、お好みに応じて CSS スタイルシート内で直接作業することもできます（CSS Designer の「すべて」タブを使用）。
スタイルシートの作成と添付
選択したオプションに応じて、新規 CSS ファイルを作成または既存の CSS ファイルを添付ダイアログボックスが表示されます。
「参照」をクリックして、CSS ファイルの名前を指定し、CSS を作成する場合は新しいファイルの保存場所も指定します。
次のいずれかの操作を実行します。
- 「リンク」をクリックして、Dreamweaver ドキュメントと CSS ファイルをリンクさせます。
- 「読み込み」をクリックして、CSS ファイルをドキュメントに読み込みます。
（オプション）「条件付き使用」をクリックし、CSS ファイルに関連付けるメディアクエリーを指定します。
メディアクエリーの定義
CSS デザイナーパネルのソースペインで CSS ソースをクリックします。
@Media ペインで 
をクリックして、新しいメディアクエリーを追加します。
メディアクエリーの定義ダイアログボックスが表示され、Dreamweaver でサポートされているすべてのメディアクエリーの条件が一覧表示されます。
必要に応じて「条件」を選択します。
選択したすべての条件に有効な値を指定します。 有効な値が指定されていないと、対応するメディアクエリーが正しく作成されません。
メモ
複数の条件では「And」操作のみがサポートされています。
メディアクエリーの条件をコードで追加する場合、メディアクエリーの定義ダイアログボックスにはサポートされている条件だけが表示されます。 ただし、ダイアログボックスの「コード」テキストボックスには、完全なコードが表示されます（サポートされていない条件も含む）。
デザイン／ライブビューのメディアクエリーをクリックすると、ビューポートが選択したメディアクエリーと一致するように切り替わります。 ビューポート全体を表示するには、@Media ペインで「グローバル」をクリックします。
CSS セレクターの定義
CSS Designer パネルで、Sources ペインの CSS ソースまたは @Media ペインのメディアクエリを選択します。
セレクターペインで をクリックします。 ドキュメントで選択された要素に基づいて、CSS Designer は関連するセレクター（最大 3 つのルール）を賢く識別してプロンプトを表示します。
次のうち、必要な操作を行うことができます。
- 上向きまたは下向き矢印キーを使用して、提案されたセレクターをより具体的またはより一般的にします。
- 推奨されるルールを削除するには、目的のセレクターを入力します。 セレクターの名前とともにセレクタータイプの記号を入力します。 例えば、ID を指定する場合、セレクターの名前の前に「#」を置きます。
- 特定のセレクターを検索するには、ペインの上部にある検索ボックスを使用します。
- セレクターの名前を変更するには、セレクターをクリックし、目的の名前を入力します。
- セレクターの構成を変更するには、セレクターを目的の場所にドラッグします。
- セレクターを別のソースに移動するには、セレクターをソースペインの目的のソースにドラッグします。
- 選択したソースのセレクターを複製するには、セレクターを右クリックし、「複製」をクリックします。
- セレクターを複製してメディアクエリーに追加するには、セレクターを右クリックし、「メディアクエリーに複製」上にマウスを移動してから、メディアクエリーを選択します。
注意：「メディアクエリーに複製」オプションは、選択したセレクターのソースにメディアクエリーが含まれる場合にのみ使用できます。 セレクターをあるソースから別のソースのメディアクエリーに複製することはできません。
スタイルのコピー＆ペースト
1 つのセレクターから別のセレクターに、スタイルをコピーしてペーストできます。 すべてのスタイルをコピーすることも、レイアウト、テキスト、境界線などの特定のスタイルのカテゴリーのみコピーすることもできます。
セレクターを右クリックして、利用可能なオプションから選択します:
- セレクターにスタイルが存在しない場合、「スタイルをコピー」および「すべてのスタイルをコピー」は無効になります。
- 編集できないリモートサイトでは、「スタイルをペースト」は無効ですが、 ただし、コピーとすべてコピー
スタイルが利用可能です。 - セレクターに既に部分的に存在するスタイル（オーバーラップ）はペーストできます。 すべてのセレクターの結合
がペーストされます。 - スタイルのコピー＆ペーストは、CSSファイルの異なる形式（インポート、リンク、インライン
スタイル）でも機能します。
セレクターの並べ替え
必要なセレクターをクリックして、セレクターペイン内の新しい位置にドラッグします。
CSS プロパティの設定
プロパティは次のカテゴリにグループ化され、プロパティペインの上部に異なるアイコンで表示されます。
- レイアウト
- テキスト
- ボーダー
- 背景
- その他（視覚的コントロールではなく「テキストのみ」プロパティのリスト）
メモ
CSS セレクターのプロパティを編集する前に、リバースインスペクトを使用して CSS セレクターに関連付けられているエレメントを特定してください。 これにより、リバースインスペクト中に強調表示されたすべてのエレメントに実際に変更が必要かどうかを判断できます。
「セットを表示」チェックボックスをオンにすると、設定済みプロパティだけが表示されます。 セレクターに指定できるすべてのプロパティを表示するには、「セットを表示」チェックボックスの選択を解除します。
width や border-collapse などのプロパティを設定するには、プロパティペインでプロパティの横に表示されている必要なオプションをクリックします。
上書きされたプロパティは、取り消し線で示されます。
マージン、余白および位置の設定
CSS デザイナーのプロパティペインで、ボックスコントロールを使用してマージン、余白、および位置の各プロパティをすばやく設定できます。 コードを好む場合は、この例に示すように、クイック編集ボックスでマージンとパディングの省略記法コードを指定できます。
値をクリックして必要な値を入力します。 4 つの値すべてを同じにして同時に変更する場合は、中央のリンクアイコンをクリックします。
いつでも特定の値を無効化または削除できます。例えば、右、上、下の値を保持したまま左マージン値を削除できます。
ボーダープロパティを設定
ボーダーコントロールプロパティは論理的なタブに整理されており、プロパティの表示や変更を素早く行えます。
コードを使用する場合は、クイック編集テキストボックスでボーダーとボーダー半径の短縮コードを指定できます。
境界線のコントロールプロパティを指定するには、まず「すべての辺」タブでプロパティを設定します。 他のタブが有効になり、「すべての辺」タブで設定されたプロパティが個人ボーダーに反映されます。
個人ボーダータブでプロパティを変更すると、「すべての辺」タブの対応するプロパティの値が「未定義」（デフォルト値）に変更されます。
下記の例では、ボーダーの色を黒に設定してから、上側のボーダーを赤に変更しました。
挿入されるコードは、省略記法または通常記法の設定に基づきます。
インスペクト中は、タブは「設定」タブの優先度に基づいてフォーカスが置かれます。 優先度は高い順に、「すべての辺」、「上」、「右」、「下」、「左」です。 例えば、ボーダーの上の値のみが設定されている場合、計算モードは「すべての辺」タブが設定されていないため、「すべての辺」タブを無視して「上位」タブに焦点を移します。
プロパティの無効化または削除
CSS プロパティを無効 / 有効にする機能を使用すると、コードを直接変更せずに、CSS デザイナーパネルから CSS を部分的にコメントアウトできます。 CSS を部分的にコメントアウトすることで、特定のプロパティと値がページにもたらす効果を確認できます。
CSS プロパティを無効にすると、CSS コメントタグと [disabled] ラベルが無効化された CSS プロパティに追加されます。 その後、無効化された CSS プロパティを設定に応じて簡単に再有効化したり、削除できます。
CSS Designer を使用して各プロパティを無効化または削除できます。
次のスクリーンショットは、height プロパティの無効化アイコンと削除アイコンを示しています。 プロパティにマウスカーソルを合わせると、これらのアイコンが表示されます。
また、ボーダーコントロールグループレベルで削除および無効化コントロールを使用して、これらのアクションをすべてのプロパティに適用することもできます。
キーボードショートカット
キーボードショートカットを使用して、CSS セレクターおよびプロパティを追加または削除できます。 プロパティウィンドウでプロパティグループ間を移動することもできます。
|
ショートカット |
ワークフロー |
|
Ctrl+Alt+[Shift =] キー |
セレクターを追加（コントロールがセレクターセクションにある場合） |
|
Ctrl+Alt+S キー |
セレクターを追加（コントロールがアプリケーションの任意の場所にある場合） |
|
Ctrl+Alt+[Shift =] キー |
プロパティを追加（コントロールがプロパティセクションにある場合） |
|
Ctrl+Alt+P キー |
プロパティを追加（コントロールがアプリケーションの任意の場所にある場合） |
|
Select+Delete キー |
セレクターを削除（セレクターが選択されている場合） |
|
Ctrl+Alt+（PgUp または PgDn）キー |
コントロールがプロパティサブパネルにある場合のセクション間のジャンプ |
CSS セレクターに関連付けられたページエレメントの特定
通常、単一の CSS セレクターは複数のページエレメントと関連付けられます。 例えば、ページ、ヘッダー、フッターテキストのメインコンテンツのテキストはすべて、同一の CSS セレクターと関連付けることができます。 CSS セレクターのプロパティを編集すると、セレクターに関連付けられたすべてのエレメントに反映されます。これには、変更する必要のないエレメントも含まれます。
ライブハイライトを使用すると、CSS セレクターに関連付けられているすべてのエレメントを識別できます。 1 つのエレメントのみまたは複数のエレメントを変更する場合は、これらのエレメント用に新しい CSS セレクターを作成してから、プロパティを編集します。
CSS セレクターに関連付けられたページエレメントを特定するには、ライブビュー（ライブコードを「オフ」に設定）のセレクターの上にマウスポインターを置きます。 関連付けられているエレメントが点線で強調表示されます。
エレメントの強調表示を確定するには、セレクターをクリックします。 エレメントが青い枠線で強調表示されます。
エレメントの青い強調表示を削除するには、再度セレクターを選択します。
ライブハイライトは初期設定で有効になっています。 ライブハイライトを無効にするには、ドキュメントツールバーでライブビューオプションをクリックし、「ライブハイライトを無効にする」をクリックします。
外部 CSS スタイルシートへのリンク
外部 CSS スタイルシートを編集すると、その CSS スタイルシートにリンクされたすべてのドキュメントに編集内容が反映されます。
ドキュメントの CSS スタイルを書き出して新しい CSS スタイルシートを作成し、外部スタイルシートに添付またはリンクすると、ドキュメント内の CSS スタイルを適用できます。
サイト内に存在するスタイルシートであれば、どれでもページに添付できます。
次のいずれかの操作をおこなって、CSS デザイナーを開きます。
- ウィンドウ／CSS デザイナーを選択します。
- Shift + F11 を押します。
CSS デザイナーで、ソースの横の + アイコンをクリックし、「既存の CSS ファイルを添付」をクリックします。
次のいずれかの操作を実行します。
- 「参照」をクリックして、外部 CSS スタイルシートを参照します。
- ファイル/URL ボックスにスタイルシートのパスを入力します。
「プレビュー」ボタンをクリックすると、スタイルシートによって目的のスタイルが現在のページに適用された状態を確認できます。
スタイルを適用した結果が予想と異なる場合は「キャンセル」をクリックしてスタイルシートを削除します。 ページの外観が、適用する前の状態に戻ります。
「OK」をクリックします。
