CSS プロパティパネル (HTML)

[アーティクル]
06/05/2015

[CSS プロパティ] パネルでは、アートボードまたは [ライブ DOM] パネルで選択した HTML 要素の CSS のプロパティを表示して変更できます。

アートボード上で HTML 要素を直接変更すると、[CSS プロパティ] パネルにプロパティの変更が反映されます。

逆に、[CSS プロパティ] パネルの [サイズ変更] カテゴリの値エディターを使用してオブジェクトのサイズを変更した場合は、アートボードにあるオブジェクトのサイズも変わります。

[CSS プロパティ] パネル

CSS プロパティパネル

CSS プロパティカテゴリまたは名前別に並べ替えることができる CSS プロパティの展開および折りたたみが可能なリスト。[展開] 6375953d-074c-421a-bbb3-6f5055b67b64 と [折りたたみ] 折りたたむをクリックして、表示を切り替えることができます。

	[適用されているルール] インライン、ドキュメント内部、および外部スタイルシートを含む選択した HTML 要素に適用されているすべての CSS 規則が表示されます。[優勢なプロパティ] 規則は、選択した HTML 要素で有効な CSS を表示する事実上の規則です。
	[設定されたプロパティのみ表示] 選択した CSS 規則用に設定されている CSS プロパティのみを表示する場合にこのボックスを選択します。
	カテゴリプロパティ展開したカテゴリに関連付けられているすべてのプロパティを表示します。
	カラーエディター個々の RGBA 値を調整するか、16 進数値を ARGB 順に指定して、カラーピッカーから直接色を選択する場合に使用します。

値エディター

[CSS プロパティ] パネルには、角度、ピクセル、パーセントなどの値を入力するための数値エディターが表示されます。たとえば、前の図の RGBA 色空間テキストボックスには数値エディターがあります。

数値エディターの値は次のように調整できます。

既存の数値をクリックし、正確な値を入力します。
プロパティのテキストボックスの上にポインターを移動し、数値調整カーソルが表示されたらドラッグして、スライダーを使用して値を変更します。
プロパティのテキストボックスをクリックし、上下の方向キーを使用して値を変更します。

詳細プロパティ

[CSS プロパティ] パネルのプロパティのほとんどのカテゴリには、展開できる詳細セクションがあります。このセクションを開くには、カテゴリの下部にある [詳細プロパティの表示] [詳細プロパティ] アイコン | Blend をクリックします。詳細プロパティは、使用頻度が低いプロパティです。