CSS 規則を検査する方法
アプリケーションのデバッグ中に、選択した DOM 要素と子要素に対する CSS 規則を表示および変更できます。
DOM Explorer の [スタイル] タブと [トレース スタイル] タブに、選択した要素に適用される CSS ルールが表示されます。規則は CSS の優先順位規則に従ったそれぞれの特異性に基づいて表示されます。[スタイル] タブでは、一覧の最初の規則が選択した要素に最初に適用され、最後の規則が最後に適用されます。規則が適用されると、前に適用された規則はオーバーライドされます。これらの規則の値は編集可能です。値をクリックして新しい値を入力し、Enter キーを押します。変更はアプリに直ちに反映されます。
[スタイル] タブと [トレース スタイル] タブの情報は同じですが、[トレース スタイル] タブでは、情報はプロパティによってグループ化され、プロパティの下に規則が表示されます。プロパティはアルファベット順に表示され、規則は特異性に基づいて並べ替えられます。
[スタイル] タブと [トレース スタイル] タブで行った変更は永続的ではありません。それらは、デバッグを停止したときに失われます。
ヒント
デバッガーを停止して再起動することなくソース コードの変更とページの再読み込みを行うには、[デバッグ] ツール バーの [Windows アプリケーションの更新] ボタンを使用してアプリを更新します。詳細については、「アプリを更新する方法」を参照してください。
CSS 規則の表示と変更
この例では、CSS 規則を検査し、スタイルの問題をデバッグする方法を示します。この例では、分割アプリケーション テンプレートで作成されたアプリのグループ タイトルの表示に使用されるフォントの色を変更するとします。
CSS 規則を表示および変更するには
Visual Studio で、分割アプリケーション プロジェクト テンプレートで JavaScript を使用して、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 要素の一連のクラス名を示します。DIV 要素の項目は、一覧の項目を指定します。
[デバッグ] ツール バーの [デバッグの開始] ボタンの横にあるドロップダウン リストの [シミュレーター] をクリックします。
F5 キーを押して、アプリをデバッグ モードで実行します。
アプリケーションの読み込みが完了したら、**[グループ タイトル: 1]**のようなリスト項目の見出しを確認します。色は変更されないため、タイトルにオレンジ色を適用しようとしても、機能しませんでした。何がうまくいかなかったのかを確認し、DOM Explorer で CSS のタブを使用して修正します。
ヒント
アプリがシミュレーターに表示された後、Visual Studio とシミュレーターを横に並べて配置します。これにより、選択の結果と CSS スタイルに対して行った変更の結果を直ちに確認できます。
Visual Studio に切り替え、DOM Explorer で [要素の選択] をクリックします (または Ctrl + B キーを押します)。これで選択モードが変更され、項目をクリックで選択できるようになります。同時に、アプリが前面に表示されます。モードは、シングルクリックで元に戻ります。[要素の選択] ボタンを次に示します。
ヒント
HTML 要素は DOM エクスプローラーで直接選択することもできます。要素の選択の詳細については、「クイック スタート: アプリのデバッグ (JavaScript)」を参照してください。
シミューレーターで、ホーム ページの左パネルに表示されている一覧の最初の項目のタイトル ([グループ タイトル: 1]) をポイントします。次に示すように、タイトルの周囲に色付きのアウトラインが表示されます。
輪郭付きのタイトルをクリックします。DOM Explorer によって対応する HTML 要素が自動的に選択され、次のように表示されます (ID は異なります)。
<h4 class="item-title" id="_win_bind74" data-win-bind="textContent: title">Group Title: 1</h4>
DOM Explorer で要素を選択すると、現在のページ名は [要素の選択] ボタンの右側にある [要素ソース] フィールドに表示されます。HTML ファイルとして、items.html が次のように表示されます。
DOM Explorer で H4 要素を選択すると、[スタイル] タブ、[トレース スタイル] タブ、およびその他のタブに、H4 要素に関連付けられている規則が表示されます。カラー プロパティが開かれた状態の [トレース スタイル] タブを次に示します。
このビューには、カラー プロパティに関連付けられている規則に関する有益な情報が、次のように表示されます。
カラー プロパティの 1 番目と 2 番目は使用されていません。取り消し線テキストは、このプロパティが、CSS 優先順位規則 (特異性) に従って、同じプロパティの別の適用によってオーバーライドされていることを示します。
カラー プロパティの 2 番目はオレンジ色の正方形で示され、これが、CSS ファイルに追加したカラー プロパティであることを示しています。
カラー プロパティの 3 番目は、一覧内の項目の色を設定するために使用されます。この値は items.css で設定されていますが、CSS セレクター .itemspage .itemslist .item .item-overlay .item-title 専用に設定されます。
カラー プロパティの 3 番目のチェック ボックスはオフにします。これで、シミュレーターでは、項目のタイトルの色がすべてオレンジ色に変更されます。
カラー プロパティの 2 番目の生成を選択し、プロパティ値 [rgb(255, 106, 0)] をダブルクリックします。
キーボードを使用して [106] を削除し、[255] を入力して、Enter キーを押します。シミュレーターに表示されている項目のタイトルの色がすべて黄色に変更されます。
ソースの CSS ファイルに変更を加えるには、[トレース スタイル] タブの [items.css] リンクをクリックします。items.css が開き、カラー プロパティの値を変更できます。デバッガーを停止して再起動することなくアプリケーションを更新するには、[デバッグ] ツール バーの [Windows アプリケーションの更新] ボタン
をクリックします。
参照
処理手順
概念
クイック スタート: アプリのデバッグ (JavaScript)