ソース ビュー

更新 : 2007 年 11 月

ソース ビューには、Web ページの HTML マークアップが表示され、ここで編集できます。既定では、最初にソース ビューを選択した際、すべての HTML 要素とスクリプトが表示されます。デザイン ビューで Web ページを編集するときと同様に、ソース ビューでも、[ツールボックス] から要素をドラッグすると、マークアップがドキュメントに挿入されるのをその場で確認できます。

ソース ビューを選択するには、HTML デザイナ ウィンドウの下部の [ソース] タブをクリックします。

ソース ビューには、デザイナ ビューにはない次の利点かあります。

• 要素とコントロールのマークアップを微調整できます。

• ドキュメントを自由に書式指定できます。

• コード本体内にはない要素を編集できます。デザイン ビューでは、body 要素間にある要素のみ表示されます。たとえば、ソース ビューでは、head 要素を直接編集できます。

• ページ ディレクティブを編集できます。

• クライアント スクリプトを作成および編集できます。

• 分離コード ファイルのページではなくシングル ファイル ページを使用している場合、そのページのサーバー コードを編集できます。

デザイン ビューに切り替えると、ソース ビューで行った変更が即座に反映されます。

メモ :
マークアップ エラーがあった場合、データ消失などの問題が起こる可能性があるため、デザイン ビューに切り替えられない場合があります。たとえば、タグが適切に終了していない場合、エラーが表示され、ビューを切り替えられません。エラーの詳細情報は、[エラー一覧] ウィンドウに表示されます。デザイン ビューに切り替えられない場合でも、ページを実行して、ページをプレビューすることはできます。

ソース ビュー内の移動

ソース ビューには、要素間を移動したり、要素を選択するための次のオプションが用意されています。

• タグ ナビゲータ   タグ ナビゲータには現在の要素と、その要素が属する親要素の階層が表示されます。タグ ナビゲータを使用して、フォーカスのある要素を確認したり、現在の要素から上位階層の要素に移動したりできます。詳細については、「Visual Web Developer の HTML エディタでのタグ ナビゲーション」を参照してください。

• ドキュメント アウトライン   [ドキュメント アウトライン] ウィンドウでは、表示されていない要素も含め、1 つのドキュメント内のすべての要素を確認したり、選択したりできます。詳細については、「方法 : Visual Web Developer の HTML エディタ内で移動する」を参照してください。

検証

ソース ビューで、ドキュメントの構文が自動的にチェックされ、無効なタグ、属性、または値がマークされます。ブラウザ (たとえば Microsoft Internet Explorer) または標準 (たとえば XHTML 1.1 Strict) のいずれかから検証スキーマを選択します。詳細については、「Visual Web Developer でのマークアップ検証」を参照してください。

IntelliSense

IntelliSense は、入力しようとしている文字列候補として可能性のあるキーワードのドロップダウン リストを表示する Visual Studio の機能です。たとえば、クラス名の開始部分を入力すると、IntelliSense は、今までに入力したことがある、その文字で始まるすべてのクラス名が含まれるドロップダウン リストを表示します。

ソース ビューでは、ASP.NET Web サーバー コントロール、マークアップ、ページ ディレクティブ、およびクライアント スクリプトなど事実上すべての要素に対して IntelliSense が表示されます。エディタによって提供される IntelliSense は、現在の検証スキーマによって制御されます。現在のスキーマにとって有効でないタグ、属性、または値に対しては IntelliSense は提供されません。

メモ :
ステートメント入力候補はオフにできます。詳細については、「[全般] ([オプション] ダイアログ ボックス - [テキスト エディタ] - [HTML])」を参照してください。

書式設定

ドキュメントまたは個々のタグを書式指定するための次のオプションが用意されています。

• 要素のドラッグと貼り付け   ツールボックスから要素をドラッグしたり、クリップボードから貼り付けたりして、以前に書式指定したとおりに要素を作成したり、指定したオプションに従って要素を再書式指定したりできます。詳細については、「[その他] ([オプション] ダイアログ ボックス - [テキスト エディタ] - [HTML])」を参照してください。

• 引用符または終了タグの追加   自動的に属性値を引用符で囲むオプションや、開始タグを入力し終わると終了タグが自動的に追加されるオプションを設定できます。詳細については、「[書式] ([オプション] ダイアログ ボックス - [テキスト エディタ] - [HTML])」を参照してください。

• タグごとの書式指定   要素を作成するときに、タグが書式指定される規則を指定できます。タグと属性の大文字小文字を指定するオプションや、改行の挿入位置を決めるオプションがあります。詳細については、「[タグ指定オプション]」を参照してください。

• 要素またはドキュメントに対する書式指定   選択されたセクションまたはドキュメント全体に現在の書式指定を適用できます。

• ドキュメントのアウトライン   要素を折りたたんだり展開したりして、エディタの作業領域を広げることができます。たとえば、table 要素を折りたたんで、その行とセルのすべてを非表示にし、編集するときに個別に展開できます。要素を手動で折りたたんだり展開したりできます。また、要素にアウトラインを自動的に追加する際の要素の大きさに関する規則も指定できます。詳細については、「方法 : Visual Web Developer で HTML 要素の折りたたみや展開を行う」を参照してください。

クライアント スクリプトとサーバー コードの記述

ソース ビューでは、ブラウザで実行するクライアント スクリプトを作成できます。単一ファイル ASP.NET Web ページを使用している場合、ソース ビューからページのサーバー コードを編集することもできます。ASP.NET ページのクライアント スクリプトについては、「ASP.NET Web ページのクライアント スクリプト」を参照してください。シングル ファイル ASP.NET ページについては、「ASP.NET Web ページのコード モデル」を参照してください。

クライアント スクリプト

他のエディタを使用するときと同じようにクライアント スクリプトを記述できます。これは、要素の一部としてでも、<script> ブロック内にでも記述できます。スクリプト ブロック内では、現在のドキュメントのオブジェクト モデルに適合した、およびそのスクリプト ブロックに対して指定されているクライアント スクリプト言語に適合した IntelliSense が提供されます。言語を指定していない場合、ECMAScript であると見なされます。

メモ :
エディタでは、クライアント スクリプトは検証されません。

エディタ ウィンドウの一番上には 2 つのドロップダウン リストが表示されます。クライアント スクリプトの場合、左側のドロップダウン リストには、イベント ハンドラを記述できるドキュメント オブジェクトの一覧が表示され、右側のドロップダウン リストには、選択されたオブジェクトに対するイベントが表示されます。オブジェクトを選択してからイベントを選択することによって、新しいハンドラを作成できます。既にハンドラがあるイベントは太字で表示されます。

クライアント スクリプト内を移動しやすいように、左側のドロップダウン リストには [クライアント スクリプト] オプションも表示されます。[クライアント スクリプト] を選択すると、右側のドロップダウン リストに、クライアント スクリプト イベント ハンドラの一覧が表示されます。ハンドラを選択すると、そこに直接ジャンプできます。

サーバー コード

シングル ファイル コード モデルを使用する ASP.NET Web ページを使用している場合、ソース ビューには、スクリプト ブロック内の runat="server" 属性を含むページのサーバー コードが表示されます。

メモ :
サーバー コードは言語属性を必要としません。ページのサーバー コード言語は、@ Page ディレクティブで構築されます。

サーバー コードの場合、ページの左上のドロップダウン リストに、コードを記述できるサーバー コントロールが表示されます。右側のドロップダウン リストには、現在選択されているコントロールのイベントの一覧が表示されます。オブジェクトを選択してからイベントを選択することによって、新しいイベント ハンドラを作成できます。既にハンドラがあるイベントは太字で表示されます。

参照

概念

デザイン ビュー