DOM Explorer を使用した CSS スタイルのデバッグ

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

Windows と Windows Phone に適用されます

Windows ストアアプリおよび Windows Phone ストアアプリのデバッグ中に、選択した DOM 要素と子要素に対する CSS 規則を表示および変更できます。

DOM Explorer の [スタイル] タブと [計算済み] タブに、選択した要素に適用される CSS ルールが表示されます。規則は CSS の優先順位規則に従ったそれぞれの特異性の順序で表示されます。タブに表示されたセレクターまたはスタイルの最初の規則 (最も限定的な規則) が選択した要素に最後に適用され、セレクターまたはスタイルの最後の規則が最初に適用されます。規則が適用されると、前に適用された規則はオーバーライドされます。

[スタイル]、[計算済み]、[変更] の各タブには、それぞれ異なる形式でスタイル情報が表示されます。

[スタイル] タブには、規則が CSS セレクターの名前 (html、body など) 別に表示されます。このタブで、特定のスタイルを有効または無効にしたり、値を手動で変更したりすることもできます。これらの変更の結果はすぐに確認できます。
[計算済み] タブには、スタイルの計算値が表示されます。たとえば、サイズを 1em に設定した場合、Internet Explorer での計算値は 16px になります。このタブのスタイルは、スタイルの名前 (height など) 別に表示されます。このタブで、特定のスタイルを有効または無効にしたり、値を手動で変更したりすることもできます。これらの変更の結果はすぐに確認できます。

注意

Visual Studio 2013 Update 2 では、[トレース] タブで提供される情報は [計算済み] タブにマージされ、[Trace] タブは削除されました。
デバッグセッション中に変更した CSS スタイルを識別し、追跡するには、[変更] タブを使用します。

ヒント

[スタイル] タブと [計算済み] タブで行った変更は永続的ではありません。それらは、デバッグを停止したときに失われます。デバッガーを停止して再起動することなくソースコードの変更とページの再読み込みを行うには、[デバッグ] ツールバーの [Windows アプリケーションの更新] ボタンボタン ([Windows アプリケーションの更新]) を使用してアプリを更新します。詳細については、「アプリの更新 (JavaScript)」を参照してください。

CSS 規則の修正例

この例では、CSS 規則を検査し、スタイルの問題をデバッグする方法を示します。この例では、Windows ストア分割アプリケーションテンプレートのグループタイトルの表示に使用されるフォントの色を変更するとします。

注意

この例は Windows ストアアプリを示しますが、表示されている DOM Explorer 機能はすべて Windows Phone ストアアプリにも適用されます。

CSS 規則を表示および変更するには

Visual Studio で、分割アプリケーションプロジェクトテンプレートで JavaScript と HTML を使用して、Windows ストアアプリを作成します。
ソリューションエクスプローラーで items.css を開きます (items.css はページフォルダーにあります)。
次の CSS コードを
```
    .itemspage .itemslist .item {
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 1fr 90px;
        display: -ms-grid;
        height: 250px;
        width: 250px;
    }
```
以下に置き換えます。
```
    .itemspage .itemslist .item {
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 1fr 90px;
        display: -ms-grid;
        height: 250px;
        width: 250px;
        color: #ff6a00;
    }
```
これは一覧の項目ごとに色 #ff6a00 (オレンジ色) を指定するスタイルを追加します。 CSS セレクター、.itemspage .itemslist .item は、有効な DOM の入れ子になった要素として表示される、items.html 内の DIV 要素の一連のクラス名を示します。 item DIV 要素で一覧の項目を指定します。
[デバッグ] ツールバーのドロップダウンリストの [シミュレーター] を選択します (既定値は [ローカルコンピューター] です)。
F5 キーを押して、アプリをデバッグモードで実行します。

アプリケーションの読み込みが完了したら、**[グループタイトル: 1]**のようなリスト項目の見出しを確認します。色は変更されないため、タイトルにオレンジ色を適用しようとしても、機能しませんでした。何がうまくいかなかったのかを確認し、DOM Explorer で CSS のタブを使用して修正します。

ヒント

アプリケーションがシミュレーターに表示されたら、シミュレーターを Visual Studio のウィンドウの横に配置して、CSS スタイルに対して行った選択と変更の結果をすぐに確認できるようにします。
Visual Studio に切り替え、DOM Explorer で [要素の選択] をクリックします (または Ctrl + B キーを押します)。これで選択モードが変更され、項目をクリックで選択できるようになります。同時に、アプリが前面に表示されます。モードは、シングルクリックで元に戻ります。 [要素の選択] ボタンを次に示します。

ヒント

HTML 要素は DOM エクスプローラーで直接選択することもできます。要素の選択の詳細については、「クイックスタート: HTML および CSS のデバッグ」を参照してください。
シミューレーターで、ホームページの左パネルに表示されている一覧の最初の項目のタイトル ([グループタイトル: 1]) をポイントします。次に示すように、タイトルが反転表示されます。

注意

Windows Phone エミュレーターは、マウスポインターを置いたときの要素の強調表示を部分的にのみサポートします。
輪郭付きのタイトルをクリックします。 DOM Explorer によって対応する HTML 要素が自動的に選択され、次のように表示されます
```
<h4 class="item-title">Group Title: 1</h4>
```
DOM Explorer で H4 要素を選択すると、DOM Explorer のタブに、H4 要素に関連付けられている規則が表示されます。 color プロパティが開かれた状態の [計算済み] タブを次に示します。

このビューから、color スタイルに関連付けられている規則について、次のような有益な情報が得られます。
- items.css で変更した CSS セレクター .itemspage .itemslist .item は、最終的なスタイルの計算に使用されていません (取り消し線テキストで表示されています)。他のいくつかの color スタイルも使用されていません。
  
  ヒント
  
  長いセレクターの名前の場合、フルネームがツールヒントに表示されます。
- CSS の最終的な計算値 rgba(255, 255, 255, 0.87) は、CSS セレクター .itemspage .itemslist .item .item-overlay .item-title 専用に設定されています (items.css でも同様に定義されています)。
  
  ヒント
  
  タイトルの色を設定している箇所がわかったので、その値を変更することもできます。ただし、以降の手順に従うと、アプリを更新せずに DOM Explorer で変更をテストすることができます。
.itemspage .itemslist .item .item-overlay .item-title セレクターに対応する 1 つ目の color スタイルのチェックボックスをオフにします。これにより、シミュレーターで項目のタイトルの色がすべてオレンジ色になり、CSS で変更した .itemspage .itemslist .item セレクターがオーバーライドされなくなります (取り消し線が適用されなくなります)。チェックボックスをオフにした後の [計算済み] タブを次に示します。
[変更] タブをクリックします。

デバッグセッション中に行ったスタイルの変更を識別して追跡するには、[変更] タブを使用します。次の図は、オーバーライドされている [変更] タブの .itemspage .itemslist .item .item-overlay .item-title セレクターです。
[スタイル] タブで、CSS スタイルの値を手動で変更することもできます。結果はすぐに確認できます。
[スタイル] タブをクリックします。
.itemspage .itemslist .item .item-overlay .item-title スタイルセレクターを開きます。
1 つ目の color スタイルを選択し、プロパティ値 rgb(255, 255, 255, 0.87) をダブルクリックします。
キーボードを使用して、この値を rgb(255, 255, 0, 0.87) に変更し、Enter キーを押します。シミュレーターに表示されている項目のタイトルの色がすべて黄色に変更されます。
ソースの CSS ファイルに変更を加えるには、[スタイル] タブの [items.css] リンクをクリックします。 items.css が開き、アプリコードの color スタイルの値を変更できます。デバッガーを停止して再起動することなくアプリケーションを更新するには、[デバッグ] ツールバーの ([Windows アプリケーションの更新]) ボタンをクリックします。

参照

次の方法で共有

DOM Explorer を使用した CSS スタイルのデバッグ

CSS 規則の修正例

CSS 規則を表示および変更するには

参照

処理手順

概念

その他の技術情報

その他のリソース