方法 : [CSS のプロパティ] ウィンドウを使用する
更新 : 2007 年 11 月
[CSS のプロパティ] ウィンドウを使用すると、要素のカスケード スタイル シート (CSS: Cascading Style Sheet) スタイル プロパティを表示および変更できます。[CSS のプロパティ] ウィンドウは、開いた Web ページ、外部 CSS ファイル、または [スタイルの管理] ウィンドウで使用でき、既存のスタイルのプロパティを確認および変更できます。
Web ページで [CSS のプロパティ] ウィンドウを使用すると、現在選択されている要素が使用しているすべてのスタイルを確認できます。また、それらのスタイルの優先順位、それらのスタイルのすべてのプロパティおよび値も確認できます。ソース ビューとデザイン ビューの両方で [CSS のプロパティ] ウィンドウを使用できます。
.gif "メモ") メモ : |
|---|
[CSS のプロパティ] ウィンドウで [適用されているルール] の下のセレクタを右クリックすると、そのセレクタのスタイルを操作するための追加オプションを含むショートカット メニューを表示できます。 |
[CSS のプロパティ] ウィンドウの概要
[CSS のプロパティ] ウィンドウには、次の図に示されているように、主要なセクションが 4 つあります。
.png "CSS プロパティ グリッド")
次のセクションがあります。
[並べ替え] ボタン ウィンドウ上部にあるこのボタンを使用すると、プロパティの一覧を並べ替えることができます。この一覧は、アルファベット順、カテゴリごと、および設定されているプロパティごとに並べ替えることができます。
[概要] ボタン [概要] ボタンをクリックすると、選択した要素に影響するすべてのスタイルのプロパティを一覧表示できます。この一覧には、[適用されているルール] セクションには表示されないプロパティも含まれます。
[適用されているルール] ページの要素に影響するすべてのスタイルが一覧表示されます。一覧の下にあるスタイルは、一覧の上にあるスタイルよりも優先順位が上です。この一覧からスタイルを選択すると、そのスタイルのプロパティが [CSS のプロパティ] セクションに一覧表示されます。
[CSS のプロパティ] このセクションを使用して、[適用されているルール] で選択したスタイルの CSS プロパティを確認または設定します。プロパティに付加される赤い線は、現在選択しているスタイルがそれらのプロパティを継承していないこと、または別のスタイルによりオーバーライドされていることを示します。
[CSS のプロパティ] ウィンドウを使用した新しいスタイルの作成
[CSS のプロパティ] ウィンドウを使用して、デザイン ビュー、ソース ビュー、または分割ビューで選択した要素の新しいスタイルを作成できます。インライン スタイルを作成することで、または [新しいスタイル] ダイアログ ボックスを表示することで、ページにスタイルを作成すること、または CSS スタイル シートでスタイルを作成できます。
[適用されているルール] セクションにより、どのスタイル ルールが要素に適用されているか示されます。またこのセクションでは、ルールがインラインか、スタイル シートのルールか、または現在のページのルールかということも示されます。次の手順では、要素の新しいスタイルを作成する方法を説明します。スタイルがまだ適用されていない場合、[適用されているスタイル] セクションには "ルールは適用されていません" と表示されます。
[CSS のプロパティ] ウィンドウを使用して新しいスタイルを作成するには
デザイナで、スタイル ルールを追加する先の要素を選択します。
ソース ビューで、要素を選択し、開始タグと終了タグの両方を含めます。デザイン ビューで要素を選択すると、ポップアップ タグに要素の名前が表示されます。
インライン スタイルを作成するには、[CSS のプロパティ] ウィンドウで [適用されているルール] セクションの任意の場所を右クリックし、[新しいインライン スタイル] をクリックします。
新しいスタイルをページに追加するには、[CSS のプロパティ] ウィンドウで [適用されているルール] セクションの任意の場所を右クリックし、[新しいスタイル] をクリックします。
[適用されているルール] の一覧で、要素、要素の ID、または要素の CSS クラスを選択します。
[CSS のプロパティ] セクションで、スタイル プロパティを設定します。
[CSS のプロパティ] ウィンドウを使用したスタイルの変更
[CSS のプロパティ] ウィンドウを使用して、単一の要素、または CSS クラスを共有するすべての要素の書式設定またはスタイル設定を変更できます。
スタイルのプロパティを変更するには
[CSS のプロパティ] ウィンドウの [適用されているルール] の一覧で、要素、インライン スタイル、要素の ID、または要素の CSS クラスを選択します。
[CSS のプロパティ] セクションで、プロパティを変更します。
要素に適用されているスタイルの確認
[CSS のプロパティ] ウィンドウを使用すると、要素に適用されているすべてのスタイルを確認できます。また、どのスタイル プロパティがオーバーライドされているか確認することもできます。オーバーライドされているスタイル プロパティは、赤い線が付加された状態で表示されます。この赤い線は、現在選択している要素にそのプロパティが適用されないことを示します。
たとえば、インラインのスタイル ルールとスタイル シートのスタイル ルールの両方が要素に適用されているとします。この場合、スタイル シート ルールはインライン スタイル ルールによりオーバーライドされます。
選択した要素に適用されているすべてのプロパティの概要を表示するには
ページ上の要素を選択し、[概要] をクリックして概要モードに切り替えます。
[CSS のプロパティ] セクションに、選択した要素に適用されているすべてのプロパティが表示されます。
[CSS のプロパティ] でプロパティをクリックすると、[適用されているルール] の下に関連するスタイル ルールの概要が表示されます。
[概要] ボタンをもう一度クリックすると、概要モードから別のモードに切り替わります。
メモ :取り消し線の付加されたプロパティの上にマウス ポインタを合わせると、オーバーライドされたプロパティのツールヒントが表示され、そのプロパティをオーバーライドしているプロパティが示されます。