方法 : [スタイルの適用] ウィンドウおよび [スタイルの管理] ウィンドウを使用する
更新 : 2007 年 11 月
[スタイルの適用] ウィンドウおよび [スタイルの管理] ウィンドウを使用すると、スタイルの適用、変更、名前の変更、および削除ができます。外部カスケード スタイル シート (CSS: Cascading Style Sheets) のアタッチまたはデタッチ、スタイルのすべてのインスタンスの選択、およびスタイルのルール セットを含むコードの検索もできます。
各ウィンドウには特定の用途があります。[スタイルの適用] ウィンドウは、ページの要素に単一のスタイルまたは複数のスタイルを適用するために使用します。[スタイルの適用] ウィンドウには、そのスタイルのルールに従って各スタイルが表示されます。このため、ウィンドウでスタイルの外観を確認するだけで、目的のスタイルをすばやく識別できます。
[スタイルの管理] ウィンドウは、スタイルの位置または順序を変更するために使用します。外部 CSS から内部 CSS にスタイルを移動することも、その逆も、スタイル シートまたはスタイル ブロック内のスタイルの位置を移動することもできます。
どちらのツールでも、アイコンを使用してスタイルの定義方法が示されます。各アイコンおよびその説明を次の表に示します。
アイコン |
説明 |
.gif "赤い点") |
赤色の丸は、ID ベースのスタイルであることを示します。 |
.gif "緑の点") |
緑色の丸は、クラス ベースのスタイルであることを示します。 |
.gif "青の点") |
青色の丸は、要素ベースのスタイルであることを示します。 |
.gif "黄色の点") |
黄色の丸は、インライン スタイルであることを示します。 |
.gif "ドット インジケータ") |
丸が円で囲まれている場合、現在のページでそのスタイルが使用されていることを示します。 |
.gif "アット マーク (@)") |
アット マーク (@) は、インポートされた外部 CSS を示します。 |
[スタイルの適用] ウィンドウを操作する
[スタイルの適用] ウィンドウには、1 つのページに対して定義されたすべての CSS スタイル ルールが一覧表示されます。これには、外部スタイル シートで定義されたスタイル ルール、インライン スタイルとしてのスタイル ルール、およびページで定義されたスタイルとしてのスタイル ルールが含まれます。クラス ベースのスタイル ルールおよび ID ベースのスタイル ルールは、そのスタイルを格納する外部 .css ファイルの名前の下に表示されます。スタイル ルールがページで定義されている場合は、[現在のページ] の下に表示されます。要素ベースのスタイル ルールは、同じように編成されますが、[コンテキスト セレクタ] というタイトルの別個の見出しの下に表示されます。
すべてのスタイル ルールを一覧表示するようにウィンドウを設定できます。現在の Web ページまたはページ内の現在の選択範囲で使用されているスタイル ルールのみを表示するように、一覧を制限することもできます。これらのオプションをどれを選択するかにかかわらず、エレメント ベースのスタイル ルールおよびインライン ベースのスタイル ルールは、次の 2 つの条件を満たす場合にのみ、ウィンドウに表示されます。1 つ目の条件は、スタイルを使用するページ要素上にマウス ポインタを置いた場合、もう 1 つの条件は、そのスタイルを使用するコンテンツを選択した場合です。
[スタイルの適用] ウィンドウに表示されるスタイルの一覧を並べ替えることもできます。
ウィンドウの背景との組み合わせにより、特定のスタイルが見づらい場合、Background プロパティを含まないスタイルの背景に対しては、ウィンドウに表示される色を選択できます。
.gif "メモ") メモ : |
|---|
スタイルのすべてのルールを一時的にポップアップ ウィンドウに表示するには、[スタイルの適用] ウィンドウのスタイルの上にマウス ポインタを置きます。 |
[スタイルの適用] ウィンドウの概要
[スタイルの適用] ウィンドウのユーザー インターフェイスには、次の機能があります。
[スタイル] ダイアログ ボックスにアクセスできるようにする [新しいスタイル]。
現在のページにアタッチするスタイル シートを選択できる [スタイル シートの適用]。
現在の選択範囲からすべてのクラス ベースのスタイル ルールおよびインライン スタイル ルールを削除する [スタイルのクリア]。
現在のページおよびインポートした外部 CSS ファイル内の、クラス ベースのスタイル ルールおよび ID ペースのスタイル ルールを一覧表示する [現在のページ]。
アット マーク (@) で示される外部 CSS ファイル。現在の Web ページにインポートされたすべてのスタイル ルールを表示します。
現在の Web ページからリンクされ、別個のセクションとして表示される外部 CSS ファイル。
スタイルを囲む実線の四角形の境界線。現在の選択範囲で使用されていることを示します。
現在の選択範囲で使用されている要素ベースのスタイル ルールを一覧表示する [コンテキスト セレクタ]。
選択したインライン要素に適用されるスタイル ルールを表示する [インライン スタイル]。
各スタイル ルールへのショートカット メニュー。これを使用すると、多くのスタイル関連タスクを実行できます。
![[スタイルの適用] ウィンドウ](images/bb398979.applystyles(ja-jp,vs.90).png "[スタイルの適用] ウィンドウ")
[スタイルの適用] ウィンドウを使用する
[スタイルの適用] ウィンドウを使用すると、ページの要素に単一のスタイルまたは複数のスタイルをすばやく適用できます。
[スタイルの適用] ウィンドウを使用して、ページの要素にスタイルを適用するには
[書式] メニューの [CSS のスタイル] をクリックし、[スタイルの適用] をクリックして、[スタイルの適用] ウィンドウを表示します。
Web ページのデザイン ビューまたはソース ビューで、スタイルを適用する要素を選択し、[スタイルの適用] ウィンドウで次のいずれかを実行します。
単一の既存スタイル ルールを適用するには、適用するクラス スタイルまたは ID スタイルをクリックします。
複数の既存スタイル ルールを適用するには、Ctrl キーを押しながら、適用する各スタイルをクリックします。
スタイルの順序の変更、表示されるスタイルの変更、および目的のスタイルを表示するためのウィンドウのカスタマイズができます。
[スタイルの適用] ウィンドウを使用して、スタイルを並べ替えるには
[スタイルの適用] ウィンドウで、[オプション] をクリックし、次のいずれかを実行します。
CSS に出現する順序でスタイル ルールを一覧表示するには、[順序で分類] をクリックします。
アルファベット順およびスタイルの種類 (クラス ベースまたは ID ベース) でスタイルを一覧表示するには、[種類で分類] をクリックします。
[スタイルの適用] ウィンドウで、スタイル ルールの表示と非表示を切り替えることができます。エレメント ベースのスタイルおよびインライン スタイル ルールは、そのスタイルを使用するコンテンツの上にマウス ポインタを置くか、そのスタイルを使用するコンテンツを選択したときにのみ、[スタイルの適用] ウィンドウに表示されます。
[スタイルの適用] ウィンドウを使用して、スタイルの表示と非表示を切り替えるには
[スタイルの適用] ウィンドウで、[オプション] をクリックし、次のいずれかを実行します。
現在の Web ページの外部、内部、およびインラインの各 CSS に含まれているすべてのスタイル ルールを一覧表示するには、[すべてのスタイルを表示] をクリックします。
現在の Web ページで使用されているスタイル ルールのみを一覧表示するには、[現在のページで使用されているスタイルを表示] をクリックします。
Web ページの現在の選択範囲で使用されているスタイル ルールのみを一覧表示するには、[選択範囲で使用されているスタイルを表示] をクリックします。
スタイル ルールに背景色がない場合、スタイル名を見やすくするために [スタイルの適用] ウィンドウで色を適用できます。スタイルに背景スタイル ルールがある場合は、そのスタイルで背景が表示されます。
[スタイルの適用] ウィンドウで色の背景を表示するには
[スタイルの適用] ウィンドウで、[オプション] をクリックし、[背景色のプレビュー] をクリックします。
[その他の色] ダイアログ ボックスで色を選択し [OK] をクリックします。
[スタイルの管理] ウィンドウを操作する
[スタイルの管理] ウィンドウには、ページの外部 CSS で定義されたすべてのスタイル ルールが一覧表示されます。ページで定義されたスタイル ルールも一覧表示されますが、インライン スタイルは表示されません。[スタイルの管理] ウィンドウを使用して、外部のスタイル シートからページの style 要素にスタイルを移動することも、その逆もできます。CSS スタイル ルールのセット内でスタイルの位置を移動するためにこのウィンドウを使用することもできます。
すべてのスタイル ルールを一覧表示するようにウィンドウを設定することも、現在の Web ページまたはページ内の現在の選択範囲で使用されているスタイル ルールのみを表示するように制限することもできます。クラス ベース、要素ベース、および ID ベースのすべてのスタイル ルールは、そのスタイル ルールを格納する外部 .css ファイルの名前の下に表示されます。スタイル ルールが現在のページにある場合は、[現在のページ] の下に表示されます。
| メモ : |
|---|
スタイルのすべてのルールを一時的にポップアップ ウィンドウに表示するには、[スタイルの適用] ウィンドウのスタイルの上にマウス ポインタを置きます。 |
[スタイルの管理] ウィンドウの概要
[スタイルの管理] ウィンドウのユーザー インターフェイスには、次の機能があります。
[スタイル] ダイアログ ボックスにアクセスできるようにする [新しいスタイル]。
現在のページにアタッチするスタイル シートを選択できる [スタイル シートの適用]。
現在のページおよびすべてのインポートした外部 CSS ファイル内の、クラス ベースのスタイル ルールおよび ID ペースのスタイル ルールを一覧表示する [現在のページ]。
現在の Web ページからリンクされているすべての外部 .css ファイル用のタブ。
セレクタの既定のグループ化。複数のセレクタを含むスタイルのセレクタをグループ化して表示します。[オプション] をクリックし、[グループ化されたセレクタの分割] をクリックすることにより、セレクタを個別に一覧表示できます。
![[スタイルの管理] ウィンドウ](images/bb398979.managestyles(ja-jp,vs.90).png "[スタイルの管理] ウィンドウ")
[スタイルの管理] ウィンドウに選択したスタイルのプレビューを表示するには、[オプション] をクリックし、[選択したスタイルのプレビュー表示] をクリックします。
[スタイルの管理] ウィンドウを使用する
スタイルの順序を変更したり、目的のスタイルを表示するためにウィンドウをカスタマイズしたりすることができます。一覧内でスタイルを上下に移動すると、スタイル シート内でもスタイルが移動します。この変更により、スタイル プロパティの連鎖方法に影響が及びます。たとえば、プロパティの属性が 2 つの異なるスタイルで設定されている場合、最後のスタイルが優先されます。
| メモ : |
|---|
[スタイルの管理] ウィンドウが [要素で分類] または [種類で分類] に設定されている場合、スタイルの一覧内の特定の位置にスタイルを移動することはできません。いずれの設定の場合も、スタイルの移動は、外部 CSS から別の外部 CSS またはページへの移動、あるいはその逆ができるのみです。これを行うには、外部 CSS ファイルの名前または [現在のページ] にスタイルをドラッグします。 |
[スタイルの管理] ウィンドウを使用してスタイルを移動するには
[書式] メニューの [CSS のスタイル] をクリックし、[スタイルの管理] をクリックして、[スタイルの管理] ウィンドウを表示します。
[スタイルの管理] ウィンドウで、[オプション] をクリックし、[順序で分類] をクリックして、以下を実行します。
CSS 内でスタイルの位置を移動するには、一覧内でスタイルを上下にドラッグします。たとえば、最も頻繁に使用する複数のスタイルを移動して、使用しやすいようにそれらを隣接して表示させることができます。
ページからページにアタッチされた外部 CSS にスタイルを移動するには、[現在のページ] の下から、外部 CSS の名前または外部 CSS のスタイルの一覧内の特定の位置にスタイルをドラッグします。
外部 CSS からページにスタイルを移動するには、外部 CSS の名前の下から、[現在のページ] または [現在のページ] の下にあるスタイル一覧内の特定の位置にスタイルをドラッグします。[現在のページ] が表示されない場合は、Web ページの head 要素の内部に style 要素を追加します。
外部 CSS から別の外部 CSS にスタイルを移動するには、目的の外部 CSS の名前または外部 CSS のスタイル一覧内の特定の位置にスタイルをドラッグします。
[スタイルの管理] ウィンドウは、スタイルを管理するために使用するのが最適ですが、ページの要素にスタイルを適用するために使用することもできます。
[スタイルの管理] ウィンドウを使用してスタイルを適用するには
Web ページのデザイン ビューまたはソース ビューで、スタイルを適用する要素を選択します。
適用するクラス スタイルまたは ID スタイルを右クリックし、ショートカット メニューの [スタイルの適用] をクリックします。
[オプション] ボタンの下の選択肢を使用することにより、スタイルを並べ替えることもできます。
[スタイルの管理] ウィンドウを使用して、スタイルを並べ替えるには
[スタイルの管理] ウィンドウで、[オプション] をクリックし、次のいずれかを実行します。
CSS に出現する順序に従ってスタイルを一覧表示するには、[順序で分類] をクリックします。
各スタイルが適用されている HTML 要素の下にスタイルを一覧表示するには、[要素で分類] をクリックします。
アルファベット順およびスタイルの種類に従ってスタイルを一覧表示するには、[種類で分類] をクリックします。
グループ化されているスタイルを、操作しやすいように分割できます。
複数のセレクタを含むスタイルの各セレクタを個別に一覧表示するには
- [スタイルの管理] ウィンドウで、[オプション] をクリックし、[グループ化されたセレクタの分割] をクリックします。
[スタイルの管理] ウィンドウに表示するスタイルを指定することもできます。
[スタイルの管理] ウィンドウでスタイルの表示と非表示を切り替えるには
[スタイルの管理] ウィンドウで、[オプション] をクリックし、[順序で分類] をクリックして、以下を実行します。
外部スタイル シートに含まれるスタイル、ページにあるスタイル、および現在のページのインライン スタイル ルールであるスタイルをすべて一覧表示するには、[すべてのスタイルを表示] をクリックします。
現在のページで使用されているスタイルのみを一覧表示するには、[現在のページで使用されているスタイルを表示] をクリックします。
ページの現在の選択範囲で使用されているスタイルのみを一覧表示するには、[選択範囲で使用されているスタイルを表示] をクリックします。