手順 1：ビューの設定

この手順では、垂直と水平スプリッタが表示される <div> 要素のマークアップを追加します。以下を実行します。

ソリューションエクスプローラで、Views | Shared フォルダを展開し、_Layout.cshtml をダブルクリックして、ファイルを開きます。

次のマークアップをページの <body> タグ内に追加し、垂直と水平のスプリッタが表示される <div> 要素を追加します。

ソースビュー	コードのコピー
<div class="layout"> <h2> 垂直方向</h2> <div id="vsplitter"> <div> パネル1 </div> <div> パネル2 </div> </div> </div> <div class="layout" style="width: 100px;"> </div> <div class="layout"> <h2> 水平方向 </h2> <div id="hsplitter"> <div> パネル1 </div> <div> パネル2 </div> </div> </div>

ソースビュー

コードのコピー

<div class="layout">
<h2>
                垂直方向</h2>
            <div id="vsplitter">
<div>
                    パネル1
      </div>
<div>
                    パネル2
      </div>
      </div>
      </div>
        <div class="layout" style="width: 100px;">
      </div>
<div class="layout">
<h2>
                水平方向

</h2>
            <div id="hsplitter">
<div>
                    パネル1
      </div>
<div>
                    パネル2
      </div>
      </div>
      </div>