注意:

Dreamweaver CC 以降では、CSS スタイルパネルが CSS デザイナーに置き換えられています。詳しくは、CSS デザイナーを参照してください。

Dreamweaver のインターフェイスを使用して CSS ルールを作成または編集するときは、CSS コードのフォーマットを制御する環境設定を行うことができます。例えば、すべての CSS プロパティを個別の行に配置する環境設定や、CSS ルール間に空白行を挿入する環境設定を行うことができます。

CSS コードフォーマットの環境設定を行うと、選択した環境設定が、作成するすべての新しい CSS ルールに自動的に適用されます。ただし、これらの環境設定をドキュメントごとに個別に適用することもできます。この機能は、フォーマットする必要がある古い HTML または CSS ドキュメントがある場合に便利です。

注意:

CSS コードフォーマットの環境設定は、外部スタイルシートおよび埋め込まれたスタイルシートのみに適用され、インラインスタイルには適用されません。

CSS コードフォーマットの環境設定

  1. 編集/環境設定を選択します。
  2. 環境設定ダイアログボックスで、「コードフォーマット」カテゴリを選択します。
  3. 「高度なフォーマット」の横にある「CSS」ボタンをクリックします。
  4. CSS ソースフォーマットオプションダイアログボックスで、CSS ソースコードに適用するオプションを選択します。選択したオプションに基づいた CSS の外観のプレビューが、下のプレビューウィンドウに表示されます。

    プロパティをインデント

    ルール内のプロパティのインデント値を設定します。タブまたはスペースを指定できます。

    行ごとにプロパティ

    ルール内の各プロパティを別個の行に記述します。

    行ごとに開始波カッコ

    ルールの開始波カッコをセレクターとは別の行に記述します。

    複数のプロパティのみ

    単一プロパティのルールをセレクターと同じ行に記述します。

    同じ行のルールのすべてのセレクター

    ルールのすべてのセレクターを同じ行に記述します。

    ルール間に空白行

    各ルール間に空白行を挿入します。

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

注意:

CSS コードフォーマットは、環境設定ダイアログボックスの「コードフォーマット」カテゴリで設定した「改行タイプ」環境設定も継承します。

CSS スタイルシートでの CSS コードの手動によるフォーマット

  1. CSS スタイルシートを開きます。
  2. コマンド/ソースフォーマットの適用を選択します。

    CSS コードフォーマットの環境設定で設定したフォーマットオプションが、ドキュメント全体に適用されます。個別に範囲を選択してフォーマットすることはできません。

埋め込み CSS コードの手動によるフォーマット

  1. ドキュメントのヘッドに埋め込まれた CSS を含んでいる HTML ページを開きます。
  2. CSS コードの任意の部分を選択します。
  3. コマンド/ソースフォーマットを選択範囲に適用を選択します。

    CSS コードフォーマットの環境設定で設定したフォーマットオプションは、ドキュメントのヘッド内のすべての CSS ルールのみに適用されます。

    注意:

    指定したコードフォーマットの環境設定に従ってドキュメント全体をフォーマットする場合は、コマンド/ソースフォーマットの適用を選択します。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー