次の方法で共有

Design View

  • [アーティクル]

 

発行: 2016年4月

デザイン ビューは、ASP.NET Web ページ、マスター ページ、コンテンツ ページ、HTML ページ、およびユーザー コントロールを、WYSIWYG に近いビューで表示します。 デザイン ビューでは、テキストや要素を追加してから、その位置やサイズを変更したり、特別なメニューや [プロパティ] ウィンドウを使用してプロパティを設定したりできます。 分割ビューではデザイン ビューとソース ビュー両方でドキュメントを表示および編集できます。 既定では、2 種類のウィンドウは水平方向に配置されます。

要素をページに追加すると、Visual Web Developer により対応するマークアップが生成されます。これは、ソース ビューでも編集できます。 詳細については、「NIB: Source View」を参照してください。

デザイン ビューに切り替えるには、HTML デザイナー ウィンドウの下にある [デザイン] タブをクリックします。

注意

デザイン ビューには、ドキュメントの本体のみが表示されます。つまり、<body> タグと </body> タグの間の部分のみが表示されます。[ドキュメントのプロパティ] ウィンドウを使用して、ドキュメントのタイトルなど、head 要素のプロパティを編集できる場合もありますが、body 要素内部に存在しない要素のプロパティを編集する場合には、ソース ビューに切り替える必要があります。

Web ブラウザーの表示とデザイン ビューの違い

デザイン ビューでは WYSIWYG に近いビューが提供され、ブラウザーに表示されるのとほぼ同じ状態でページを編集できます。 ただし、デザイン ビューの表示は、ページがレンダリングされた状態に完全に一致するものではないので、必ず、1 つ以上のブラウザーでページをテストして、デザインしたとおりにページが表示されるかどうか確認する必要があります。

デザイン ビューに表示されるドキュメントは、Web ブラウザーでの表示とは次の点で異なります。

  • デザイン サーフェイスが編集可能です。

  • 編集目的でデザイン ビューにのみ表示され、ブラウザーには表示されない要素があります。たとえば、データ ソース コントロールなどです。 編集中にのみ表示されるコントロールの多くは、デザイン ビューで灰色のボックスとして表示されます。

  • 特定の Web ブラウザーで書式設定の実装が異なる場合、一部の文字および段落の書式設定は、そのブラウザーでの表示がデザイン ビューとは異なることがあります。

  • ハイパーリンクが機能しません。

  • クライアント スクリプトが動作しません。

  • サーバー コードが実行されません。

  • 代替テキストをサポートする要素 (イメージなど) にマウス ポインターが置かれても、ツール ヒントには代替テキストが表示されません。

Null 文字の表示

null 文字が含まれているテンプレートをデザイン ビューで使用した場合、null 文字に続く文字が切り捨てられます。 テンプレート内の null 文字に続く文字データが表示されないだけで、データが失われるわけではありません。

デザイン ビューでの要素の配置

ページ内の要素は、物理的に上から下へ配置されます。 既定では、ページがブラウザーにレンダリングされるとき、要素は上から下へ同じ順序でレンダリングされます。 また、横軸と縦軸の座標に合わせて 2 次元でページ上の任意の位置に要素を配置することもできます。 このレイアウト オプションは、スタイルを介して使用できる配置オプションを利用します。 詳細については、「Positioning Elements in Design View」を参照してください。

デザイン ビュー内の移動

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

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

  • ドキュメント アウトライン。 [ドキュメント アウトライン] ウィンドウでは、表示されないものも含めてドキュメント内の全要素を配置および選択できます。 詳細については、「NIB: How to: Navigate in the HTML Editor in Visual Web Developer」を参照してください。

  • [プロパティ] ウィンドウ。 [プロパティ] ウィンドウの一番上にあるドロップダウン リストから要素を選択すると、エディター上でドキュメント内のその要素が選択されます。

要素の追加

デザイン ビューでは次の方法でページに要素を追加できます。

  • [ツールボックス] からドラッグします。

  • [ツールボックス] で要素をダブルクリックします。すると、ドキュメント内の現在カーソルを置いている場所に要素が挿入されます。

  • Visual Web Developer で開いている別のドキュメントから要素をドラッグします。

  • [ソリューション エクスプローラー] からドラッグします。 これは主に、ユーザー コントロールやスタイル シート参照をページに追加するときに有効な方法です。

  • ページにテキストを直接入力します。

デザイン ビューのスマート タグ

デザイン ビューでは、多くの ASP.NET サーバー コントロールにスマート タグが表示されます。スマート タグを使用すると、そのコントロールの構成に頻繁に使用される設定やアクションにすばやくアクセスできます。 既定では、スマート タグは、ページにコントロールを初めて追加するときに表示されます。 ショートカット メニューを使用したり、その記号をクリックすることにより、スマート タグをいつでも表示できます。

デザイン ビューの式

デザイン ビューでは、[プロパティ] ウィンドウを使用して式の値を変更することはできません。 たとえば、ソース ビューのコントロールに式を割り当てた場合、この式の値をデザイン ビューで変更することはできません。 式の値は計算で求められるので、式の変更はソース ビューで行う必要があります。

デザイナーの再表示

ソース ビューからデザイン ビューに切り替えたとき、ファイルの変更を反映するためにデザイナーを再表示しなければならない場合があります。 たとえば、テーマ コードは解析されますが、コンパイルされません。したがって、ソース ビューでテーマ コードに変更を加えた場合、変更を反映させるには再表示が必要です。

デザイナーを再表示するには、次のいずれかの操作を実行します。

  • デザイン ビュー上を右クリックし、[最新の情報に更新] をクリックします。

  • [表示] メニューの [最新の情報に更新] をクリックします。

参照

Walkthrough: Creating a Basic Web Forms Page in Visual Studio
NIB: Source View
NIB: Paste Operations in the HTML Editor Source and Design Views
NIB: Using the Tag Navigator in Visual Web Developer
Positioning Elements in Design View
NIB: How to: Navigate in the HTML Editor in Visual Web Developer