[スタイルの適用] 作業ウィンドウ
[スタイルの適用] 作業ウィンドウを使用すると、スタイルの適用、解除、変更、名前変更、削除や、外部カスケード スタイル シート (CSS) の適用または適用解除、スタイルのすべての適用部分の選択、スタイルのルール セットを含むコードへの移動を行うことができます。[スタイルの適用] 作業ウィンドウには、それぞれのスタイルがスタイルのルールに従って表示されます。このため、スタイルの外観を見るだけで作業対象のスタイルを簡単に特定できます。
Web ページを開くと、[スタイルの適用] 作業ウィンドウには、外部、インライン、内部 CSS など、そのページに対してカスケード スタイル シート (CSS) で定義されたスタイルがすべて一覧表示されます。クラス セレクタおよび ID セレクタは、スタイルが含まれる外部 .css ファイル名の下、または、スタイルが内部 CSS にある場合は [作業中のページ] の下に表示されます。要素セレクタの場合も同様ですが、表示される場所は、クラス セレクタおよび ID セレクタの一覧の下にある [コンテキスト セレクタ] という別の見出しの下になります。作業ウィンドウでは、すべてのスタイルを一覧表示するか、現在の Web ページまたはページ内の現在の選択範囲で使用されているスタイルだけを表示するかを設定できます。どちらのオプションを選択した場合でも、要素セレクタおよびインライン セレクタは、スタイルが使用されているコンテンツにカーソルを置くか、スタイルが使用されているコンテンツを選択した場合にのみ、作業ウィンドウに表示されます。
[スタイルの適用] に表示されるスタイルの一覧を並べ替えることができます。現在の Web ページまたは現在の選択範囲で使用されているスタイルだけを一覧表示することもできます。作業ウィンドウの白い背景で特定のスタイルが見づらい場合は、別の色を選択して背景に表示することができます。ただし、背景のプロパティが設定されているスタイル部分は表示が変更されません。
.gif "ヒント") ヒント : |
|---|
マウスを使用して、あるスタイルのすべてのルールをフローティング ウィンドウに一時的に表示するには、[スタイルの適用] 作業ウィンドウのスタイルをポイントします。 |
[スタイルの適用] 作業ウィンドウ
.bmp "Cc295403.101cc829-ecf8-4ef8-aeb3-4b8e52171b01(ja-jp,Expression.10).bmp")
[スタイルのクリア] では、現在の選択範囲からすべてのクラス セレクタおよびインライン スタイルを削除します。
[作業中のページ] では、内部 CSS およびインポートされた外部 CSS ファイルのクラス セレクタおよび ID セレクタが一覧表示されます。
現在の Web ページにインポートされている外部 CSS ファイルです。
現在の Web ページの内部 CSS で定義されているスタイルです。
現在の Web ページからリンクしている外部 CSS ファイルです。
現在の選択範囲で使用されているスタイルの周りには、実線の長方形の枠線が表示されます。
[コンテキスト セレクタ] には、現在の選択範囲で使用されている要素セレクタが一覧表示されます。
リンク先の外部 CSS ファイル (events.css) に含まれているクラス セレクタおよび ID セレクタです。
各スタイルには、多くのスタイル関連の作業を実行するためのドロップダウン メニューがあります。メニューを使用するには、スタイルをポイントし、矢印をクリックするかスタイルを右クリックします。
[スタイルの適用] 作業ウィンドウで各スタイルの隣に表示されるアイコンは、スタイルの種類と、そのスタイルが現在の Web ページで使用されているかどうかを表しています。
[スタイルの適用] 作業ウィンドウのアイコン
アイコン |
説明 |
|---|---|
.gif "Cc295403.f2c9dfa3-9c53-430c-be02-21d79e4d1d12(ja-jp,Expression.10).gif") |
ID セレクタの横には赤い点が表示されます。 |
.gif "Cc295403.93ed2242-d3a9-4228-8e01-b114ce38a04c(ja-jp,Expression.10).gif") |
クラス セレクタの横には緑の点が表示されます。 |
.gif "Cc295403.38197e93-e248-4637-82ab-d582c3a519ce(ja-jp,Expression.10).gif") |
要素セレクタの横には青い点が表示されます。 |
.gif "Cc295403.e8b2c77d-6e50-4e5c-ba77-f054834ef609(ja-jp,Expression.10).gif") |
インライン スタイルの隣には黄色い点が表示されます。 |
.gif "Cc295403.69a199aa-4b7a-4713-ba75-2837bdcfa759(ja-jp,Expression.10).gif") |
現在の Web ページで使用されているスタイルには、色付きの点の周りに丸が表示されます。 |
.gif "Cc295403.268c399c-96bb-47aa-931a-d00a4203b3b4(ja-jp,Expression.10).gif") |
インポートされた外部カスケード スタイル シートの隣には @ 記号が表示されます。 |
手順
[スタイルの適用] 作業ウィンドウでスタイルの一覧を並べ替えるには
[スタイルの適用] 作業ウィンドウの [オプション] をクリックし、次のいずれかの操作を行います。
CSS に記述されている順序でスタイルを一覧表示するには、[順序で分類] を選択します。
アルファベット順およびスタイルの種類順 (クラス セレクタまたは ID セレクタ) でスタイルを一覧表示するには、[種類で分類] を選択します。
[スタイルの適用] 作業ウィンドウでスタイルを表示または非表示にするには
[スタイルの適用] 作業ウィンドウの [オプション] をクリックし、次のいずれかの操作を行います。
現在の Web ページの外部、内部、およびインライン CSS に含まれるすべてのスタイルを一覧表示するには、[すべてのスタイルを表示] を選択します。
現在の Web ページで使用されているスタイルだけを一覧表示するには、[現在のページで使用されているスタイルを表示] を選択します。
ページ内の現在の選択範囲で使用されているスタイルだけを一覧表示するには、[選択範囲で使用されているスタイルを表示] を選択します。
.gif "メモ")
メモ :要素セレクタおよびインラインのスタイルは、そのスタイルが使用されているコンテンツにカーソルを置くか、そのスタイルが使用されているコンテンツを選択した場合にのみ、[スタイルの適用] 作業ウィンドウに表示されます。
[スタイルの適用] 作業ウィンドウで、背景のプロパティが設定されているスタイル以外の場所に色付きの背景を表示するには
[スタイルの適用] 作業ウィンドウの [オプション] をクリックし、[背景色のプレビュー] を選択します。
[その他の色] ダイアログ ボックスで色を選択し、[OK] をクリックします。