レイアウトを表示および編集する方法

[アーティクル]
02/22/2013

DOM エクスプローラーの [レイアウト] タブには、選択した要素の CSS ボックスモデルが表示されます。このボックスモデルのビジュアル表現を使用して、プロパティ値をすばやく識別できます。[レイアウト] タブの値を変更することもできます。行った変更は永続的ではありません。それらは、デバッグを停止したときに失われます。

ヒント

デバッガーを停止したくない場合は、ソースコードを変更してから、[デバッグ] ツールバーの [Windows アプリケーションの更新] ボタンを使用してアプリを更新できます。

DOM モデルエクスプローラーを使用してボックスモデルに表示されないレイアウトを変更するには、「クイックスタート: アプリのデバッグ (JavaScript)」と「CSS 規則を検査する方法」を参照してください。

レイアウトの表示および編集

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

レイアウトを表示および編集するには

Visual Studio で、分割アプリケーションプロジェクトテンプレートを使用する JavaScript を使用して Windows 用に開発された Windows ストアアプリを新しく作成します。
デバッグツールバーの [デバッグの開始] ボタンの横にあるドロップダウンリストの [シミュレーター] をクリックします。
F5 キーを押して、アプリをデバッグモードで実行します。

ヒント

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

ヒント

HTML 要素は DOM エクスプローラーで直接選択することもできます。要素の選択の詳細については、「クイックスタート: アプリのデバッグ (JavaScript)」を参照してください。
シミュレーターで、ホームページのグループ上にマウスポインターを置いて、グループイメージとグループタイトルの両方に色付きの輪郭が表示されるようにします。このデモでは、3 番目のグループ上にマウスポインターを置きます。輪郭が表示されたグループのイメージとタイトルを次に示します。
強調表示されたグループとイメージをクリックして選択します。DOM エクスプローラーによって、対応する IMG 要素が自動的に選択されます。DOM エクスプローラーで選択された要素は次のようになります。
```
<img class="item-image" id="_win_bind[idNumber]" alt="Group Title: 3" 
    src="data:image/png;base64, ..." data-win-bind=
    "src: backgroundImage; alt: title"></img>
```
[レイアウト] タブをクリックします。このタブには、選択した要素の寸法が次のように表示されます。

このビューは、要素に関する有用な情報を提供します。
- 対応する最も内側にあるボックス内の要素の寸法。通常は、CSS の高さと幅のプロパティに対応します。
- [パディング]、[境界線]、および [余白] の各ボックスには、0 ピクセルの値が表示されます。これは対応する CSS プロパティが設定されていないことを暗示しています。たとえば、CSS の左余白、上余白、右余白、および下余白の各プロパティがおそらく設定されていません。
ヒント

プロパティがどのように適用されるかを確認するには、[スタイル] タブをクリックし、継承されたスタイルの <div> インライン規則を調べます。高さと幅のプロパティが設定されていることを確認できます。
[レイアウト] タブで、[余白] ボックスの一番上にある [0px] をダブルクリックします。
上向きの矢印キーを使用して上余白の値を [10px] に増やし、Enter キーを押します。更新された余白は、シミュレーターに加え、[スタイル] タブのインライン規則の下にも表示されます。上方向キーと下方向キーを使用する代わりに、新しい値を入力することもできます。