構造ウィンドウ - Cascading Style Sheetビュー

構造ウィンドウでは、アクティブなビューのドキュメントの構造が表示されます。

ビュー・タイプに関係なく、構造ウィンドウのすべての実装に共通するのは、現在のビューの内容を固定する機能、または新規ビューを開く機能です。特定のファイル・タイプで開かれたウィンドウの実装では、そのファイル・タイプに基づいてファイルの構造を表示およびソートするための様々なオプションが提供されます。

CSSセレクタ構造が表示されたら、構造ウィンドウでいくつかの表示オプションを使用できます。

編集を容易にするためのCSS要素の選択とグループ化

編集のためにCSSファイルを開くと、ファイル内のCSSセレクタが次の3タイプのいずれかとして「構造」ウィンドウに表示されます。

CSS要素アイコン 要素

CSSセレクタで定義されたHTML要素またはタグ。プロパティと値は、コロンで区切って中カッコで囲みます。たとえば、body {color:black;}となります。

CSSクラス・アイコン クラス

同じタイプのHTML要素に対して定義された様々なスタイル。たとえば、p.right {text-align:right;}は右揃えの段落テキスト、p.left {text-align:left;}は左揃えの段落テキストを意味します。また、セレクタにタグ名を含めなければ、特定のクラスのHTML要素すべてで使用されるスタイルを定義できます。たとえば、.center {text-align:center;}class="center"が指定されたすべてのHTML要素が中央揃えになることを意味します。

CSS IDアイコン ID

1つのHTML要素に固有のスタイル。たとえば、p#para1 {color:green;} id value="para1" が指定されたp要素、*#ver905 {background-color:red;}id value="ver905"が指定された最初のHTML要素を意味します。

要素のグループ化ツール

構造ウィンドウ・ツールバーの「カテゴリ」ドロップダウン・リストを使用すると、CSSセレクタをカテゴリ別に表示できます。

CSSのグループ化の選択

カテゴリなし
CSSファイルでの出現順に表示します。デフォルト設定。

タイプ・カテゴリ
CSSセレクタのタイプ(要素、クラスまたはID)別に並べ替えます。

要素カテゴリ
HTML要素別またはタグ別に並べ替えます。

構造ウィンドウでCSSセレクタを選択すると、そのセレクタがCSSファイル内でハイライト表示され、関連するプロパティおよび値がプロパティ・インスペクタに表示されて編集可能になります。

「構造」ウィンドウでセレクタ・カテゴリを分離またはグループ化解除するには、「グループ化したセレクタの分離」 CSSのグループ化したセレクタ アイコンを選択します。

CSSファイル内で選択した要素をコメント・アウトするには、要素グループを選択し、右クリックして「コメント・アウト」を選択します。

CSSのコメント・アウト

CSSの詳細は、W3C Webページhttp://www.w3.org/TR/1998/REC-CSS2/を参照してください。


Webページの作成
Webページおよび設計ツールの操作
HTMLページの操作