デザイン ビュー
更新 : 2007 年 11 月
デザイン ビューは、ASP.NET Web ページ、マスタ ページ、コンテンツ ページ、HTML ページ、およびユーザー コントロールを、WYSIWYG に近いビューで表示します。デザイン ビューでは、テキストや要素を追加してから、その位置やサイズを変更したり、特別なメニューや [プロパティ] ウィンドウを使用してプロパティを設定したりできます。
要素をページに追加すると、Visual Web Developer により対応するマークアップが生成されます。これは、ソース ビューでも編集できます。詳細については、「ソース ビュー」を参照してください。
デザイン ビューに切り替えるには、HTML デザイナ ウィンドウの下にある [デザイン] タブをクリックします。
.gif "メモ") メモ : |
|---|
デザイン ビューには、ドキュメントの本体のみが表示されます。つまり、<body> タグと </body> タグの間の部分のみが表示されます。[ドキュメントのプロパティ] ウィンドウを使用して、ドキュメントのタイトルなど、head 要素のプロパティを編集できる場合もありますが、body 要素内部に存在しない要素のプロパティを編集する場合には、ソース ビューに切り替える必要があります。 |
Web ブラウザの表示とデザイン ビューの違い
デザイン ビューでは WYSIWYG に近いビューが提供され、ブラウザに表示されるのとほぼ同じ状態でページを編集できます。ただし、デザイン ビューの表示は、ページがレンダリングされた状態に完全に一致するものではないので、必ず、1 つ以上のブラウザでページをテストして、デザインしたとおりにページが表示されるかどうか確認する必要があります。
デザイン ビューに表示されるドキュメントは、Web ブラウザでの表示とは次の点で異なります。
デザイン サーフェイスが編集可能です。
編集目的でデザイン ビューにのみ表示され、ブラウザには表示されない要素があります。たとえば、データ ソース コントールなどです。編集中にのみ表示されるコントロールの多くは、デザイン ビューで灰色のボックスとして表示されます。
特定の Web ブラウザで書式設定の実装が異なる場合、一部の文字および段落の書式設定は、そのブラウザでの表示がデザイン ビューとは異なることがあります。
サーバー コントロールを示すボックス、記号、またはアイコンをエディタ上に表示できます。詳細については、「[表示] ([オプション] ダイアログ ボックス - [HTML デザイナ])」を参照してください。
ハイパーリンクが機能しません。
クライアント スクリプトが動作しません。
サーバー コードが実行されません。
代替テキストをサポートする要素 (イメージなど) にマウス ポインタが置かれても、ツール ヒントには代替テキストが表示されません。
非表示要素の表示
ページ編集をサポートするため、デザイン ビューには、通常ブラウザに表示されない隠しフィールドなどの要素も表示されます。また、デザイン ビューには、実行時にマークアップがレンダリングされない、データ ソース コントロールなどの ASP.NET サーバー コントロールを示す灰色のボックスなども表示されます。
ページ上の要素やタグの編集がしやすいように境界線や記号を表示することもできます。詳細については、「方法 : デザイン ビューで非表示情報を表示する」を参照してください。
Null 文字の表示
null 文字が含まれているテンプレートをデザイン ビューで使用した場合、null 文字に続く文字が切り捨てられます。テンプレート内の null 文字に続く文字データが表示されないだけで、データが失われるわけではありません。
デザイン ビューでの要素の配置
ページ内の要素は、物理的に上から下へ配置されます。既定では、ページがブラウザにレンダリングされるとき、要素は上から下へ同じ順序でレンダリングされます。また、横軸と縦軸の座標に合わせて 2 次元でページ上の任意の位置に要素を配置することもできます。このレイアウト オプションは、スタイルを介して使用できる配置オプションを利用します。詳細については、「デザイン ビューでの要素の配置」を参照してください。
デザイン ビュー内の移動
デザイン ビューには、要素間を移動したり、要素を選択するための次のオプションが用意されています。
タグ ナビゲータ。タグ ナビゲータには現在の要素と、その要素が属す親タグの階層が示されます。タグ ナビゲータを使用して、フォーカスのある要素を確認したり、現在の要素から上位階層の要素に移動したりできます。詳細については、「Visual Web Developer の HTML エディタでのタグ ナビゲーション」を参照してください。
ドキュメント アウトライン。[ドキュメント アウトライン] ウィンドウでは、表示されないものも含めてドキュメント内の全要素を配置および選択できます。詳細については、「方法 : Visual Web Developer の HTML エディタ内で移動する」を参照してください。
[プロパティ] ウィンドウ。[プロパティ] ウィンドウの一番上にあるドロップダウン リストから要素を選択すると、エディタ上でドキュメント内のその要素が選択されます。
要素の追加
デザイン ビューでは次の方法でページに要素を追加できます。
[ツールボックス] からドラッグします。
[ツールボックス] で要素をダブルクリックします。すると、ドキュメント内の現在カーソルを置いている場所に要素が挿入されます。
Visual Web Developer で開いている別のドキュメントから要素をドラッグします。
[ソリューション エクスプローラ] からドラッグします。これは主に、ユーザー コントロールやスタイル シート参照をページに追加するときに有効な方法です。
ページにテキストを直接入力します。
デザイン ビューのスマート タグ
デザイン ビューでは、多くの ASP.NET サーバー コントロールにスマート タグが表示されます。スマート タグを使用すると、そのコントロールの構成に頻繁に使用される設定やアクションにすばやくアクセスできます。既定では、スマート タグは、ページにコントロールを初めて追加するときに表示されます。ショートカット メニューを使用したり、その記号をクリックすることにより、スマート タグをいつでも表示できます。
デザイン ビューの式
デザイン ビューでは、[プロパティ] ウィンドウを使用して式の値を変更することはできません。たとえば、ソース ビューのコントロールに式を割り当てた場合、この式の値をデザイン ビューで変更することはできません。式の値は計算で求められるので、式の変更はソース ビューで行う必要があります。
デザイナの再表示
ソース ビューからデザイン ビューに切り替えたとき、ファイルの変更を反映するためにデザイナを再表示しなければならない場合があります。たとえば、テーマ コードは解析されますが、コンパイルされません。したがって、ソース ビューでテーマ コードに変更を加えた場合、変更を反映させるには再表示が必要です。
デザイナを再表示するには、次のいずれかの操作を実行します。
デザイン ビュー上を右クリックし、[最新の情報に更新] をクリックします。
[表示] メニューの [最新の情報に更新] をクリックします。
参照
処理手順
チュートリアル : Visual Web Developer での基本的な Web ページの作成
方法 : Visual Web Developer の HTML エディタ内で移動する
概念
Visual Web Developer の HTML デザイナでの貼り付け操作
Visual Web Developer の HTML エディタでのタグ ナビゲーション