DOM Explorer を使用したレイアウトのデバッグ

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

Windows と Windows Phone に適用されます

DOM Explorer の [レイアウト] タブは、Windows ストアまたは Windows Phone ストアアプリで選択した要素について、「CSS box model」を表示します。このボックスモデルのビジュアル表現を使用して、要素の外観に影響するレイアウト関連の値を特定して変更することができます。

ヒント

[レイアウト] タブで行った変更は永続的ではありません。ソースコードを永続的に変更してアプリを更新するには、[デバッグ] ツールバーの [Windows アプリケーションの更新] を使用します。これにより、デバッガーを再起動せずに済みます。

DOM モデルエクスプローラーを使用してボックスモデルに表示されないレイアウトを変更するには、「クイックスタート: HTML および CSS のデバッグ」と「DOM Explorer を使用した CSS スタイルのデバッグ」を参照してください。

レイアウトの問題の修正例

この例では、ハブ/ピボットテンプレートでリスト要素を選択し、[レイアウト] タブに表示されるボックスモデルの値を解釈します。その後、プロパティ値のいずれかを変更してレイアウトの問題を修正します。

レイアウトの問題を修正するには

Visual Studioで、ハブ/ピボットテンプレートを使用する新しいストアアプリを作成します。
共有のページ/ハブフォルダーで、hub.css を開きます。

次の CSS コードを

        .hubpage .hub .section4 .sub-image-row img {
            height: 95px;
            width: 130px;
        }

次の CSS コードに置き換えます。

        .hubpage .hub .section4 .sub-image-row img {
            height: 95px;
            width: 130px;
            margin-left: 5em;
        }

ソリューションエクスプローラーで、appName.WindowsPhone プロジェクトまたは appName.Windows プロジェクトを選択し、次にプロジェクトのショートカットメニューから [スタートアッププロジェクトに設定] を選択します。
スタートアッププロジェクトにより、デバッグツールバーのドロップダウンリストから [Emulator 8.1 WVGA 4 inch 512MB] または [シミュレーター] のどちらかを選択します (既定値は [ローカルコンピューター])。
F5 キーを押して、アプリをデバッグモードで実行します。
スクロールまたはフリックの操作によって、セクション 4 を開きます。

ヒント

Phone エミュレーターまたはシミュレーターを Visual Studio のウィンドウの横に配置して、CSS スタイルに対して行った選択と変更の結果をすぐに確認できるようにします。

セクション 4 が読み込まれると、下側のイメージが正しく表示されていないことが分かります。各項目のイメージが半分しか表示されません (左半分が表示されません)。
Visual Studio に切り替え、DOM Explorer で [要素の選択] をクリックします (または Ctrl + B キーを押します)。これで選択モードが変更され、項目をクリックで選択できるようになります。同時に、アプリが前面に表示されます。モードは、シングルクリックで元に戻ります。

ヒント

DOM Explorer で HTML 要素を直接選択するために、矢印キーや他のメソッドを使用することもできます。要素の選択の詳細については、「クイックスタート: HTML および CSS のデバッグ」を参照してください。
Phone エミュレーターまたはシミュレーターで、半分にカットされたイメージの 1 つのグレーの右半分を選択します。 Windows Phone エミュレーターに示すように、選択された要素の周囲に強調表示があります。

ヒント

このシミュレーターでは、DOM 要素の 1 つを選択する前にそれらの周りを強調表示するボックスを表示するために、要素上のホバーリングをサポートしています。Windows Phone エミュレーターは、この機能をサポートしていません。

DOM 要素を選択するときに、DOM Explorer は Visual Studio の対応する IMG 要素を自動的に選択します。 DOM エクスプローラーで選択された要素は次のようになります。
```
<img src="ms-appx://guid/images/gray.png> 
</img>
```
[レイアウト] タブをクリックします。このタブは、次の Windows Phone エミュレーターに示すように、選択した要素のボックスモデルを示します。

このビューは、要素に関する有用な情報を提供します。
- 表示される色は、シミュレーターで要素にマウスポインターを置いたときに反転表示されるボックスに対応しています。青は <img> 要素の大きさ示します。ベージュは余白の値を表します。
- 左余白 (margin-left) が設定されています。これは、イメージの左側が黒くなるという現象に関連するため、問題の原因を特定するヒントになります。
- 各ボックス (たとえば、[境界線] および [パディング]) には、0 ピクセルの値が表示されます。これは対応する CSS プロパティが設定されていないことを暗示しています。
margin-left 規則がどのように適用されるかを確認するために、[計算済み] タブをクリックし、margin-left 規則を調べます。この規則が 5em 値で設定されていることを確認できますが、計算値は、対象デバイスによって 66.66px または 146.66px となります。

ヒント

[計算済み] タブを確認すると、margin-left 規則が hub.css の ..hubpage .hub. section4 .sub-image-row img CSS セレクターで設定されていることがわかります。このデモアプリでは、その設定を修正する必要があります。

[レイアウト] タブを使用して、レイアウトの値の変更をテストすることもできます。
[レイアウト] タブでは、[余白] ボックスの左側にある [66.66] または [146.66] を選択します。
「0」と入力し、Enter キーを押します。 (上方向キーと下方向キーを使用して値を変更することもできます。)
DOM Explorer の別の <img> 要素を選択して、左余白の値を 0 に変更します。
Phone エミュレーターまたはシミュレーターに切り替えます。更新された左余白の値がセクション 4 のイメージに適用されています。これらの値は、margin-left 規則の [計算済み] タブでも更新されます。