方法 : [CSS のプロパティ] ウィンドウを使用する
[CSS のプロパティ] ウィンドウを使用すると、カスケード スタイル シート (CSS: Cascading Style Sheet) スタイル プロパティを表示および変更できます。 Web フォーム ページの場合、デザイン ビューで [CSS のプロパティ] ウィンドウを使用できます。 どのようなページに対しても、ソース ビューでそのウィンドウを使用できます。 また、外部 CSS ファイルまたは [スタイルの管理] ウィンドウでも使用できます。
[CSS のプロパティ] ウィンドウを表示するには
- [表示] メニューの [CSS のプロパティ] をクリックします。
[CSS のプロパティ] ウィンドウには、Web ページで現在選択されている要素が使用しているすべてのスタイルが表示されます。 また、それらのスタイルの優先順位、それらのスタイルのすべてのプロパティおよび値も確認できます。
[CSS のプロパティ] ウィンドウの概要
[CSS のプロパティ] ウィンドウには次の要素があります。
UI 要素 |
説明 |
|---|---|
表示ボタン |
ウィンドウの上部には [カテゴリ別リストの表示]、[アルファベット順リストの表示] と [プロパティの設定を手前に表示] ボタンが表示されます。 これらのボタンを使用すると、プロパティが表示される順序を変更することができます。 値が割り当てられているプロパティだけを各カテゴリの上部に表示するには、[プロパティの設定を手前に表示] をクリックします。 値が設定されていないプロパティは各カテゴリの下部に表示されます。 |
概要 |
[概要] ボタンをクリックすると、選択した要素に影響するすべてのスタイルのプロパティを一覧表示できます。 この一覧には、[適用されているルール] セクションには表示されないプロパティも含まれます。 |
適用されているルール |
要素に適用されているスタイルのルールが示されます。 この一覧からルールを選択すると、割り当てられたプロパティが下の [CSS のプロパティ] セクションで強調表示されます。 スタイルがまだ適用されていない場合、[適用されているルール] セクションには "ルールは適用されていません" と表示されます。 一覧の下にあるルールは、一覧の上にあるルールよりも優先順位が上です。 セレクターを右クリックすると、そのセレクターのスタイルを操作するための追加オプションを含むショートカット メニューが表示されます。 |
CSS のプロパティ |
このセクションを使用して、[適用されているルール] で選択したスタイルの CSS プロパティを確認または設定します。 プロパティに付加される赤い線は、現在選択しているスタイルがそれらのプロパティを継承していないこと、または別のスタイルによりオーバーライドされていることを示します。 |
ヒント
適用されているルールまたは属性値が割り当てられている CSS プロパティをダブルクリックすると、Visual Studio でスタイル シートが開きます。ルール定義の場所が表示されます。または、ルールまたはプロパティを右クリックし、[コードに移動] を選択できます。
[CSS のプロパティ] ウィンドウを使用したスタイルの変更
[CSS のプロパティ] ウィンドウを使用して、単一の要素、または CSS クラスを共有するすべての要素の書式設定またはスタイル設定を変更できます。
スタイルのプロパティを変更するには
[CSS のプロパティ] ウィンドウの [適用されているルール] の一覧で、要素、インライン スタイル、要素の ID、または要素の CSS クラスを選択します。
[CSS のプロパティ] セクションで、プロパティを変更します。
要素に適用されているスタイルの確認
[CSS のプロパティ] ウィンドウを使用すると、要素に適用されているすべてのスタイルを確認できます。 また、どのスタイル プロパティがオーバーライドされているか確認することもできます。 オーバーライドされているスタイル プロパティは、赤い線が付加された状態で表示されます。この赤い線は、現在選択している要素にそのプロパティが適用されないことを示します。
たとえば、インラインのスタイル ルールとスタイル シートのスタイル ルールの両方を要素に適用されている場合があります。 この場合、スタイル シート ルールはインライン スタイル ルールによりオーバーライドされます。
選択した要素に適用されているすべてのプロパティの概要を表示するには
ページ上の要素を選択し、[概要] をクリックして概要モードに切り替えます。
[CSS のプロパティ] セクションに、選択した要素に適用されているすべてのプロパティが表示されます。
[CSS のプロパティ] でプロパティをクリックすると、[適用されているルール] の下に関連するスタイル ルールの概要が表示されます。
[概要] ボタンをもう一度クリックすると、概要モードから別のモードに切り替わります。
注意
取り消し線の付加されたプロパティの上にマウス ポインターを合わせると、オーバーライドされたプロパティのツールヒントが表示され、そのプロパティをオーバーライドしているプロパティが示されます。