スタイルの適用パネル
[スタイルの適用] パネルを使用すると、スタイルの適用、解除、変更、名前の変更、削除や、外部カスケード スタイル シート (CSS) の適用と適用解除、スタイルのすべての適用部分の選択、スタイルのルール セットを含むコードへの移動を行うことができます。[スタイルの適用] パネルには、各スタイルがスタイルのルールに従って表示されます。そのため、スタイルの外観を見るだけで必要なスタイルを簡単に見つけられます。
Web ページを開くと、[スタイルの適用] パネルには、外部、インライン、内部 CSS など、そのページに対してカスケード スタイル シート (CSS) で定義されたスタイルがすべて一覧表示されます。クラス セレクターおよび ID セレクターは、スタイルが含まれる外部 .css ファイル名の下、または、スタイルが内部 CSS にある場合は [作業中のページ] の下に表示されます。要素セレクターも同様の形式で表示されますが、表示される場所は、クラス セレクターおよび ID セレクターの一覧の下にある [コンテキスト セレクター] という別の見出しの下になります。[スタイルの適用] パネルに、すべてのスタイルを一覧表示するか、現在の Web ページまたはページ内で現在選択している範囲で使用されているスタイルだけを表示するかを設定できます。どちらのオプションを選択した場合でも、要素セレクターおよびインライン セレクターは、スタイルが使用されているコンテンツにカーソルを置くか、スタイルが使用されているコンテンツを選択した場合にのみ、パネルに表示されます。
[スタイルの適用] パネルに表示されるスタイルの一覧を並べ替えたり、現在の Web ページまたは現在の選択範囲で使用されているスタイルだけを一覧表示することもできます。パネルの背景が白いためスタイルが見づらい場合は、別の背景色を選択することができます。ただし、背景のプロパティが設定されている部分の色は変わりません。
.gif "tip note") ヒント : |
|---|
マウスを使用して、あるスタイルのすべてのルールをフローティング ウィンドウに一時的に表示するには、[スタイルの適用] パネルのスタイルをポイントします。 |
スタイルの適用パネル
.png "Cc295403.7d746eac-1e02-4837-984d-904cf410e301(ja-jp,Expression.40).png")
|
[スタイルのクリア] では、現在の選択範囲からすべてのクラス セレクターおよびインライン スタイルを削除します。 |
|
現在の Web ページからリンクしている外部 CSS ファイル。 |
|
現在の Web ページにインポートされている外部 CSS ファイル。 |
|
内部 CSS およびインポートされた外部 CSS ファイルのクラス セレクターおよび ID セレクターの一覧。 |
|
現在の Web ページの内部 CSS で定義されているスタイル。 |
|
現在の選択範囲で使用されているスタイルの周りには、実線の長方形の枠線が表示されます。 |
|
リンク先の外部 CSS ファイル (events.css) に含まれているクラス セレクターおよび ID セレクター。 |
|
各スタイルには、多くのスタイル関連の作業を実行するためのドロップダウン メニューがあります。メニューを使用するには、スタイルをポイントし、矢印をクリックするかスタイルを右クリックします。 |
.png "Cc295403.edef891a-6b74-4192-8f7f-5079614b9112(ja-jp,Expression.40).png")
.png "Cc295403.957413f8-28e0-4dc7-a144-0598679350b9(ja-jp,Expression.40).png")
.png "Cc295403.13f14333-cc5f-457a-863b-ccd449500941(ja-jp,Expression.40).png")
.png "Cc295403.0a66dad8-587c-4ccb-86ee-5e9cd1ef8c68(ja-jp,Expression.40).png")
.png "Cc295403.9c26150c-cd15-44bb-bf69-ff72093d3d71(ja-jp,Expression.40).png")
.png "Cc295403.8f73ae30-de6d-49a5-afe3-12a0a84d80a2(ja-jp,Expression.40).png")
.png "Cc295403.3ca58ea1-12d2-4379-9b89-e415efd03ca4(ja-jp,Expression.40).png")
.png "Cc295403.0ca213c6-20bb-4cd9-9acd-ebc60a53c6bf(ja-jp,Expression.40).png")
[スタイルの適用] パネルの各スタイルの隣に表示されるアイコンは、スタイルの種類と、そのスタイルが現在の Web ページで使用されているかどうかを表します。
[スタイルの適用] パネルのアイコン
| アイコン | 説明 |
|---|---|
.png "Cc295403.d2d37440-9664-4050-a58e-7fee8ea63242(ja-jp,Expression.40).png") |
ID セレクターの横には赤い点が表示されます。 |
.png "Cc295403.2374f498-4295-4fe3-be55-7d154c89142a(ja-jp,Expression.40).png") |
クラス セレクターの横には緑の点が表示されます。 |
.png "Cc295403.c983e0ca-2bc5-409e-b8fc-834785293639(ja-jp,Expression.40).png") |
要素セレクターの横には青い点が表示されます。 |
.png "Cc295403.376aebaa-ab0c-430f-a82d-6f13d6125571(ja-jp,Expression.40).png") |
インライン スタイルの隣には黄色い点が表示されます。 |
.png "Cc295403.e67de9f1-9a1a-46ce-8629-06280b678e1b(ja-jp,Expression.40).png") |
現在の Web ページで使用されているスタイルには、色付きの点の周りに丸が表示されます。 |
.png "Cc295403.040e2329-921d-46af-9cba-9f280c15d703(ja-jp,Expression.40).png") |
インポートされた外部カスケード スタイル シートの隣には @ 記号が表示されます。 |
[スタイルの適用] パネルでスタイルの一覧を並べ替えるには
[スタイルの適用] パネルで [オプション] をクリックし、次のいずれかの操作を行います。
CSS に記述されている順序でスタイルを一覧表示するには、[順序で分類] を選択します。
アルファベット順およびスタイルの種類順 (クラス セレクターまたは ID セレクター) でスタイルを一覧表示するには、[種類で分類] を選択します。
[スタイルの適用] パネルでスタイルを表示または非表示にするには
[スタイルの適用] パネルで [オプション] をクリックし、次のいずれかの操作を行います。
現在の Web ページの外部、内部、およびインライン CSS に含まれるすべてのスタイルを一覧表示するには、[すべてのスタイルを表示] を選択します。
現在の Web ページで使用されているスタイルだけを一覧表示するには、[現在のページで使用されているスタイルを表示] を選択します。
ページ内の現在の選択範囲で使用されているスタイルだけを一覧表示するには、[選択範囲で使用されているスタイルを表示] を選択します。
.gif "Note")
メモ :要素セレクターおよびインラインのスタイルは、そのスタイルが使用されているコンテンツにカーソルを置くか、そのスタイルが使用されているコンテンツを選択した場合にのみ、[スタイルの適用] パネルに表示されます。
[スタイルの適用] パネルで、背景のプロパティが設定されているスタイル以外の場所に色付きの背景を表示するには
[スタイルの適用] パネルの [オプション] をクリックし、[背景色のプレビュー] を選択します。
[その他の色] ダイアログ ボックスで色を選択し、[OK] をクリックします。