ASP.NET Web フォームで Visual Studio 2012 の Page Inspector を使用する
作成者: Tim Ammann
Visual Studio 2012 のPage Inspectorは、統合されたブラウザーを備えた Web 開発ツールです。 統合ブラウザーで任意の要素を選択Page Inspector、要素のソースと CSS がすぐに強調表示されます。 アプリケーション内の任意のページを参照したり、レンダリングされたマークアップのソースをすばやく見つけたり、Visual Studio 環境内でブラウザー ツールを使用したりできます。
このチュートリアルでは、検査モードを有効にし、Web プロジェクト内の CSS ルールとテキストをすばやく見つけて編集する方法について説明します。 このチュートリアルでは、Web Forms アプリケーション プロジェクトを使用しますが、Web サイト プロジェクトと MVC アプリケーションにPage Inspectorを使用することもできます。
このチュートリアルには、次のセクションがあります。
Page Inspectorを使用してアプリケーションを表示する
前提条件
注意
最新バージョンのPage Inspectorを取得するには、Web プラットフォーム インストーラーを使用して Azure SDK for .NET 2.0 をインストールします。
Page InspectorはMicrosoft Web Developer Toolsにバンドルされています。 最新バージョンは 1.3 です。 使用しているバージョンをチェックするには、Visual Studio を実行し、[ヘルプ] メニューから [Microsoft Visual Studio について] を選択します。
Web アプリケーションを作成する
まず、Page Inspectorを使用する Web アプリケーションを作成します。 Visual Studio で、[ファイル] [新しいプロジェクト] の順に>選択します。 左側の [Visual C#] を展開し、[Web] を選択し、[ASP.NET Web Forms アプリケーション] を選択します。
[OK] をクリックします。
アプリケーションが [ソース] ビューで開きます。
操作するアプリケーションが用意されたので、Page Inspectorを使用して調べて変更できます。
Page Inspectorを使用してアプリケーションを表示する
次に、Page Inspectorを使用してアプリケーションを表示します。 ソリューション エクスプローラーでプロジェクトを右クリックし、[Page Inspectorで表示] を選択します。
既定では、Page Inspectorが初めて起動すると、Visual Studio 環境の左側に狭いウィンドウとしてドッキングされます。 左側にドッキングしたままにして、快適な幅に設定するか、上、下、または右のいずれかのツール領域にドッキングします。
Page Inspector ウィンドウをドッキング解除した場合は、Visual Studio の外部に配置することも、2 台目のモニターがある場合は 2 台目のモニターに配置することもできます。 ただし、[Page Inspector] ウィンドウがドッキングされていないときにPage Inspectorと Visual Studio の間で Alt + Tab キーを押すには、[ツール>オプション] [環境>] タブと [Windows] > に移動し、[タブ ウェル] の下にある [フローティング ツール ウィンドウ] というチェック ボックスをオフにすると、常にメイン ウィンドウの上に残ります。
![Visual Studio とドッキングされていないPage Inspector ウィンドウの間で Alt + TAB キーを押す [フローティング ツール ウィンドウ] チェック ボックスをオフにする](using-page-inspector-in-a-visual-studio-11-beta-web-forms-project/_static/image5.png)
Page Inspector ウィンドウの上部ウィンドウには、ブラウザー ウィンドウに現在のページが表示されます。 下部のウィンドウには、ページの左側に HTML マークアップが表示され、右側にはページのさまざまな側面を検査できるタブが表示されます。 下部のウィンドウは、インターネット エクスプローラーの F12 開発者ツールに似ています。 (ただし、開発者ツールとは異なり、Visual Studio 内Page Inspector直接使用できます)。
このチュートリアルでは、Page Inspector ブラウザー ウィンドウと [HTML] タブと [スタイル] タブを使用して、アプリケーションを迅速に移動して変更できるようにします。
検査モードを有効にする
次に、Page Inspectorの検査モードのしくみを確認します。 [Page Inspector] ウィンドウで、[検査] ボタンをクリックします。
![Page Inspector ブラウザー ウィンドウの [検査] ボタンを選択して検査モードを有効にする方法を示すスクリーンショット。](using-page-inspector-in-a-visual-studio-11-beta-web-forms-project/_static/image7.png)
検査モードの動作を確認するには、Page Inspector ブラウザー ウィンドウ内のページのさまざまな部分にマウスを移動します。 そうすると、マウス ポインターが大きなプラス記号に変わり、下の要素が強調表示されます。
マウス ポインターを移動すると、次の点に注意してください。
ソース ビューのコンテンツが変更され、ページ上の選択した要素に対応するマークアップが表示されます。 関連するマークアップが強調表示されます。 ソースが別のファイルにある場合、そのファイルはソース ビューで開き、関連するマークアップが強調表示されます。
Page Inspectorの [HTML] タブに表示されるマークアップも、ページ上の選択した要素に対応するように変更されます。 [ HTML ] タブでは、関連するマークアップのアウトラインが表示されます。
[ スタイル ] タブには、現在の選択に関連する CSS ルールが表示されます。
Page Inspectorを使用してマークアップを変更する
ここで、Page Inspectorを使用して、場所がすぐには明らかでない可能性があるマークアップまたはテキストを検索して変更する方法について説明します。
Page Inspectorを検査モードにしてから、ホーム ページの下部までスクロールします。
フッター領域を入力するとすぐに、Page Inspectorは、他のタブの右側にある一時タブの [ソース] ビューで Site.Master レイアウト ファイルを開き、選択したマスター ページのセクションを強調表示します。 これは、実際に開いたファイルとは異なるファイルから取得される可能性があるページで、Page Inspectorがコンテンツを検索して表示する方法を示しています。
Page Inspectorブラウザー ウィンドウで、著作権に関する通知がある行の上にマウス ポインターを移動します。
Site.Master ページで、対応する行が強調表示されます。
Site.Master ファイルの行の末尾にテキストを追加します。
<p>&コピー; <%: DateTime.Now.Year %> - ASP.NET アプリケーション ロック!</P>
次に、Ctrl キーを押しながら Alt キーを押しながら Enter キーを押すか、更新バーをクリックしてPage Inspectorブラウザー ウィンドウに結果を表示します。
フッターが Default.aspx ページにあると思ったかもしれませんが、マスター レイアウト ページに表示され、Page Inspector見つかりました。
検査モードと HTML ウィンドウ
次に、HTML ウィンドウを簡単に見て、要素をマップする方法について説明します。
Page Inspectorを検査モードにします。
![Page Inspector ブラウザー ウィンドウの [検査] ボタンを選択して検査モードを使用する方法を示すスクリーンショット。](using-page-inspector-in-a-visual-studio-11-beta-web-forms-project/_static/image12.png)
ページの上部にある 「ここにロゴ」と表示されている部分をクリックします。 特定の要素をさらに詳しく調べているため、マウス ポインターを移動してもブラウザー ウィンドウの表示は変わりなくなりました。
次に、マウス ポインターを HTML ウィンドウに移動します。 マウス ポインターを移動すると、Page Inspector HTML ウィンドウ内の要素のアウトラインが表示され、ブラウザー ウィンドウ内の対応する要素が強調表示されます。
前と同様に、Page Inspectorは一時タブで Site.Master ファイルを開きます。[Site.Master] タブをクリックすると、ヘッダー> セクションで<対応するマークアップが強調表示されます。
[スタイル] ウィンドウで CSS の変更をプレビューする
次に、[スタイルのPage Inspector] ウィンドウを使用して CSS への変更をプレビューする方法について説明します。
[検査] ボタンをクリックして、Page Inspectorを検査モードにします。
Page Inspectorブラウザー ウィンドウで、div.content-wrapper ラベルが表示されるまでマウス ポインターを [ホーム ページ] セクションの上に移動します。
div.content-wrapper セクション内を 1 回クリックし、マウス ポインターを [スタイル ] ウィンドウに移動します。 .featured .content-wrapper クラス セレクターで、背景色プロパティのチェック ボックスをオフにして選択します。
Page Inspector ブラウザー ウィンドウで変更がどのようにプレビューされるかに注目してください。
もう一度チェック ボックスをオンにし、プロパティ値をダブルクリックして に red変更します。 変更はすぐに表示されます。
スタイル ウィンドウを使用すると、スタイル シート自体に変更をコミットする前に、CSS の変更を簡単にテストおよびプレビューできます。
CSS 自動同期
注意
この機能には、バージョン 1.3 のPage Inspectorが必要です。
CSS 自動同期機能を使用すると、CSS ファイルを直接編集し、Page Inspector ブラウザーで変更をすぐに確認できます。
[検査] をクリックして、Page Inspectorを検査モードにします。
Page Inspector ブラウザーで、div.content-wrapper ラベルが表示されるまでマウス ポインターを "ホーム ページ" セクションの上に移動します。 この要素を選択するには、1 回クリックします。
[ スタイル] ウィンドウには、この要素のすべての CSS 規則が表示されます。 下にスクロールして、.featured .content-wrapper クラス セレクターを見つけます。 [おすすめの .content-wrapper] をクリックします。 Page Inspector、このスタイル (Site.css) を定義し、対応する CSS スタイルを強調表示する CSS ファイルを開きます。
次に、 の値 background-color を "red" に変更します。 変更は、Page Inspector ブラウザーにすぐに表示されます。
CSS カラー ピッカーの使用
次に、Page Inspectorを使用して、既定のアプリケーションで強調表示されたテキストの CSS をすばやく見つけて変更する方法について説明します。 この例では、青の強調表示が気に入らないので、別の色に変更することにしました。
[ 検査 ] ボタンをクリックします。
![PAGE INSPECTOR ブラウザー ウィンドウの [検査] ボタンを選択して CSS を使用する方法を示すスクリーンショット。](using-page-inspector-in-a-visual-studio-11-beta-web-forms-project/_static/image20.png)
Page Inspectorブラウザー ウィンドウで、強調表示されている "ビデオ、チュートリアル、サンプル" テキストの上にマウス ポインターを移動して、CSS の "マーク" ラベルが表示されるようにします。
テキストをクリックして選択します。 対応する CSS マーク セレクターが [スタイル] ウィンドウの下部に表示されます。
![[スタイル] ウィンドウのマーク セレクター](using-page-inspector-in-a-visual-studio-11-beta-web-forms-project/_static/image22.png)
マーク セレクターをクリックします。 これにより、Web アプリケーションの Site.css ファイルが開きます。 [Site.css] タブをクリックすると、セレクターの対応する CSS が強調表示されます。
背景色プロパティを持つ線を選択して削除します。
次に、新しい Visual Studio 2012 CSS カラー ピッカーを使用して、 マーク の背景色プロパティの新しい色を選択します。
Visual Studio 2012 CSS カラー ピッカーの使用
Visual Studio 2012 の CSS エディターには、色を簡単に選択して挿入できるカラー ピッカーがあります。 シンプルなカラーバーと、より細かいコントロールを提供する「ポップダウン」ピッカーがあります。
カラー ピッカーには標準の色パレットが含まれており、標準の色名、ハッシュ コード、RGB、RGBA、HSL、HSLA の各色がサポートされ、ドキュメントで最近使用した色の一覧が保持されます。
背景色プロパティの行で、「bc」と入力し、下矢印を 1 回押します。
"背景色" などのハイフンで区切られたプロパティに各単語の最初の文字を入力すると、IntelliSense によって一覧がフィルター処理され、一致するプロパティのみが表示されます。
コロンを入力します。 この操作を行うと、完全な背景色のプロパティ名が挿入されます。 「」または「rgb(」と入力#すると、カラー ピッカー バーが表示されます。
カラー ピッカー バーの動作を確認するには、マウス ポインターで色をクリックするか、下方向キーを押してから、左右の方向キーを使用して色を走査します。 色にアクセスすると、背景色プロパティの対応する値がプレビューされます。
この時点で、Enter キーを押して値を選択し、セミコロン (;)して CSS エントリを完了できます。 ここでは、次のセクションに進み、カラー ピッカーのポップアップのしくみを確認します。
カラー ピッカー Pop-Down の使用
探している正確な色がカラー バーに表示されない場合は、カラー ピッカーのポップアップ を使用できます。
これを開くには、カラー バーの右端にある二重シェブロンをクリックするか、キーボードの下矢印を 1 回または 2 回押します。
右側の垂直バーから色をクリックします。 メイン ウィンドウにその色のグラデーションが表示されます。 Enter キーを押して垂直バーから直接色を選択するか、メイン ウィンドウ内の任意のポイントをクリックして、より高い精度で選択します。
使用するコンピューター画面に色がある場合 (Visual Studio ユーザー インターフェイス内にある必要はありません)、右下にあるスポイト ツールを使用してその値をキャプチャできます。
カラー ピッカーの下部にあるスライダーを移動して、色の不透明度を変更することもできます。 これにより、RGBA 形式が不透明度を表すことができるため、色の値が RGBA 値に変更されます。
色を選択したら、Enter キーを押し、セミコロンを入力して Site.css ファイルの背景色の入力を完了します。
Page Inspector更新バー
Page Inspectorは、Site.css ファイル (またはアプリケーション内の任意のファイル) への変更を直ちに検出し、更新バーにアラートを表示します。
すべてのファイルを保存し、Page Inspectorブラウザーを更新するには、Ctrl + Alt + Enter キーを押すか、更新バーをクリックします。 強調表示の色の変更がブラウザーに表示されます。
Visual Studio 環境内から Page Inspector ブラウザーを簡単に更新したことがわかります。 外部ブラウザーの代わりにPage Inspectorを使用すると、Web アプリケーションを開発するときにエディターを使用できます。
参照
Page Inspectorの概要 (Channel 9 ビデオ)
Page Inspector エラー メッセージ (MSDN)
フィードバック
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「https://aka.ms/ContentUserFeedback」を参照してください。
フィードバックの送信と表示