方法 : [スタイルの適用] ツール バーを使用する
更新 : 2007 年 11 月
[スタイルの適用] ツール バーを使用すると、スタイルを作成および変更できます。[スタイルの適用] ツール バーは、Visual Studio の他の CSS ツールと併用できます。これには、[CSS のプロパティ] ウィンドウ、[スタイルの管理] ウィンドウ、および [スタイルの適用] ウィンドウが含まれます。
CSS スタイル ルールが適用されていないページ要素にスタイルを適用する場合は、[スタイルの適用] ツール バーを使用して新しいスタイルの作成と適用を行うことができます。たとえば、段落を選択し、[スタイルの適用] ツール バーを使用してテキストに色を適用できます。その場合、Visual Studio は CSS スタイル ルールを作成し、テキストに適用します。段落のフォント ファミリなど、同じ段落の別のプロパティを書式設定する場合、Visual Studio は作成したスタイル ルールに新しいプロパティ宣言を追加します。
[スタイルの適用] ツール バーの操作
[スタイルの適用] ツール バーを使用すると、自動モードまたは手動モードでスタイルを作成および変更できます。CSS を初めて作成する場合は、Visual Studio によってスタイル ルールが自動的に作成される自動モードを使用してください。CSS の作成に慣れている場合は、スタイル ルールの作成方法を詳細に指定する手動モードを使用できます。
手動モードでは、別のスタイルに新しいプロパティ宣言を追加できます。これには、新しいスタイル、別に作成したスタイル、または既に作成済みのスタイルが含まれます。手動モードを使用した場合、必要に応じて Visual Studio によって要素が Web ページに追加され、スタイルが正しく割り当てられます。
[スタイルの適用] ツール バーの概要
次の表に、[スタイルの適用] ツール バーの要素を示します。
.gif "メモ") メモ : |
|---|
自動モードで作業する場合、[ターゲット規則] リストと [既存のスタイルの再使用] ボタンは無効になります。 |
要素 |
説明 |
.png "Direct Style Application ツール モード セレクタ") |
[スタイルの適用] リストでは、スタイルを作成および変更する際のモードを指定できます。CSS を初めて作成する場合は、自動モードを使用します。CSS の作成に慣れている場合は、手動モードを使用して、デザイン プロセスを効率化できます。 |
.png "Direct Style Application ツール規則セレクタ") |
[ターゲット規則] リストは新しい CSS プロパティに使用します。これを使用して、変更するスタイルの名前や、現在の要素に対して作成するスタイルの種類を表示できます。既定では、優先順位が最も高いスタイルが対象となります。スタイルが存在しない場合、[新しい自動クラス] が既定になります。 [ターゲット規則] リストには、次のオプションがあります。各オプションがどのように適用されるかは、現在の選択対象によって異なります。
|
![[スタイルの適用] ツール バーの再利用ボタン](images/bb398977.dsa_reuse(ja-jp,vs.90).gif "[スタイルの適用] ツール バーの再利用ボタン") |
[既存のスタイルの再使用] ボタンは、既存のスタイルとプロパティに対する変更に使用します。書式設定しようとするプロパティの宣言が、選択されているスタイルには含まれていないが、現在の選択対象の別のスタイルに含まれている場合、[既存のスタイルの再使用] によって、どちらのスタイルが変更されるかが決まります。[既存のスタイルの再使用] を選択した場合、既に宣言を含んでいるプロパティが変更されます。[既存のスタイルの再使用] を選択していない場合は、目的のルールが変更されます。 |
![[スタイルの適用] ツール バーのオーバーレイ ボタン](images/bb398977.dsa_overlay(ja-jp,vs.90).gif "[スタイルの適用] ツール バーのオーバーレイ ボタン") |
[オーバーレイの表示] ボタンは、選択されたルールを適用する要素にオーバーレイを表示するかどうかを指定します。このオプションを選択すると、[ターゲット規則] リストで選択されているスタイルを使用しているコンテンツの周囲に点線の四角形が表示されます。このオーバーレイにより、[スタイルの適用] ツール バーを使用した変更が適用される要素を確認できます。これは、変更対象のルールに簡単にアクセスできるので、複数のルールを適用している場合に特に便利です。 |
ASP.NET コントロールへの [スタイルの適用] ツール バーの使用
[スタイルの適用] ツール バーは、スタイル設定をサポートしている ASP.NET サーバー コントロールのスタイルの変更に使用できます。このツール バーを使用して、WebControl クラスから継承される、インライン スタイルと CssClass 属性のプロパティを定義するサーバー コントロールにスタイルを適用できます。ユーザー コントロールにはこれらのプロパティが定義されていません。そのため、ユーザー コントロールにはこのツール バーを使用できません。
ID ベースのスタイル ルールは、サーバー コントロールには使用しないでください。マークアップやサーバー コードに割り当てられている名前は、レンダリングされる HTML 要素の ID であるとは限りません。したがって、ID はサーバー コントロールのスタイルを設定するための信頼性の高い方法ではありません。
[スタイルの適用] ツール バーの使用
[スタイルの適用] ツール バーでアプリケーション モードを設定すると、スタイル ルールの作成方法を指定できます。
[スタイルの適用] ツール バーでアプリケーション モードを設定するには
- [スタイルの適用] ツール バーの [スタイルの適用] リストをクリックし、[自動] または [手動] をクリックします。
[スタイルの適用] ツール バーを使用すると、新しいスタイルの作成や既存のスタイル ルールの変更をすばやく実行できます。
[スタイルの適用] ツール バーを使用して新しいスタイルを作成するには
デザイン ビューまたはソース ビューで、[手動] スタイル適用モードに切り替えます。
書式を設定するコンテンツを選択します。
[スタイルの適用] ツール バーの [ターゲット規則] リストをクリックし、次のいずれかの操作を行います。
適用する書式設定に基づく新しいスタイルを作成して、そのスタイルを現在のコンテンツに適用する場合は、[新しいインライン スタイル]、[新しい自動 ID]、または [新しい自動クラス] を選択してコンテンツの書式を設定します。
[新しいスタイル] ダイアログ ボックスを使用して新しいスタイルをデザインし、そのスタイルを必要に応じて現在の選択対象に適用する場合は、[新しいスタイルの適用] を選択します。
選択内容に適用されている既存のスタイル ルールを変更したり、スタイル ルールに対して新しいプロパティ宣言を作成したりできます。
[スタイルの適用] ツール バーを使用して既存のスタイルを変更するには
デザイン ビューまたはソース ビューで、[手動] スタイル適用モードに切り替えます。
書式を設定するコンテンツを選択します。
[スタイルの適用] ツール バーの [ターゲット規則] ボックスの一覧で、目的のスタイルをクリックします。
書式設定するプロパティの宣言が、選択されているスタイルに含まれていないが、現在の選択範囲の別のスタイルに含まれている場合は、[既存のスタイルの再使用] を選択して既存のスタイルを変更します。
コンテンツの書式を設定します。