[コード] ページ ビューと [分割] ページ ビュー
Web ページの [デザイン] ビューを使用すると、Web ページを視覚的に設計できます。このとき、HTML コードがバックグラウンドで自動的に生成されます。ただし、ページのコードを編集する必要がある場合もあります。たとえば、Web サイトのプロジェクトを他から継承するときに、どのタグが使用されているかを把握する必要がある場合などです。
[コード] ビューには、ページに記述されているコードが表示されます。[分割] ビューでは、Web ページのデザインとコードの両方を同時に表示できます。一方のウィンドウでアイテムを選択すると、もう一方のウィンドウがスクロールされそのウィンドウ内のアイテムが表示されます。たとえば、[デザイン] ウィンドウで PARAGRAPH 要素を選択すると、[コード] ウィンドウは対応する <p> タグまでスクロールします。その逆も同様です。この機能では必要な部分のコードを確認できるので便利です。[デザイン] ウィンドウで作業し、[コード] ウィンドウで自動的に更新されるコードを参照することによって、コードの勉強にもなります。
.gif "メモ") メモ : |
|---|
ページが [分割] ビューの時に、[コード] ビューと [デザイン] ビューの間を移動するには、Alt キーを押しながら、PageDown キーまたは PageUp キーを押します。 |
[分割] ビューの [デザイン] ウィンドウで編集した場合は、[コード] ウィンドウでコードが自動的に更新され、ページを更新する必要はありません。[分割] ビューの [コード] ウィンドウで編集した場合は、[デザイン] ビューの任意の場所をクリックするか、ページを保存するか、または [表示] をポイントして [最新の情報に更新] をクリックすると、[デザイン] ウィンドウに変更が反映されます。
.gif "ヒント") ヒント : |
|---|
[デザイン] ウィンドウと [コード] ウィンドウの両方の領域を [分割] ビューの元の設定より大きくする必要がある場合は、新しいウィンドウでページを開き ([ウィンドウ] メニューの [新しいウィンドウで開く] をクリック)、一方のウィンドウでページの [デザイン] ビューを使用し、もう一方のウィンドウでページの [コード] ビューを使用します。2 台のモニタを使用している場合は、一方にページの [デザイン] ビューのウィンドウを表示し、もう一方にページの [コード] ビューのウィンドウを表示できます。 |
[分割] ビューで [デザイン] ウィンドウと [コード] ウィンドウのサイズを変更するには
[分割] ビューで、次のいずれかの操作を行います。
[デザイン] ウィンドウと [コード] ウィンドウの間にある線をドラッグします。
[デザイン] ウィンドウで右クリックして、[分割位置の移動] をクリックします。上方向キーまたは下方向キーを押して、分割する線を上下に移動します。線の移動が終了したら、Enter キーを押します。