次の方法で共有

[スタイルの管理] 作業ウィンドウ

  • [アーティクル]

[スタイルの管理] 作業ウィンドウを使用すると、スタイルの適用、変更、名前変更、削除や、外部カスケード スタイル シート (CSS) の適用または適用解除、スタイルのすべての適用部分の選択、スタイルのルール セットを含むコードへの移動を行うことができます。[スタイルの管理] 作業ウィンドウを使用して、外部 CSS のスタイルを内部 CSS に移動したり、逆に内部 CSS のスタイルを外部 CSS に移動することもできます。また、CSS 内のスタイルの位置を移動できます。

Web ページを開くと、[スタイルの管理] 作業ウィンドウには、そのページの外部および内部カスケード スタイル シート (CSS) に定義されたすべてのスタイルが一覧表示されます。ただし、インライン CSS は表示されません。作業ウィンドウでは、すべてのスタイルを一覧表示するか、現在の Web ページまたはページ内の現在の選択範囲で使用されているスタイルだけを表示するかを設定できます。すべてのクラス セレクタ、要素セレクタ、および ID セレクタは、スタイルが含まれる外部 .css ファイル名の下、または、スタイルが内部 CSS にある場合は [現在のページ] の下に表示されます。

Cc295470.alert_tip(ja-jp,Expression.10).gifヒント :

マウスを使用して、あるスタイルのすべてのプロパティ宣言をフローティング ウィンドウに一時的に表示するには、[スタイルの管理] 作業ウィンドウのスタイルをポイントします。

[スタイルの管理] 作業ウィンドウ

Cc295470.43e2a2bf-87b3-49a4-ac55-1211d2fbb028(ja-jp,Expression.10).bmp

  1. [現在のページ] には、内部 CSS ファイルおよびインポートされた外部 CSS ファイルのクラス セレクタ、要素セレクタ、および ID セレクタが一覧表示されます。

  2. 現在の Web ページにインポートされている外部 CSS ファイルです。

  3. 現在の Web ページの内部 CSS で定義されているスタイルです。

  4. 現在の Web ページからリンクしている外部 CSS ファイルです。

  5. 既定では、複数のセレクタを含むスタイルのセレクタはグループ化して表示されます。セレクタを個別に一覧表示するには、[オプション] をクリックして [グループ化されたセレクタの分割] をクリックします。

[スタイルの管理] 作業ウィンドウの各スタイルの隣に表示されるアイコンは、スタイルの種類と、そのスタイルが現在の Web ページで使用されているかどうかを表します。

[スタイルの管理] 作業ウィンドウのアイコン

アイコン

説明
Cc295470.f2c9dfa3-9c53-430c-be02-21d79e4d1d12(ja-jp,Expression.10).gif

ID セレクタの横には赤い点が表示されます。
Cc295470.93ed2242-d3a9-4228-8e01-b114ce38a04c(ja-jp,Expression.10).gif

クラス セレクタの横には緑の点が表示されます。
Cc295470.38197e93-e248-4637-82ab-d582c3a519ce(ja-jp,Expression.10).gif

要素セレクタの横には青い点が表示されます。
Cc295470.69a199aa-4b7a-4713-ba75-2837bdcfa759(ja-jp,Expression.10).gif

現在の Web ページで使用されているスタイルには、色付きの点の周りに丸が表示されます。
Cc295470.268c399c-96bb-47aa-931a-d00a4203b3b4(ja-jp,Expression.10).gif

インポートされた外部カスケード スタイル シートの隣には @ 記号が表示されます。

スタイルを移動するには

  1. [スタイルの管理] 作業ウィンドウの [オプション] をクリックし、[順序で分類] を選択します。

  2. 次のいずれかの操作を行います。

    • CSS 内のスタイルの位置を移動するには、一覧でスタイルを上下にドラッグします。たとえば、スタイルを移動して、よく使用するスタイルを並べて表示し、使いやすくできます。

    • 内部 CSS から、ページに適用されている外部 CSS へスタイルを移動するには、[現在のページ] から目的の外部 CSS 名にスタイルをドラッグするか、外部 CSS のスタイル一覧の該当する位置までスタイルをドラッグします。

    • 外部 CSS から内部 CSS へスタイルを移動するには、外部 CSS の名前の下から [現在のページ] までスタイルをドラッグするか、[現在のページ] のスタイル一覧の該当する位置までスタイルをドラッグします。[現在のページ] が表示されない場合は、Web ページの <head></head> タグ セットの間に <style></style> タグ セットを追加します。

    • 外部 CSS から他の外部 CSS へスタイルを移動するには、目的の外部 CSS の名前までスタイルをドラッグするか、外部 CSS のスタイル一覧の該当する位置までスタイルをドラッグします。

    Cc295470.alert_note(ja-jp,Expression.10).gifメモ :

    [オプション] 作業ウィンドウで、[スタイルの管理] 作業ウィンドウが [要素で分類] または [種類で分類] に設定されている場合は、スタイル一覧の該当する位置までスタイルを移動できません。どちらかのオプションが設定されている場合は、外部 CSS ファイルの名前または [現在のページ] (内部 CSS の場合) にスタイルをドラッグする方法でのみ、外部 CSS から他の外部 CSS または内部 CSS にスタイルを移動したり、他の外部 CSS または内部 CSS から外部 CSS にスタイルを移動できます。

[スタイルの管理] 作業ウィンドウでスタイルを並べ替えるには

  • [スタイルの管理] 作業ウィンドウの [オプション] をクリックし、次の操作を行います。

    項目

    目的

    順序で分類

    CSS に記述されている順序でスタイルを一覧表示します。

    要素で分類

    各スタイルが適用されている HTML 要素に基づいてスタイルを一覧表示します。

    種類で分類

    アルファベット順およびスタイルの種類順にスタイルを一覧表示します。

複数のセレクタを含むスタイルの各セレクタを個別に一覧表示するには

  • [スタイルの管理] 作業ウィンドウの [オプション] をクリックし、[グループ化されたセレクタの分割] を選択します。

[スタイルの管理] 作業ウィンドウでスタイルを表示または非表示にするには

  • [スタイルの管理] 作業ウィンドウの [オプション] をクリックし、次の操作を行います。

    項目

    目的

    [すべてのスタイルを表示]

    現在の Web ページの外部、内部、およびインライン CSS に含まれるスタイルをすべて一覧表示します。

    現在のページで使用されているスタイルを表示

    現在の Web ページで使用されているスタイルだけを一覧表示します。

    選択範囲で使用されているスタイルを表示

    ページ内の現在の選択範囲で使用されているスタイルだけを一覧表示します。

[スタイルの管理] 作業ウィンドウで選択したスタイルのプレビューを表示するには

  • [スタイルの管理] 作業ウィンドウの [オプション] をクリックし、[選択したスタイルのプレビュー表示] を選択します。

関連項目

概念

[スタイルの適用] 作業ウィンドウ

[CSS のプロパティ] 作業ウィンドウ

カスケード スタイル シート ツールの概要

スタイル