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

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

Microsoft Visual Studio は、Web ページを作成するための豊富な HTML 編集機能を備えています。このチュートリアルでは、Visual Studio のいくつかの高度な HTML 編集機能について説明します。 HTML の基本的な編集については、「チュートリアル: Web フォームページの Visual Studio での Web ページのコード編集」を参照してください。

注意

このトピックの例は、ASP.NET Web フォームページに固有のものです。ただし、Web フォームページ、ASP.NET MVC (モデルビューコントローラー) ビュー、ASP.NET Web ページページ、HTML ページでマークアップの HTML 書式設定オプションを使用できます。

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

HTML エディターがソース ビューでマークアップを表示する方法のオプションを指定します。
ページの作成に使用する HTML エディターと HTML5 などの特定のスキーマ (マークアップ標準) が互換性を持つようオプションを選択します。
ページをアウトライン表示にします。つまり、エディターの領域を折りたためるようにして、表示を簡素化します。

必須コンポーネント

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

Visual Studio での作業方法の基本的な知識。

Visual Studio の概要については、「チュートリアル: Web フォームページの Visual Studio での Web ページのコード編集」を参照してください。

Web サイトおよびページの作成

(「チュートリアル: Web フォームページの Visual Studio での Web ページのコード編集」を完了するなどして) Visual Studio で既に Web フォームプロジェクトを作成してある場合は、次のセクションに進んでください。それ以外の場合は、次の手順に従って、Web プロジェクトおよびページを作成します。

ファイルシステム Web サイトプロジェクトを作成するには

Visual Studio を開きます。
[ファイル] メニューの [新規作成] をポイントし、[Web サイト] をクリックします。

[新しい Web サイト] ダイアログボックスが表示されます。

注意

このチュートリアルでは、Web サイトプロジェクトを使用します。代わりに、Web アプリケーションプロジェクトを使用することもできます。これらの Web プロジェクトの種類の違いについては、「Web アプリケーションプロジェクトと Web サイトプロジェクト」を参照してください。
[インストールされたテンプレート] の下で、使用するプログラミング言語を選択します。
テンプレートペインで、[ASP.NET Web フォームサイト] を選択します。
[場所] ボックスに、Web サイトのページを格納するフォルダーの名前を入力します。

たとえば、フォルダー名として「C:\WebSites」と入力します。
[OK] をクリックします。
ソリューションエクスプローラーで、Web サイト名を右クリックし、[新しい項目の追加] を選択します。
[インストールされたテンプレート] で、使用する言語を選択します。
[テンプレート] ペインで [Web フォーム] を選択します。
[追加] を選択します。

マークアップの書式指定

HTML エディターには、ページのマークアップの書式を指定するための豊富なオプションが用意されており、必要に応じて使用できます。主な書式指定オプションには次のものがあります。

タグと属性名の大文字と小文字の指定。 HTML のタグと ASP.NET Web サーバーコントロールに別々にオプションを設定できます。
追加する属性を、引用符で囲むかどうかの指定。
エディターで自動的に要素を閉じるかどうかの指定。終了タグ (たとえば、<br />) を自動的に生成するか、開始タグと終了タグ (<p></p>) を生成するか、終了タグを自動的に挿入するかなどのオプションがあります。
タグの子要素のインデント方法。
タグの前後での改行位置。

いずれの書式指定オプションを選択したかにかかわらず、エディターのマークアップの最終的なレイアウトと表示方法はユーザーが決定できます。要素を手動で書式設定できます (インデントなど)。ユーザーがマークアップの再書式設定を明示的に要求しない限り、エディターでの書式設定は変更されません。

チュートリアルのこのセクションでは、マークアップのエディターでの表示に影響する設定を変更し、これらの変更による影響を確認します。また、ページ全体、またはページの中の選択した範囲に対する書式指定についても説明します。

既定の書式指定オプションを持つ HTML 要素を追加するには

デザイン ビューに切り替えます。
[テーブル] メニューの [テーブルの挿入] をクリックします。このダイアログボックスでは、既定の設定値を一切変更しないでください。
[OK] をクリックします。

デザイナーにより、2 列 2 行の HTML テーブルが作成されます。
テーブルの下で、作業するページをクリックします。
Enter キーを何度か押して、空白を作成します。次に、ツールボックスの [HTML] グループから Image コントロールをページにドラッグします。
ソース ビューに切り替えます。

<table> 要素と <img> 要素がページに挿入されています。 <img> 要素が強調表示されます。

既定では、デザイナーで作成される要素は、タグと属性名は小文字で記述され、属性は引用符で囲まれます。

次に、書式指定オプションを変更できます。

書式指定オプションと検証オプションを変更するには

[ツール] メニューの [オプション] をクリックします。
[テキストエディター] をクリックし、[HTML] を展開し、[検証] をクリックします。
[ターゲット] ボックスの一覧の [HTML5] を選択します。

注意

検証対象に手動で新しいページの既定のスキーマを選択する代わりに、[スキーマ検出の検証に doctype を使用] を選択できます。このオプションは、検証に使用するスキーマを決定するためにページの DOCTYPE 宣言を使用するように Visual Studio に指示します。このチュートリアルでは、ターゲットのスキーマの選択がエディターの動作に及ぼす影響がわかるように、このチェックボックスをオフにしたままにします。
[書式設定] を選択します。

前の手順で [HTML5] を選択したので、[クライアントタグ] および [クライアント属性] ボックスが使用できるようになっています。 [ターゲット] の設定を [XHTML5] のままにしておくと、XHTML5 では小文字を使用する必要があるので、これら 2 つのボックスは小文字に設定され、使用できなくなります。

注意

特定のサーバータグ (ASP.NET サーバーコントロール) とクライアントタグ (HTML 要素) の一部のオプションは、[タグ指定オプション] をクリックして個別に設定できます。この機能は後で使用します。
[クライアントタグ] オプションを [大文字] に設定します。
[入力中に属性値の引用符を挿入する] チェックボックスと [フォーマット中に属性値の引用符を挿入する] チェックボックスをオフにします。
[OK] をクリックして、エディターに戻ります。

書式指定オプションを変更したにもかかわらず、ページにある既存のマークアップには変化がありません。

次に新しい要素を追加します。

新しい書式指定オプションを使用して HTML 要素を追加するには

ソース ビューで、ページの最後までスクロールします。
ツールボックスの [HTML] グループから Table コントロールをページにドラッグし、</form> タグの上に配置します。

ここでは、<TABLE> 要素のタグが大文字で表示されます。
作成したテーブルの下にカーソルを置き、新しいタグの始まりの左山かっこ (<) を入力します。

すべてのタグ名が大文字で書かれた一覧が表示されます。これは、それを既定値にしたためです。
「img」と小文字で入力します。

IMG と大文字で一覧に表示され、タグの新しい既定の大文字小文字の区別が反映されます。
Space キーを押します。

<IMG が大文字でページに入力され、タグの属性の一覧が表示されます。ここでは属性は小文字で表記されています。これは、書式指定オプションで [クライアント属性] を既定の設定である [小文字形式] のままとしたためです。
「src=」と入力します。

通常、エディターは等号の後で二重引用符の組を提供します。ただし、[入力中に属性値の引用符を挿入する] オプションを無効にしたため、エディターは引用符を提供しません。

注意

ただし、空白が含まれている属性値を [プロパティ] ウィンドウで入力した場合は、オプションの設定にかかわらず、属性は引用符で囲まれます。
「Graphic.gif」と入力します (架空のファイル名)。

タグは次のようになります。
```
<IMG src=Graphic.gif 
```
スラッシュ (/) と右山かっこ (>) を入力して、<img> タグを閉じます。または、スペースと右山かっこを入力すると、エディターがスラッシュを自動的に入力します。

書式オプションを変更しても、ページの既存のマークアップは影響を受けません。ただし、ページやページのどの部分にでも書式設定を手動で追加できます。

書式指定を既存の要素に適用するには

ソース ビューで、作成した最初のテーブルを選択します (小文字のマークアップでのもの)。
[編集] メニューの [書式の選択] をクリックします。

タグ名が、大文字に変換されます。

注意

引用符を削除するようにオプションを設定しても、引用符は自動的に削除されません。同様に、既存のタグの終了方法を指定するオプションを変更しても、既存のタグの終了方法は変更されません。

ツールボックスやプロパティなどの編集ツールを使用して要素を編集した場合、エディター上では現在の書式指定オプションに基づいてマークアップが生成されます。ただし、エディターが既存のマークアップを変更することはありません。既存のマークアップに新しい書式オプションを適用するには、[編集] メニューの [ドキュメントのフォーマット] と [選択範囲のフォーマット] を使用します。

タグの書式指定オプションの設定

ここまでに学習した書式指定オプションは、ページ上のすべての要素に適用されます。必要に応じて、書式指定オプションを個々のタグに適用することもできます。この方法は、頻繁に使用する特定のタグがあり、しかも、そのタグに対し既定の書式以外の書式を指定する場合に便利です。個々のタグに対する書式指定では、次の書式指定オプションを使用します。

タグの閉じ方 (閉じない、自己終了、終了タグの使用)
タグの前後と内側での改行方法
タグの子要素のインデント方法。

注意

HTML エディターは、タグの内容がブラウザーに表示される方法を変更するタグの表示の設定を無視します。

チュートリアルのこの部分では、タグの複数の書式オプションを設定します。ここまでで、<table> 要素などの HTML 要素について学習しました。ここで、いくつかの ASP.NET Web サーバーコントロールを操作して、書式指定オプションがコントロールと要素に同じように適用されることを確認します。

まず、特定の種類のタグ全体に適用されるオプションを設定します。次の種類の要素にオプションを設定できます。

br や input などの、内容がない HTML 要素。
table や span などの、内容がある HTML 要素。
asp:image などの、内容を含むことができないサーバー要素 (asp:)。
asp:textbox などの、内容を含むことができるサーバー要素。

セキュリティに関するメモ
TextBox コントロールはユーザー入力を受け付けますが、これはセキュリティ上の脅威になる可能性があります。既定では、ASP.NET Web ページによって、ユーザー入力にスクリプトまたは HTML 要素が含まれていないかどうかが検証されます。詳細については、「スクリプトによる攻略の概要」を参照してください。

TextBox コントロールはユーザー入力を受け付けますが、これはセキュリティ上の脅威になる可能性があります。既定では、ASP.NET Web ページによって、ユーザー入力にスクリプトまたは HTML 要素が含まれていないかどうかが検証されます。詳細については、「スクリプトによる攻略の概要」を参照してください。

このセクションでは、まず HTML テーブルを追加します。次に、テーブル要素のタグ書式指定規則を変更し、文書の書式を変更して、その効果を確認します。

HTML テーブルのタグ書式指定規則を設定するには

ソース ビューで、ウィンドウの何も表示されていない部分を右クリックし、[書式と入力規則] をクリックします。

注意

[書式と入力規則] は、ソース ビューでのみ使用できます。

[オプション] ダイアログボックスが開き、前のセクションで設定した書式指定オプションが表示されます。
[クライアントタグ] ボックスの [小文字形式] をクリックして、クライアントタグの書式指定をリセットします。
[OK] をクリックして、[オプション] ダイアログボックスを閉じます。
ツールボックスの [HTML] グループから、Table コントロールをソース ビューにドラッグします。

エディターに、3 つの行 (<tr> 要素) で構成され、各行に 3 つのセル (<td> 要素) がある <table> 要素が作成されます。個々のタグは、別々の行に表示されます。
```
<table>
    <tr>
        <td>
            &nbsp;
       </td>
    </tr>
```
ウィンドウの何も表示されていない部分を右クリックし、[書式と入力規則] をクリックします。
[タグ指定オプション] をクリックします。
[既定の設定] を展開します。

タグの種類の一覧が表示されます。先頭に [クライアントタグはコンテンツをサポートしない] があります。 [既定の設定] では、内容がある要素 (table 要素など) と内容がない要素 (img 要素など) に対し、クライアント要素とサーバー要素に異なるオプションを設定できます。
[クライアントタグはコンテンツをサポートする] をクリックします。

既定の設定では、タグには個別の終了タグが使用されており、また、タグの前後と内側に改行がある点に注意してください。
[クライアント HTML タグ] を展開します。
[td] を選択します。

td タグの書式指定方法を変更するオプションを設定します。
[改行] ボックスの [なし] をクリックします。
[OK] をクリックして [タグ指定オプション] ダイアログボックスを閉じ、次に [OK] をクリックして [オプション] ダイアログボックスを閉じます。
[編集] メニューの [ドキュメントのフォーマット] をクリックします。

ドキュメントの書式指定が変更されました。テーブルに追加した <td> タグが、1 行に配置されています。

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