次の方法で共有


CSS プロパティ パネル

[CSS プロパティ] パネルを、開いた Web ページ、外部 CSS ファイル、または [スタイルの管理] パネルと並行して使用して、既存のスタイルのプロパティや値を確認および変更することができます。

[CSS プロパティ] パネルを Web ページで使用すると、Web ページの現在選択されている範囲内で使用されているすべてのスタイル、それぞれの優先順位、および各スタイルの全プロパティと値を簡単に表示できます。

Noteメモ :

[ページ編集オプション] ダイアログ ボックスの [作成] タブで選択されている CSS スキーマによって CSS プロパティがサポートされていない場合、そのプロパティの値の一覧は、[新しいスタイル] ダイアログ ボックスと [スタイルの変更] ダイアログ ボックスでは空白として表示されます。また、その場合 [CSS プロパティ] パネルではプロパティ一覧は表示されません。

詳細については、「CSS の IntelliSense オプションの設定」を参照してください。

CSS プロパティ パネル

Cc294861.ba72a979-9ec1-49d5-b861-0e5492880dfb(ja-jp,Expression.40).png

Cc294861.edef891a-6b74-4192-8f7f-5079614b9112(ja-jp,Expression.40).png

[カテゴリ別リストの表示] ボタン Cc294861.72857b68-7a97-436e-a9b4-721fa0dcfd9f(ja-jp,Expression.40).png をクリックすると、[フォント] や [ブロック] などのカテゴリ別にプロパティの一覧を表示できます。

 [アルファベット順リストの表示] ボタン Cc294861.926ae15d-105e-4df3-8d3e-b98491cfbae4(ja-jp,Expression.40).png を使用すると、プロパティ一覧がアルファベット順に表示されます。

 [設定したプロパティを最初に表示] ボタン Cc294861.2548942a-b2cf-4720-868a-934e356841bf(ja-jp,Expression.40).png をクリックすると、選択したスタイルの中で設定済みのプロパティを先頭にしたプロパティ一覧が編成されます。

Cc294861.957413f8-28e0-4dc7-a144-0598679350b9(ja-jp,Expression.40).png

[概要] ボタンをクリックすると、[CSS プロパティ] 列の下に、選択したスタイルのプロパティと共に、現在の選択範囲に影響するすべてのプロパティが一覧表示されます。概要モードでは、[CSS プロパティ] 列の下のプロパティをクリックすると、[適用されているルール] の下に関連するルールの概要が表示されます。概要モードを解除するには、[概要] をもう一度クリックするか、[適用されているルール] の下のルールをクリックします。

Cc294861.13f14333-cc5f-457a-863b-ccd449500941(ja-jp,Expression.40).png

[適用されているルール] には、現在の選択範囲に関連する各スタイルのセレクターが一覧表示されます。スタイルは、優先順位に従って昇順に一覧表示されます。優先順位の最も低いスタイルが一覧の最上部に、優先順位の最も高いスタイルが最下部に表示されます。

セレクターをポイントすると、ルール セット全体がヒントに表示されます。セレクターをクリックすると、そのスタイルのプロパティが [CSS プロパティ] の下に表示されます。セレクターをダブルクリックすると、対応するルール セットのコードに移動します。

Cc294861.0a66dad8-587c-4ccb-86ee-5e9cd1ef8c68(ja-jp,Expression.40).png

この列には、各スタイルの適用対象になるタグと、スタイルのセレクターが一覧表示されます。この列の行をポイントすると、適用されるルールが表示されます。選択したスタイルが内部 CSS 内に存在する場合、この列のラベルには、[作業中のページ] と表示されます。また、選択したスタイルが外部 CSS ファイル内に存在する場合には、外部 CSS ファイルの名前が表示されます。外部 CSS ファイルの名前をポイントすると、そのファイルへのパスが表示されます。また、外部 CSS ファイルの名前をクリックすると、ファイルが開きます。

Cc294861.9c26150c-cd15-44bb-bf69-ff72093d3d71(ja-jp,Expression.40).png

[CSS プロパティ] には、[適用されているルール] の下で選択したスタイルの中で設定済みのプロパティの値と、未設定のすべてのプロパティが表示されます。プロパティをダブルクリックすると、対応するルール セットのコードに移動します。

Cc294861.8f73ae30-de6d-49a5-afe3-12a0a84d80a2(ja-jp,Expression.40).png

[カテゴリ別リストの表示] ボタン Cc294861.72857b68-7a97-436e-a9b4-721fa0dcfd9f(ja-jp,Expression.40).png および [設定したプロパティを最初に表示] ボタン Cc294861.2548942a-b2cf-4720-868a-934e356841bf(ja-jp,Expression.40).png の両方が選択されている場合は、選択したスタイルのプロパティが各カテゴリのプロパティ一覧の最上部に表示されます。

Cc294861.3ca58ea1-12d2-4379-9b89-e415efd03ca4(ja-jp,Expression.40).png

プロパティの値を設定するには、プロパティ名の隣にあるボックスに値を入力するか、ボックスのドロップダウン矢印 Cc294861.831cb746-62cc-437e-b8a7-17695a0edd28(ja-jp,Expression.40).png または選択ボタン Cc294861.51972403-155f-4381-850b-1a581a6163d2(ja-jp,Expression.40).png が使用できる場合は、ボックスをポイントしてボタンをクリックし、値を選択します。

Cc294861.0ca213c6-20bb-4cd9-9acd-ebc60a53c6bf(ja-jp,Expression.40).png

赤線が引かれているプロパティは、選択したスタイルによって設定されていますが、現在の選択範囲では継承されていないか、別のスタイルで上書きされています。詳細をヒントに表示するには、線が引かれているプロパティをポイントします。プロパティが上書きされている場合は、上書きしているプロパティについての説明がヒントに表示されます。

tip noteヒント :
[CSS プロパティ] パネルで、CSS を処理するための追加オプションをショートカット メニューに表示するには、[適用されているルール] の下にあるセレクターを右クリックします。

関連項目

タスク

スタイルの変更
スタイルの作成
コンテンツからのスタイルの削除
CSS の IntelliSense オプションの設定

参照

スタイルの適用パネル

概念

カスケード スタイル シートの参照