チュートリアル: Web フォームページの Visual Studio での Web ページのコード編集

[アーティクル]
11/15/2012

Microsoft Visual Studio 2012 は、Web フォームページを対象とする豊富な HTML 編集機能を備えています。 Visual Studio HTM エディターは WYSIWYG モードで操作でき、HTML マークアップを直接操作することで細かい制御を行うことができます。このチュートリアルでは、Visual Studio の HTML 編集機能について紹介します。

注意

このトピックは、ASP.NET Web フォームページに適用されます。ASP.NET MVC (モデルビューコントローラー) または ASP.NET Web ページアプリケーション (.cshtml ファイル) でページを編集する際はソース ビューを使用できますが、デザイン ビューは Web フォームページのみを完全にサポートしています。Web サーバーコントロールは Web フォームページでのみ使用されます。

このチュートリアルでは、以下のタスクを行います。

デザイン ビューでの HTML の作成と編集
ソース ビューでの HTML の作成と編集
分割ビューの使用
ナビゲーションツールによる HTML タグ間の迅速な移動

必須コンポーネント

このチュートリアルを完了するための要件は次のとおりです。

Visual Studio または Visual Studio Express for Web がコンピューターにインストールされている。

注意

Visual Studio を使用する場合、このチュートリアルでは、Visual Studio の初回の起動時に [Web 開発] 設定コレクションを選択したことを前提とします。詳細については、「方法: Web 開発環境の設定を選択する」を参照してください。
Visual Studio での作業方法の一般的な知識。

Visual Studio での Web フォームページの作成方法の概要については、「チュートリアル: Visual Studio での基本的な Web フォームページの作成」を参照してください。

Web サイトと Web フォームページの作成

Visual Studio または Visual Studio Express for Web で既に Web フォームサイトを作成している場合 (たとえば「チュートリアル: Visual Studio での基本的な Web フォームページの作成」の完了によって作成した場合) は、その Web サイトを使用できるので、次のセクションに進むことができます。それ以外の場合は、次の手順に従って、Web サイトと Web フォームページを作成します。

注意

このチュートリアルでは、Web サイトプロジェクトを使用します。代わりに、Web アプリケーションプロジェクトを使用することもできます。これらの Web プロジェクトの種類の違いについては、「Web アプリケーションプロジェクトと Web サイトプロジェクト」を参照してください。

ファイルシステム Web サイトを作成するには

Visual Studio または Visual Studio Express for Web を開きます。
[ファイル] メニューの [新しい Web サイト] をクリックします。

[新しい Web サイト] ダイアログボックスが表示されます。
[インストール済み] の [Visual Basic] または [Visual C#] をクリックし、[ASP.NET 空の Web サイト] をクリックします。

このチュートリアルでは、ビルド済みのページまたはその他のリソースを含まない Web サイトを作成します。
[Web の場所] ボックスで、[ファイルシステム] をクリックし、Web サイトのページを格納するフォルダーの名前を入力します。

たとえば、フォルダー名として「C:\WebSites」と入力します。
[OK] をクリックします。

Visual Studio によって、Web.config ファイルを含む Web サイトプロジェクトが作成されます。
ソリューションエクスプローラーで、Web サイトのルートを右クリックし、[新しい項目の追加] をクリックします。
[Web フォーム] を選択し、ファイルに「Default.aspx」という名前を付けて [追加] をクリックします。

デザインビューでの作業

チュートリアルのこのセクションでは、Web フォームページを WYSIWYG のように表示できるデザイン ビューでの作業方法を説明します。テキストは、ワードプロセッシングプログラムと同様にキー入力できます。テキストを直接書式指定するには、書式指定コマンドを使用するか、またはインラインスタイルを作成します。

デザイン ビューには、ブラウザーとほぼ同様にページが表示されます。ただし、多少相違があります。 1 つ目の相違点は、デザイン ビューではテキストと要素を編集できることです。 2 つ目の相違点は、ページを編集しやすくするために、デザイン ビューにはブラウザーに表示されない要素とコントロールが表示されます。また、HTML テーブルのような一部の要素向けには、エディター用の領域が追加された特殊なデザイン ビューが表示されます。全般的に、デザイン ビューではページを視覚化できますが、ブラウザーでのページの表示状態が正確に反映されるわけではありません。

デザインビューで静的 HTML を追加して書式指定するには

デザイン ビューで表示していない場合は、ウィンドウの左下にある [デザイン] をクリックします。
ページの最上部に「ASP.NET Web Page」と入力します。
テキストを強調表示して選択し、[書式設定] ツールバーの [見出し 1] をクリックします。
ASP.NET Web Page というテキストの後ろにカーソルを置き、Enter キーを押してから、「This page is powered by ASP.NET」と入力します。
テキストを強調表示し、[書式設定] メニューの [新しいスタイル] をクリックします。

[新しいスタイル] ダイアログボックスが表示されます。
[新しいスタイルをドキュメントの選択範囲に適用する] オプションを選択します。
[font-family] ボックスの一覧でフォントを選択し、[適用] をクリックします。

選択されているテキストにフォントファミリが適用されます。
[カテゴリ] の [ブロック] をクリックし、[line-height] ボックスの一覧の [(値)] をクリックします。行の高さを指定する値を入力します。
[letter-spacing] ボックスの一覧の [(値)] をクリックします。文字間のスペースを指定する値を入力します。 [適用] をクリックして、選択されているテキストに適用された値を確認します。
[OK] をクリックします。

タグ情報の表示

デザイン ビューで作業する場合、div や span などのデザインサーフェイスタグ、およびその他の視覚的に表示されない要素を表示すると便利です。

デザインビューで HTML デザインサーフェイスタグを表示するには

[表示] メニューの [視覚補助] をポイントし、[ASP.NET 非ビジュアルコントロール] が選択されていることを確認します。

デザイナーに、段落、改行などのテキストとして表示されないタグに対する記号が表示されます。これらの記号はすべて同時には表示されませんが、ビジュアル要素をクリックすると、その前にある非ビジュアル要素が表示されます。

コントロールと要素の追加

デザイン ビューでは、ツールボックスからページにコントロールをドラッグできます。ダイアログボックスを使用して HTML テーブルなどの要素を追加できます。このセクションでは、コントロールとテーブルを追加し、チュートリアルの後半で作業に使用する要素を作成します。

コントロールとテーブルを追加するには

"This page is powered by ASP.NET" というテキストの右側にカーソルを置き、Enter キーを押します。
[ツールボックス] の [標準] グループから、TextBox コントロールをページにドラッグし、前の手順で作成した領域にドロップします。

注意

コントロールをダブルクリックして追加することもできます。
Button コントロールをページにドラッグし、前の手順で追加した TextBox コントロールの右側にドロップします。

TextBox コントロールと Button コントロールは、HTML 要素ではなく、ASP.NET Web サーバーコントロールです。
Button コントロールの右側にカーソルを置き、Enter キーを押します。
[テーブル] メニューの [テーブルの挿入] をクリックします。

[表の挿入] ダイアログボックスが表示されます。
[OK] をクリックします。

[表の挿入] ダイアログボックスには、作成するテーブルの設定オプションが表示されます。ただし、このチュートリアルでは、既定のテーブルレイアウトを使用できます。

ハイパーリンクの作成

デザイン ビューには、プロパティ設定が必要な HTML 要素を作成しやすくするためのビルダーなどのツールが用意されています。

ハイパーリンクを作成するには

テキスト "This page is powered by ASP.NET" の "ASP.NET" を強調表示して選択します。
[書式] メニューの [ハイパーリンクに変換] をクリックします。

[ハイパーリンク] ダイアログボックスが表示されます。
[URL] ボックスに「https://www.asp.net」と入力します。
[OK] をクリックします。

[プロパティ] ウィンドウでのプロパティの設定

ページの要素の外観や動作を変更するには、[プロパティ] ウィンドウで値を設定します。

[プロパティ] ウィンドウを使用してプロパティを設定するには

このチュートリアルの「コントロールと要素の追加」のセクションで追加した Button コントロールをクリックします。
[プロパティ] ウィンドウで [Text] を「Click Here」に設定し、[ForeColor] を別の色に設定します。
前のセクションで作成した [ASP.NET] ハイパーリンクにカーソルを置きます。

[プロパティ] ウィンドウで、a 要素の hreef プロパティが、ハイパーリンクに指定した URL に設定されます。

ページのテスト

編集結果を表示するには、ブラウザーでページを表示します。

ブラウザーで外部からページを起動するには

ページを右クリックし、[ブラウザーで表示] をクリックします。

変更を保存するかを確認するメッセージが表示されたら、[はい] をクリックします。

Visual Studio によって IIS Express が起動されます。このローカル Web サーバーを使用することにより、IIS サーバー全体を使用せずにページをテストできます。

注意

ページを実行する方法は数種類あります。Ctrl キーを押しながら F5 キーを押すと、[開始オプション] のプロパティページで設定した開始動作が Visual Studio によって実行されます。既定では、Ctrl + F5 キーに起動オプションとして現在のページの実行が指定されています。現在のページとは、ソース ビューまたはデザイン ビューで現在アクティブなページです。ページをデバッガーで実行することもできます。詳細については、「チュートリアル: Visual Web Developer での Web ページのデバッグ」を参照してください。

既定のビューの変更

既定では、Visual Studio は、ソース ビューで新しいページを開きます。

既定のページビューをデザインビューに変更するには

[ツール] メニューの [オプション] をクリックします。
ダイアログボックスの下部で [すべての構成の表示] オプションが選択されていることを確認します。
[HTML デザイナー] ノードを開き、[全般] をクリックします。 [ページを開始するビュー] の [デザインビュー] をクリックします。

ソースビューでの作業

ソース ビューでは、ページのマークアップを直接編集できます。 ソース ビューエディターには、HTML コントロールと ASP.NET コントロールを作成しやすくするための機能が多数組み込まれています。 デザイン ビューの場合と同様に、ソース ビューのツールボックスを使用して、ページに新しい要素を追加できます。

ソースビューで要素を追加するには

ウィンドウの下部にある [ソース] をクリックしてソース ビューに切り替えます。

追加したコントロールは、<asp:> 要素として作成されます。たとえば、Button コントロールは <asp:button> 要素です。設定したプロパティ設定は、<asp:button> 開始タグの属性設定として保存されます。
ツールボックスの ([標準] グループではなく) [HTML] グループから Table 要素をページにドラッグし、</form> 終了タグのすぐ上に配置します。

このエディターは、マークアップを手動で入力する場合にも便利です。たとえば、このエディターでは、入力内容に合わせて HTML の終了タグや属性の候補が表示されます。また、このエディターでは、問題があると思われるマークアップの下に波線が表示され、そのエラー情報や警告情報が表示されます。マークアップテキスト上にマウスポインターを合わせると、エラー情報や警告情報を表示できます。

ソースビューで HTML を編集するには

カーソルを </form> 終了タグの上に置き、左山かっこ (<) を入力します。

現在のコンテキストに適したタグの一覧がエディターに表示されます。
「a」を入力してアンカータグを作成し、Space キーを押します。

アンカータグに適した属性の一覧がエディターに表示されます。

注意

文字 "a" (アンカー要素) は、サイトまたはページに設定されている検証ターゲットによっては、オプションとして表示されない可能性があります。ただし、その場合でも、ドロップダウンリスト内の項目を選択せずに「a」を入力することで、アンカー要素を作成できます。検証ターゲットについては、後ほどこのトピックで説明します。
一覧の [href] をクリックし、等号 (=) と二重引用符 (") を入力します。

エディターには、現在リンクできるページの一覧が表示されます。
ファイル一覧の [Default.aspx] をダブルクリックし、Space キーを押し、右山かっこ (>) を入力してタグを閉じます。

エディターによって </a> 終了タグが挿入されます。
開始タグと終了タグの間に「Home」と入力して、アンカー要素を完成します。

この要素は、現時点では、次の例のようになります。
```
<a href="Default.aspx">Home</a>
```
</form> という終了タグの上にカーソルを置き、「<invalid>」と入力します。

エディターでタグに波線の下線が表示されます。この下線は、このタグが HTML タグとして認識されないことを表します。
前の手順で作成したタグを削除します。

HTML 書式指定の検査

ページデザイナーの重要な機能は、ページに適用された HTML の書式を保持することです。ただし、エディターがドキュメントの書式を再設定するように明示的に指定できます。

HTML 書式指定を検査するには

次のような宣言構文を指定して Button コントロールの属性を整列させ、この属性を再設定します。
```
<asp:Button
    id="Button1"
    runat="server"
    Font-Bold="True"
    ForeColor="Blue"
    Text="Click Here" />
```
最初の属性にインデントを設定した後にタグ内にカーソルを合わせて Enter キーを押すと、後続の行にも同様にインデントが設定されます。
デザイン ビューに切り替えます。
Button コントロールを右クリックし、[コピー] をクリックします。
新しい Button コントロールの下にカーソルを置き、右クリックして、[貼り付け] をクリックします。

Visual Studio は、ID プロパティが Button2 に設定されたボタンを作成します。
Toolbox の [標準] グループから、3 番目の Button コントロールをページにドラッグします。これにより Button3 という名前のボタンが作成されます。
ソース ビューに切り替えます。

Button1 の書式とまったく同様に Button2 が書式指定されます。一方、Button3 は、Button コントロールの既定の書式指定を使用して書式指定されます。

注意

各要素の書式指定をカスタマイズする方法の詳細については、「チュートリアル: Web フォームページの Visual Studio での HTML の高度な編集」を参照してください。
次の例に示すようにドキュメントを編集して、Button1 と Button2 が同じ行にスペースなしで配置されるようにします。
```
<asp:Button ID="Button1" runat="server" Font-Bold="True" 
ForeColor="Blue" Text="Click Here" /><asp:Button ID="Button2" 
runat="server" Font-Bold="True" ForeColor="Blue" Text="Click Here"/>
```
要素を折り返すことはできますが、Button2 の先頭は Button1 の末尾 (/> 文字) の直後に続ける必要があります。
デザイン ビューに切り替えます。

Button1 と Button2 が隣どうしに間隔を空けずに表示されます。
ソース ビューに切り替えます。
[編集] メニューの [詳細] をポイントし、[ドキュメントのフォーマット] をクリックします。

ドキュメントが再設定されます。ただし、Button1 と Button2 は、引き続き同じ行に表示されます。エディターでボタンが分離される場合、表示中に空白が導入されます。そのため、作成した書式指定がエディターによって変更されることはありません。

分割ビューでの作業

分割ビューを使用すると、デザイン ビューウィンドウとソース ビューウィンドウを同時に表示できます。

分割ビューでページを表示するには

ウィンドウの左下にある [並べて表示] をクリックして、分割ビューに切り替えます。 ソース ビューウィンドウが画面の上半分に、デザイン ビューウィンドウが下半分に表示されます。 2 つのビューは同期されます。どちらかのビューで項目を選択すると、他方のビューで対応する項目が強調表示されます。

要素間の移動

ページが大きく複雑になるほど、タグをすぐに見つけたり、ページを整理したりできると便利です。 Visual Studio には、ソース ビューでこれらの作業を実行するときに役立つ次のツールが用意されています。

ドキュメントアウトライン。ドキュメント全体が表示されます。
タグナビゲーター。現在選択されているタグの情報とページ階層構造でのそのタグの位置が表示されます。

まず、ナビゲーション機能を検査できるように、ページに要素をさらに追加します。

要素を追加するには

デザイン ビューに切り替えます。
ツールボックスの [HTML] グループから、このチュートリアルの「ソースビューでの作業」で作成したテーブルのセル内に Table コントロールをドラッグします。
ツールボックスの [標準] グループから、入れ子になったテーブルの中央のセル内に Button コントロールをドラッグします。

このページの入れ子になったいくつかの要素を使用して、ドキュメントアウトラインによってページ内のタグにどの程度速く移動できるかを確認できます。

ドキュメントアウトラインを使用して移動するには

ソース ビューに切り替えます。
[表示] メニューの [ドキュメントアウトライン] をクリックします。
[ドキュメントアウトライン] の [Button4] をクリックします。

エディターでは、前の手順で追加した <Button4> コントロールが選択されています。

タグナビゲーターでは、現在選択されているタグの情報とページ階層構造でのそのタグの位置が表示されます。

タグナビゲーターを使用して移動するには

Button 要素内にカーソルを置きます。

ウィンドウの下部にあるタグナビゲーターに <asp:button> タグとその親タグが表示されていることに注目してください。要素の ID がある場合、表示中の要素を識別しやすいようにタグナビゲーターにその ID が表示されます。 Class 属性を使用して設定されたカスケードスタイルシートが割り当てられている場合、タグナビゲーターには、そのシートも表示されます。
タグナビゲーターで、<asp:button#Button4> タグの最も近くにある <table> タグをクリックします。

タグナビゲーターが内側の <table> 要素に移動し、その要素が選択されます。
タグナビゲーターで、選択した <table> タグの左側にある <td> タグをクリックします。

入れ子になったテーブルに含まれるセル全体が選択されます。

注意

タグナビゲータータグ内のドロップダウンリストを使用して、タグまたはその内容をクリックして選択できます。既定では、タグナビゲーター内のタグをクリックすると、そのタグと内容が選択されます。

タグナビゲーターを使用して、要素を移動またはコピーすることもできます。

タグナビゲーターを使用して要素を移動またはコピーするには

タグナビゲーターを使用して、Button4 コントロールを含む <tr> タグを選択します。
Ctrl キーを押しながら C キーを押して、タグをコピーします。
タグナビゲーターを使用して外側のテーブルに移動します。
ソース ビューで、<table> タグと最初の <tr> タグの間にカーソルを置きます。
Ctrl キーを押しながら V キーを押して、コピーした行をテーブルに貼り付けます。
デザイン ビューに切り替えます。

Button コントロールを含む新しい行が追加されます。

テキストの書式設定

[書式設定] ツールバーでは、ほとんどの設定に対してインラインスタイルを適用できます。太字書式と斜体書式を適用するには、b タグと i タグを使用します。段落書式を適用するには p (通常の場合)、pre (書式指定済みの場合) などのブロックタグを使用します。段落揃えを適用するには、XHTML 1.1 標準に準拠したインラインスタイルを使用します。
デザイナーでは、style ブロック、およびカスケードスタイルシートへのリンクも作成できます。詳細については、「チュートリアル : CSS ファイルの作成と変更」を参照してください。
既定では、エディターは XHTML5 標準と互換性のあるマークアップを作成します。エディターは、大文字で入力された場合でも、すべての HTML タグ名を小文字に変換します。また、エディターでは、属性 (プロパティ) 値が二重引用符で囲まれます。詳細については、「チュートリアル: Web フォームページの Visual Studio での HTML の高度な編集」を参照してください。

既定のマークアップ検証を変更するには

ソース ビューでページの任意の場所を右クリックし、[書式と入力規則] をクリックします。
[オプション] ダイアログボックスで、[テキストエディター] を展開し、[HTML] を展開し、[検証] をクリックします。
[ターゲット] ボックスに検証タイプを入力します。

次の手順

このチュートリアルでは、Web ページエディターの HTML 機能の概要を説明しています。これには、デザイン ビューとソース ビューでの HTML 作成方法、基本的な書式指定、およびナビゲーションについての説明が含まれます。 Visual Studio の編集機能に関する詳細については、次のリソースを参照してください。

カスタムの書式指定オプション、アウトライン表示、HTML 検証などの HTML エディターのその他の機能ついては、「チュートリアル: Web フォームページの Visual Studio での HTML の高度な編集」を参照してください。
カスケードスタイルシートを使用してスタイルを操作する方法については、「チュートリアル : CSS ファイルの作成と変更」を参照してください。

参照

処理手順

チュートリアル: Web フォームページの Visual Studio での HTML の高度な編集

概念

デザインビュー

チュートリアル: Web フォーム ページの Visual Studio での Web ページのコード編集