作成者: Tim Ammann
Page Inspector for Visual Studio 2012 は、統合されたブラウザーを備えた Web 開発ツールです。 統合ブラウザーで任意の要素を選択すると、Page Inspector によって即座にその要素のソースと CSS が強調表示されます。 アプリケーション内の任意のページを参照し、レンダリングされたマークアップのソースをすばやく見つけ、Visual Studio 環境内でブラウザー ツールを使用できます。
このチュートリアルでは、検査モードを有効にし、Web プロジェクト内で CSS ルールとテキストをすばやく見つけて編集する方法について説明します。 このチュートリアルでは Web フォーム アプリケーション プロジェクトを使用しますが、Web サイト プロジェクトや MVC アプリケーションに対して Page Inspector を使用することもできます。
このチュートリアルには以下のセクションが含まれています。
Page Inspector を使用してアプリケーションを表示する
前提条件
注
Page Inspector の最新バージョンを取得するには、 Web Platform Installer を使用して 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] を選択し、[ Web フォーム アプリケーション ASP.NET 選択します。
OK をクリックします。
アプリケーションが [ソース] ビューで開きます。
これで使用するアプリケーションを用意できたので、Page Inspector を使って調査と変更を行うことができます。
Page Inspector を使用してアプリケーションを表示する
次に、Page Inspector を使用してアプリケーションを表示します。 ソリューション エクスプローラーでプロジェクトを右クリックし、[ページインスペクターで表示] を選択します。
既定では、Page Inspector が初めて起動すると、Visual Studio 環境の左側に狭いウィンドウとしてドッキングされます。 左側にドッキングしたままにして、快適な幅に設定するか、上部、下部、または右のいずれかのツール領域にドッキングします。
[ページインスペクター] ウィンドウをドッキング解除した場合は、Visual Studio の外部に配置することも、ある場合は 2 台目のモニターに配置することもできます。 ただし、[ページインスペクター] ウィンドウがドッキング解除されたときにページインスペクターと Visual Studio の間で Alt キーを押しながら Tab キーを押すには、[ ツール>オプション>環境>タブとウィンドウ] に移動し、[ タブ ウェル] の下にある [フローティング ツール ウィンドウ] チェック ボックスをオフにすると、 常にメイン ウィンドウの上に表示されます。
![Visual Studio とドッキングされていない [ページインスペクター] ウィンドウの間の Alt + TAB の [フローティング ツール ウィンドウ] チェック ボックスをオフにする](using-page-inspector-in-a-visual-studio-11-beta-web-forms-project/_static/image5.png)
Page Inspector ウィンドウの上部ペインでは、現在のページがブラウザー ウィンドウに表示されます。 下部のウィンドウには、ページが左側に HTML マークアップで表示され、右側にいくつかのタブが表示され、ページのさまざまな側面を調べることができます。 下部ペインは、Internet Explorer の F12 開発者ツールに似ています。 (ただし、開発者ツールとは異なり、Visual Studio 内で直接 Page Inspector を使用できます)。
このチュートリアルでは、[ページインスペクター] ブラウザー ウィンドウと [HTML ] タブと [スタイル] タブを使用して、アプリケーションにすばやく移動して変更を加えるのに役立ちます。
検査モードを有効にする
次に、ページインスペクターの検査モードのしくみを確認します。 [ページインスペクター]ウィンドウで、[ 検査 ]ボタンをクリックします。
![[ページ検査] ブラウザー ウィンドウの [検査] ボタンを選択して検査モードを有効にする方法を示すスクリーンショット。](using-page-inspector-in-a-visual-studio-11-beta-web-forms-project/_static/image7.png)
検査モードの動作を確認するには、[ページ検査] ブラウザー ウィンドウ内のページのさまざまな部分にマウスを移動します。 そうすると、マウス ポインターは大きなプラス記号に変わり、その下にある要素が強調表示されます。
マウス ポインターを動かすと、次の点に注意してください。
ソース ビューのコンテンツが変更され、ページ上の選択した要素に対応するマークアップが表示されます。 関連するマークアップが強調表示されます。 ソースが別のファイルにある場合、そのファイルはソース ビューで開き、関連するマークアップが強調表示されます。
ページ インスペクターの [HTML ] タブに表示されるマークアップも、ページ上の選択した要素に対応するように変更されます。 [HTML] タブには、関連するマークアップのアウトラインが表示されます。
[ スタイル ] タブには、現在の選択に関連する CSS ルールが表示されます。
Page Inspector を使ってマークアップを変更する
次に、Page Inspector を使用して、位置がすぐには明らかでない可能性があるマークアップまたはテキストを検索して変更する方法について説明します。
検査モードでページインスペクターを配置し、ホーム ページの下部までスクロールします。
フッター領域に入るとすぐに、ページインスペクタは、他のタブの右側にある一時タブのソースビューでSite.Masterレイアウトファイルを開き、選択したマスターページのセクションを強調表示します。 これは、ページインスペクターが、最初に開いたファイルとは異なるファイルから実際に取得されたコンテンツをページで見つけて表示する方法を示しています。
[Page Inspector]\(ページインスペクター\) ブラウザー ウィンドウで、copyright notice を含む行の上にマウス ポインターを移動します。
Site.Master ページで、対応する行が強調表示されています。
Site.Master ファイルの行の末尾にテキストを追加します。
<p>&コピー <%: DateTime.Now.Year %> - 私のASP.NETアプリケーションは素晴らしい！</p>
次に、Ctrl + Alt + Enter キーを押すか [更新バー] をクリックして、Page Inspector のブラウザー ウィンドウで結果を確認します。
フッターは Default.aspx ページにあると思っていたかもしれませんが、実際にはマスター レイアウト ページにあり、Page Inspector がそれを見つけ出しました。
検査モードと [HTML] ウィンドウ
次に、[HTML] ウィンドウの概要と、どのように要素がマップされるかについて説明します。
検査モードでページインスペクターを配置します。
![[ページ検査] ブラウザー ウィンドウの [検査] ボタンを選択して検査モードを使用する方法を示すスクリーンショット。](using-page-inspector-in-a-visual-studio-11-beta-web-forms-project/_static/image12.png)
ページの上部にある "ここにロゴ" と表示されている部分をクリックします。 特定の要素をより詳しく調べているため、マウス ポインターを移動してもブラウザー ウィンドウの表示は変化しなくなります。
次に、マウス ポインターを [HTML] ウィンドウに移動します。 マウス ポインターを移動すると、Page Inspector によって [HTML] ウィンドウ内の要素に枠線が表示され、ブラウザー ウィンドウ内の対応する要素が強調表示されます。
以前と同様に、ページインスペクターは Site.Master ファイルを一時タブで開きます。[Site.Master] タブをクリックすると、対応するマークアップが <header> セクションで強調表示されます。
[スタイル] ウィンドウで CSS の変更内容をプレビューする
次に、[ページインスペクター のスタイル ] ウィンドウを使用して CSS への変更をプレビューする方法について説明します。
[ 検査 ] ボタンをクリックして、ページ検査を検査モードにします。
Page Inspector のブラウザー ウィンドウで、"Home Page" セクションの上にマウス ポインターを移動し、[div.content-wrapper] ラベルを表示させます。
div.content-wrapper セクション内を 1 回クリックしてから、マウス ポインターを [スタイル] ウィンドウに移動します。 .featured .content-wrapper クラス セレクターで、背景色プロパティのチェック ボックスをオフにして選択します。
Page Inspector のブラウザー ウィンドウで変更内容がすぐにプレビューされることがわかります。
もう一度チェック ボックスをオンにし、プロパティ値をダブルクリックして redに変更します。 変更内容がすぐに表示されます。
[スタイル] ウィンドウを使うと、CSS の変更をスタイル シート自体にコミットする前に、簡単にテストおよびプレビューすることができます。
CSS の自動同期
注
この機能には、Page Inspector のバージョン 1.3 が必要です。
CSS の自動同期機能を使うと、CSS ファイルを直接編集して、Page Inspector ブラウザーでその変更をすぐに確認できます。
[検査] をクリックして、Page Inspector を検査モードに切り替えます。
Page Inspector ブラウザーで、"Home Page" セクションの上にマウス ポインターを移動し、[div.content-wrapper] ラベルを表示させます。 この要素を 1 回クリックして選択します。
[スタイル] ウィンドウには、この要素に対するすべての CSS 規則が表示されます。 下にスクロールして、.featured .content-wrapper クラス セレクターを見つけます。 ".featured .content-wrapper" をクリックします。 Page Inspector によってこのスタイルを定義している CSS ファイル (Site.css) が開かれ、対応する CSS スタイルが強調表示されます。
次に、background-color の値を "red" に変更します。 変更は Page Inspector ブラウザーにすぐに表示されます。
CSS カラー ピッカーを使う
次に、Page Inspector を使用して、既定のアプリケーションで強調表示されたテキストの CSS をすばやく見つけて変更する方法について説明します。 この例では、青の強調表示が気に入らないので、別の色に変更することを決定しました。
[ 検査 ] ボタンをクリックします。
![CSS を使用する [ページインスペクター] ブラウザー ウィンドウの [検査] ボタンを選択する方法を示すスクリーンショット。](using-page-inspector-in-a-visual-studio-11-beta-web-forms-project/_static/image20.png)
ページインスペクターのブラウザー ウィンドウで、強調表示されている "ビデオ、チュートリアル、サンプル" テキストの上にマウス ポインターを移動して、CSS の "マーク" ラベルが表示されるようにします。
テキストをクリックして選択します。 [ スタイル] ウィンドウの下部に、対応する CSS マーク セレクターが表示されます。
マーク セレクターをクリックします。 これにより、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 エントリを完了できます。 ここでは、次のセクションに進んで、カラー ピッカーのポップアップのしくみを確認します。
カラーピッカーのポップダウンの使用
カラー バーに探している正確な色がない場合は、カラー ピッカーのポップアップを使用できます。
これを開くには、カラー バーの右端にあるダブル シェブロンをクリックするか、キーボードの下方向キーを 1、2 回押します。
右側の垂直バーから色をクリックします。 そうすると、メイン ウィンドウにその色のグラデーションが表示されます。 Enter キーを押して垂直バーから直接色を選択するか、メイン ウィンドウ内の任意のポイントをクリックして、より高い精度で選択します。
使いたい色がコンピューターの画面上にある場合 (Visual Studio のユーザー インターフェイス内にある必要はありません)、右下にあるスポイト ツールを使ってその値をキャプチャできます。
カラー ピッカーの下部にあるスライダーを動かして、色の不透明度を変更することもできます。 これにより、RGBA 形式が不透明度を表すことができるため、色の値が RGBA 値に変更されます。
色を選択したら、Enter キーを押してセミコロンを入力し、Site.css ファイルの background-color エントリを完成させます。
Page Inspector のアップデートバー
Page Inspector は、 Site.css ファイル (またはアプリケーション内の任意のファイル) への変更をすぐに検出し、更新バーにアラートを表示します。
すべてのファイルを保存して Page Inspector ブラウザーを更新するには、Ctrl + Alt + Enter キーを押すか、更新バーをクリックします。 強調表示の色の変更がブラウザーに表示されます。
Visual Studio 環境内からページインスペクター ブラウザーを簡単に更新していることに注意してください。 外部ブラウザーの代わりに Page Inspector を使用すると、Web アプリケーションを開発するときにエディターを使用できます。
こちらもご覧ください
Page Inspector の概要 (Channel 9 ビデオ)
Page Inspector のエラー メッセージ (MSDN)