マニュアル キャンセル

CSS デザイナーを使用したページのレイアウト

 

 

CSS デザイナーパネルを使用してスタイルシート、メディアクエリー、セレクターを作成または添付し、CSS プロパティを設定する方法について説明します。

CSS デザイナーパネル
CSS デザイナーパネル

CSS デザイナーパネル(ウィンドウCSS デザイナー)は、CSS スタイル、ファイル、設定済みプロパティ、メディアクエリーを「視覚的」に作成できる CSS プロパティインスペクターです。

CSS デザイナーのインターフェイスでは、以下のセクションを利用できます。

  • ソース:プロジェクトに関連付けられた CSS ファイルのコレクション。
  • @Media:画面サイズを制御するメディアクエリー。
  • セレクター:@Mediaパネルで選択したメディアクエリーに関連付けられたセレクター。
  • プロパティ:選択したセレクターに関連付けられたプロパティ。設定されたプロパティのみを表示するオプションがあります。

CSS デザイナー(CSS デザイナーの現在のタブを使用してください)すると、CSS スタイルシートの個々のルールを編集できます。または、必要に応じて、CSS スタイルシートで直接編集することもできます(CSS デザイナーのすべてのタブを使用してください)。

スタイルシートの作成と添付

  1. CSS デザイナーパネルのソースパネルで をクリックし、次のいずれかのオプションをクリックします。

    • 新規 CSS ファイルを作成:新規 CSS ファイルを作成し、ドキュメントに添付します。
    • 既存の CSS ファイルを添付:既存の CSS ファイルをドキュメントに添付します。
    • ページで定義:ドキュメント内で CSS を定義します。
    CSS デザイナーを使用したスタイルシートの作成と添付
    CSS デザイナーを使用したスタイルシートの作成と添付

    選択したオプションに応じて、新規 CSS ファイルを作成または既存の CSS ファイルを添付ダイアログボックスが表示されます。

  2. 参照」をクリックして、CSS ファイルの名前を指定し、CSS を作成する場合は新しいファイルの保存場所も指定します。

  3. 次のいずれかの操作を実行します。

    • リンク」をクリックして、Dreamweaver ドキュメントと CSS ファイルをリンクさせます。
    • 読み込み」をクリックして、CSS ファイルをドキュメントに読み込みます。
  4. (オプション)「条件付き使用」をクリックし、CSS ファイルに関連付けるメディアクエリーを指定します。

メディアクエリーの定義

  1. CSS デザイナーパネルのソースペインで CSS ソースをクリックします。

  2. @Media ペインで をクリックして、新しいメディアクエリーを追加します。

    メディアクエリーの定義ダイアログボックスが表示され、Dreamweaver でサポートされているすべてのメディアクエリーの条件が一覧表示されます。

  3. 必要に応じて「条件」を選択します。

    メディアクエリーの定義
    メディアクエリーの定義

    選択したすべての条件に有効な値を指定します。有効な値が指定されていないと、対応するメディアクエリーが正しく作成されません。

    注意:

    複数の条件では、「And」演算のみがサポートされます。

メディアクエリーの条件をコードで追加する場合、メディアクエリーの定義ダイアログボックスにはサポートされている条件だけが表示されます。ただし、ダイアログボックスの「コード」テキストボックスには、完全なコードが表示されます(サポートされていない条件も含む)。

デザイン/ライブビューのメディアクエリーをクリックすると、ビューポートが選択したメディアクエリーと一致するように切り替わります。ビューポート全体を表示するには、@Media ペインで「グローバル」をクリックします。

CSS セレクターの定義

  1. CSS デザイナー パネルのソースペインで CSS ソースを選択するか、@Media ペインでメディアクエリーを選択します。

  2. セレクターペインで をクリックします。ドキュメントで選択したエレメントに応じて、関連するセレクター(最大 3 つのルール)がすみやかに特定され、CSS デザイナーに表示されます。

    次のうち、必要な操作をおこなうことができます。

    • 推奨されるセレクターを詳細化または省略化するには、上向き矢印キーまたは下向き矢印キーを使用します。
    • 推奨されるルールを削除するには、目的のセレクターを入力します。セレクターの名前とともにセレクタータイプの記号を入力します。例えば、ID を指定する場合、セレクターの名前の前に「#」を置きます。
    • 特定のセレクターを検索するには、ペインの上部にある検索ボックスを使用します。
    • セレクターの名前を変更するには、セレクターをクリックし、目的の名前を入力します。
    • セレクターの構成を変更するには、セレクターを目的の場所にドラッグします。
    • セレクターを別のソースに移動するには、セレクターをソースペインの目的のソースにドラッグします。
    • 選択したソースのセレクターを複製するには、セレクターを右クリックし、「複製」をクリックします。
    • セレクターを複製してメディアクエリーに追加するには、セレクターを右クリックし、「メディアクエリーに複製」上にマウスを移動してから、メディアクエリーを選択します。

    注意:「メディアクエリーに複製」オプションは、選択したセレクターのソースにメディアクエリーが含まれる場合にのみ使用できます。セレクターをあるソースから別のソースのメディアクエリーに複製することはできません。

スタイルのコピー&ペースト

1 つのセレクターから別のセレクターに、スタイルをコピーしてペーストできます。すべてのスタイルをコピーすることも、レイアウト、テキスト、境界線などの特定のスタイルのカテゴリーのみコピーすることもできます。

セレクターを右クリックし、使用可能なオプションから選択します。

  • セレクターにスタイルが存在しない場合、「スタイルをコピー」および「すべてのスタイルをコピー」は無効になります。
  • 編集できないリモートサイトでは、「スタイルをペースト」は無効ですが、「スタイルをコピー」および「すべてのスタイルをコピー」は使用できます。
  • セレクターに既に部分的に存在するスタイル(オーバーラップ)はペーストできます。すべてのセレクターの Union はペーストされます。
  • スタイルのコピー/ペーストは、異なるリンケージの CSS ファイル(読み込み、リンク、インラインスタイル)で使用できます。
スタイルのコピー&ペースト
スタイルのコピー&ペースト

セレクターの再配置

必要なセレクターをクリックし、セレクターペインで新しい位置にドラッグします。

CSS プロパティの設定

プロパティは次のカテゴリーにグループ化され、プロパティペインの上部に異なるアイコンで表示されます。

  • レイアウト
  • テキスト
  • 境界線
  • 背景
  • 詳細(「テキストのみ」のプロパティの一覧。視覚的なコントロールのあるプロパティは含まれません。)
注意:

CSS セレクターのプロパティを編集する前に、リバースインスペクトを使用して CSS セレクターに関連付けられているエレメントを特定してください。これにより、リバースインスペクト中に強調表示されたすべてのエレメントに実際に変更が必要かどうかを判断できます。

セットを表示」チェックボックスをオンにすると、設定済みプロパティだけが表示されます。セレクターに指定できるすべてのプロパティを表示するには、「セットを表示」チェックボックスの選択を解除します。

widthborder-collapse などのプロパティを設定するには、プロパティペインでプロパティの横に表示されている必要なオプションをクリックします。

上書きされたプロパティは、取り消し線で示されます。

マージン、余白、位置の設定

CSS デザイナーのプロパティペインで、ボックスコントロールを使用してマージン、余白、および位置の各プロパティをすばやく設定できます。コードを使用する場合は、次の例に示すように、クイック編集ボックスでマージンや余白のショートハンドコードを指定できます。

マージンプロパティ
マージンプロパティ

値をクリックして必要な値を入力します。4 つの値をすべて同時に同じ値に変更する場合は、中央にあるリンクアイコンをクリックします。

特定の値をいつでも無効化または削除できます。例えば、右と上下のマージンの値は維持したまま左マージンの値を無効化または削除できます。

境界線のプロパティを設定

境界線のコントロールプロパティは、プロパティをすばやく表示または変更できるように、論理的なタブにまとめられています。 

境界線のコントロールプロパティ
境界線のコントロールプロパティ

コードを使用する場合は、クイック編集テキストボックスで境界線や境界線の半径のショートハンドコードを指定できます。

境界線のコントロールプロパティを指定するには、まず「すべての辺」タブでプロパティを設定します。他のタブが有効になり、個々の境界線に「すべての辺」タブで設定されたプロパティが反映されます。

「個々の境界線」タブのプロパティを変更すると、「すべての辺」タブの対応するプロパティの値が「未定義」(初期設定値)に変わります。

次の例では、境界線の色が黒に設定されてから、上の境界線の色が赤に変更されています。

すべての辺の境界線の色を設定
すべての辺の境界線の色を設定

すべての辺の境界線
すべての辺の境界線

上部の境界線の色を設定
上部の境界線の色を設定

上が赤に設定された境界線の色
上が赤に設定された境界線の色

挿入されるコードは、ショートハンドまたは長い形式の環境設定値に基づいています。

インスペクト中は、タブは「設定」タブの優先度に基づいてフォーカスが置かれます。優先度は高い順に、「すべての辺」、「上」、「右」、「下」、「左」です。例えば、境界線に一番大きい値を設定すると「すべての辺」タブが設定されないため、計算モードで「上」タブにフォーカスが置かれ、「すべての辺」タブは無視されます。

プロパティの無効化または削除

CSS プロパティを無効 / 有効にする機能を使用すると、コードを直接変更せずに、CSS デザイナーパネルから CSS を部分的にコメントアウトできます。CSS を部分的にコメントアウトすることで、特定のプロパティと値がページにもたらす効果を確認できます。

CSS プロパティを無効にすると、CSS コメントタグと [disabled] ラベルが無効化された CSS プロパティに追加されます。その後、無効化された CSS プロパティを設定に応じて簡単に再有効化したり、削除できます。

各プロパティは、CSS デザイナーを使用して無効化または削除できます。

次のスクリーンショットは、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 スタイルを適用できます。

サイト内に存在するスタイルシートであれば、どれでもページに添付できます。

  1. 次のいずれかの操作をおこなって、CSS デザイナーを開きます。

    • ウィンドウ/CSS デザイナーを選択します。
    • Shift+F11 キーを押します。
  2. CSS デザイナーで、ソースの横の + アイコンをクリックし、「既存の CSS ファイルを添付」をクリックします。

    既存の CSS ファイルを添付
    既存の CSS ファイルを添付

  3. 次のいずれかの操作を実行します。

    • 「参照」をクリックして、外部 CSS スタイルシートを参照します。
    • 「ファイル/URL」ボックスにスタイルシートのパスを入力します。
  4. 「プレビュー」ボタンをクリックすると、スタイルシートによって目的のスタイルが現在のページに適用された状態を確認できます。

    スタイルを適用した結果が予想と異なる場合は「キャンセル」をクリックしてスタイルシートを削除します。ページの外観が、適用する前の状態に戻ります。

  5. 「OK」をクリックします。

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

新規ユーザーの場合