Dreamweaver ライブビューでの CSS のインスペクト

Dreamweaver のライブビューでインスペクトモードを使用すると、HTML エレメントおよび関連付けられた CSS スタイルをすばやく識別できます。

注意:

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

ライブビューでインスペクトモードを使用すると、HTML エレメントおよび関連付けられた CSS スタイルをすばやく識別できます。インスペクトモードがオンの場合、ページ上のエレメントにマウスを合わせると、ブロックレベルのエレメントの CSS ボックスモデル属性を表示できます。

注意:

CSS ボックスモデルについて詳しくは、CSS 2.1 仕様を参照してください。

インスペクトモードでのボックスモデルの視覚的な表示に加えて、ドキュメントウィンドウ内のエレメントにマウスを置いて CSS スタイルパネルを使用することもできます。現在のモードで CSS スタイルパネルが開いているときにページ上のエレメントにマウスを合わせると、CSS スタイルパネルのルールとプロパティが自動的に更新され、そのエレメントのルールとプロパティが表示されます。さらに、マウスが置かれたエレメントに関連するすべてのビューまたはパネルも更新されます(例えば、コードビュー、タグセレクター、プロパティインスペクターなど)。

  1. ドキュメントウィンドウでドキュメントを開き、インスペクトボタン(ドキュメントツールバーのライブビューボタンの横)をクリックします。

    注意:

    ライブビューがまだ有効でない場合は、インスペクトモードによって自動的に有効になります。

  2. CSS ボックスモデルを表示するページ上のエレメントにマウスを合わせます。インスペクトモードによって、ボーダー、マージン、余白、コンテンツが異なる色でハイライト表示されます。

  3. (オプション)コンピューターのキーボードの左矢印キーを押すと、現在ハイライト表示されているエレメントの親がハイライト表示されます。子エレメントのハイライト表示に戻るには、右矢印キーを押します。

  4. (オプション)ハイライト表示された選択項目をロックするには、エレメントをクリックします。

    注意:

    エレメントをクリックしてハイライト表示の選択項目をロックすると、インスペクトモードがオフになります。

アドビのロゴ

アカウントにログイン