チュートリアル : Visual Web Developer での高度な HTML 編集
更新 : 2007 年 11 月
Microsoft Visual Web Developer の Web 開発ツールは、Web ページを作成するための豊富な HTML 編集機能を備えています。このチュートリアルでは、Visual Web Developer のいくつかの高度な HTML 編集機能について説明します。
.gif "メモ") メモ : |
|---|
HTML の基本的な編集については、「チュートリアル : Visual Web Developer での基本的な HTML 編集」を参照してください。 |
このチュートリアルでは、以下のタスクを行います。
HTML エディタで、ページに含まれる要素の書式を指定するオプションを指定します。
ページの作成に使用する HTML エディタと特定のブラウザが互換性を持つようオプションを選択します。
ページをアウトライン表示にします。つまり、エディタの領域を折りたためるようにして、表示を簡素化します。
前提条件
このチュートリアルを実行するための要件は次のとおりです。
- Visual Web Developer の基本的な操作方法を理解していること。
Visual Web Developer の概要については、「チュートリアル : Visual Web Developer での基本的な HTML 編集」を参照してください。
Web サイトおよびページの作成
(「チュートリアル : Visual Web Developer での基本的な HTML 編集」の手順に従って) 既に Visual Web Developer を使用して Web サイトを作成している場合は、次のセクションに進んでください。それ以外の場合は、次の手順に従って、新しい Web サイトおよびページを作成します。
ファイル システム Web サイトを作成するには
Visual Web Developer を開きます。
[ファイル] メニューの [新規作成] をポイントし、[Web サイト] をクリックします。
[新しい Web サイト] ダイアログ ボックスが表示されます。
[Visual Studio にインストールされたテンプレート] の [ASP.NET Web サイト] をクリックします。
[場所] ボックスに、Web サイトのページを格納するフォルダの名前を入力します。
たとえば、フォルダ名として「C:\WebSites」と入力します。
[言語] ボックスで、作業に使用するプログラミング言語をクリックします。
[OK] をクリックします。
Visual Web Developer によりフォルダが作成され、Default.aspx という名前の新しいページが作成されます。
メモ :Visual Web Developer により、既定で、分離コード モデルの ASP.NET Web ページが作成されます。詳細については、「ASP.NET Web ページのコード モデル」を参照してください。ただし、このチュートリアルでは、分離コード ページは使用しません。
マークアップの書式指定
HTML エディタには、ページのマークアップの書式を指定するための豊富なオプションが用意されており、必要に応じて使用できます。主な書式指定オプションには次のものがあります。
タグと属性名の大文字と小文字の指定。HTML のタグと ASP.NET Web サーバー コントロールに別々にオプションを設定できます。
追加する属性を、引用符で囲むかどうかの指定。
エディタで、終了タグを自動的に生成するかどうかの指定。終了タグ (たとえば、<br />) を自動的に生成するか、開始タグと終了タグ (<p></p>) を生成するか、終了タグを自動的に挿入するかなどのオプションがあります。
タグの子要素のインデント方法。
タグの前後での改行位置。
いずれの書式指定オプションを選択したかにかかわらず、HTML の書式指定に関して重要なことは、ページのマークアップの最終的なレイアウトと表示方法はユーザーが決定できるという点です。ユーザーが要素の書式を手動で設定すると (たとえば、要素のインデントを指定)、ユーザーが明示的にマークアップの書式の変更を指定しない限り、エディタによってその書式が変更されることはありません。
ここでは、さまざまな書式指定オプションについて学習し、それぞれの設定の効果を確認します。また、ページ全体、またはページの中の選択した範囲に対する書式指定についても説明します。
| メモ : |
|---|
このチュートリアルでは、HTML の操作に固有の書式指定機能に絞って紹介します。Visual Web Developer テキスト エディタである HTML エディタは、タブのサイズや行の折り返しの設定など、あらゆるテキスト編集に使用できる多くのオプションもサポートしています。一般的なテキスト編集オプションについては、「テキスト、コード、およびマークアップの編集」を参照してください。 |
ここでは、簡単な HTML をページに追加し、書式指定オプションを変更して、HTML を追加します。この操作により、設定を変更すると、HTML の書式がどのように変化するかを理解できます。
既定の書式指定オプションを持つ HTML 要素を追加するには
デザイン ビューに切り替えます。
[テーブル] メニューの [テーブルの挿入] をクリックし、[OK] をクリックします。
このダイアログ ボックスでは、既定の設定値を一切変更しないでください。
デザイナにより、2 列 2 行の HTML テーブルが作成されます。
テーブルの下で、作業するページをクリックします。
Enter キーを何度か押して、空白を作成します。次に、ツールボックスの [HTML] グループから Image コントロールをページにドラッグします。
ソース ビューに切り替えます。
ページに挿入された <table>要素と <img> 要素を確認できます。
既定では、デザイナで作成される要素は、タグと属性名は小文字で記述され、属性は引用符で囲まれます。
次に、書式指定オプションを変更できます。
書式指定オプションと検証オプションを変更するには
[ツール] メニューの [オプション] をクリックします。
[テキスト エディタ] をクリックし、[HTML] を展開し、[検証] をクリックします。
[ターゲット] ボックスの [XHTML 1.0 Transitional] をクリックします。
[書式] をクリックします。
サーバー タグ (ASP.NET サーバー コントロール) とクライアント タグ (HTML 要素) の一部のオプションは、[タグ指定オプション] ボタンをクリックして個別に設定できます。
[クライアント タグ] ボックスの [大文字形式] をクリックします。
[フォーマット中に属性値の引用符を挿入する] チェック ボックスと [入力中に属性値の引用符を挿入する] チェック ボックスをオフにします。
[OK] をクリックして、エディタに戻ります。
書式指定オプションを変更したにもかかわらず、ページにある既存のマークアップには変化がありません。
次に新しい要素を追加します。
新しい書式指定オプションを使用して HTML 要素を追加するには
ソース ビューで、ページの最後までスクロールします。
ツールボックスの [HTML] グループから Table コントロールをページにドラッグし、</form> タグの上に配置します。
ここでは、<TABLE> 要素のタグが大文字で表示されます。
作成したテーブルの下にカーソルを置き、新しいタグの始まりの左山かっこ (<) を入力します。
すべてのタグ名が大文字で書かれた一覧が表示されます。これは、書式指定で大文字を指定するオプションを選択したからです。
この一覧の [IMG] をダブルクリックし、Space キーを押します。
<img> タグの属性の一覧が表示されます。ここでは属性は小文字で表記されています。これは、書式指定オプションで [クライアント属性] を既定の設定である [小文字形式] のままとしたからです。
[プロパティ] の [Src] を graphic.gif に設定します。これは、作成されたグラフィック ファイルの名前です。タグが次のように表示されることを確認します。
<IMG src=graphic.gif前の手順で [入力中に属性値の引用符を挿入する] チェック ボックスをオフにしたので、属性が自動的に引用符で囲まれることはありません。
メモ :ただし、属性値に空白が含まれている場合のように引用符が必要とされる場合は、オプションの設定にかかわらず、属性は引用符で囲まれます。
スラッシュ (/) と右山かっこ (>) を入力して、<img> タグを閉じます。
このセクションの始めに説明したように、設定した書式指定オプションはページの既存のマークアップに反映されていません。ただし、反映する必要がある場合は、書式指定をページ、またはページ内の個々の要素に反映させることができます。
書式指定を既存の要素に適用するには
ソース ビューで、作成した最初のテーブルを強調表示して選択します。
[編集] メニューの [詳細] をポイントし、[選択範囲のフォーマット] をクリックします。
タグ名が、大文字に変換されます。
メモ :引用符を削除するようにオプションを設定しても、引用符は自動的に削除されません。同様に、既存のタグの終了方法を指定するオプションを変更しても、既存のタグの終了方法は変更されません。
この例で、HTML エディタにおける書式指定のしくみを理解できます。ツールボックスやプロパティなどの編集ツールを使用して要素を編集した場合、エディタ上では現在の書式指定オプションに基づいてマークアップが生成されます。ただし、エディタが既存のマークアップを変更することはありません。既存のマークアップに対して新しい書式指定を適用する必要がある場合は、手動で [編集] メニューのコマンドを使用します。
タグの書式指定オプションの設定
ここまでに学習した書式指定オプションは、ページ上のすべての要素に適用されます。必要に応じて、書式指定オプションを個々のタグに適用することもできます。これは、頻繁に使用する特定のタグがあり、しかも、そのタグに対し既定の書式以外の書式を指定する場合に便利です。個々のタグに対する書式指定では、次の書式指定オプションを使用します。
タグの閉じ方 (閉じない、自己終了、終了タグの使用)
タグの前後と内側での改行方法
タグの子要素のインデント方法
メモ :HTML エディタはタグの表示を変更しないという原則により、指定したタグ固有の書式指定規則がオーバーライドされる可能性があります。タグの書式指定規則でタグの表示方法を変更すると、この原則は無視されます。
ここでは、いくつかのタグ書式指定オプションを設定して、エディタでどのように表示されるかを確認します。ここまでで、<table> 要素などの HTML 要素について学習しました。ここで、いくつかの ASP.NET サーバー コントロールを操作して、書式指定オプションがコントロールと要素に同じように適用されることを確認します。
まず、特定の種類のタグ全体に適用されるオプションを設定します。次の種類の要素にオプションを設定できます。
br や input などの、内容がない HTML 要素。
table や span などの、内容がある HTML 要素。
asp:image などの、内容を含むことができないサーバー要素 (asp:)。
asp:textbox などの、内容を含むことができるサーバー要素。
.gif "セキュリティに関するメモ") セキュリティに関するメモ : |
|---|
TextBox コントロールはユーザー入力を受け付けますが、これはセキュリティ上の脅威になる可能性があります。既定では、ASP.NET Web ページは、ユーザー入力にスクリプトまたは HTML 要素が含まれていないことを検証します。詳細については、「スクリプトによる攻略の概要」を参照してください。 |
このセクションでは、まず HTML テーブルを追加します。次に、テーブル要素のタグ書式指定規則を変更し、文書の書式を変更して、その効果を確認します。
HTML テーブルのタグ書式指定規則を設定するには
ソース ビューで、ウィンドウの何も表示されていない部分を右クリックし、[書式と入力規則] をクリックします。
[オプション] ダイアログ ボックスが開き、前のセクションで設定した書式指定オプションが表示されます。
[クライアント タグ] ボックスの [小文字形式] をクリックして、クライアント タグの書式指定をリセットします。
[OK] をクリックして、[オプション] ダイアログ ボックスを閉じます。
ツールボックスの [HTML] グループから、Table コントロールをページにドラッグします。
エディタに、2 つの行 (<tr> 要素) で構成され、各行に 2 つのセル (<td> 要素) がある <table> 要素が作成されます。個々のタグは、別々の行に表示されます。
<table> <tr> <td> </td> </tr>ウィンドウの何も表示されていない部分を右クリックし、[書式と入力規則] をクリックします。
[タグ指定オプション] をクリックします。
[既定の設定] を展開します。
タグの種類の一覧が表示されます。先頭に [クライアント タグはコンテンツをサポートしない] があります。一覧から項目を選択することにより、内容がある要素 (table 要素など) と内容がない要素 (img 要素など) に対し、クライアント要素とサーバー要素に異なるオプションを設定できます。
[クライアント タグはコンテンツをサポートする] をクリックします。
既定の設定では、タグには個別の終了タグが使用されており、また、タグの前後と内側に改行がある点に注意してください。
[クライアント HTML タグ] を展開します。
[td] をクリックします。
td タグの書式指定方法を変更するオプションを設定します。
[改行] ボックスの [なし] をクリックします。
[OK] をクリックして [タグ指定オプション] ダイアログ ボックスを閉じ、次に [OK] をクリックして [オプション] ダイアログ ボックスを閉じます。
[編集] メニューの [詳細] をポイントし、[ドキュメントのフォーマット] をクリックします。
ドキュメントの書式指定が変更されました。テーブルに追加した <td> タグが、1 行に配置されています。
<table> <tr> <td></td><td></td><td></td>
ASP.NET サーバー コントロールのタグ固有オプションを操作できます。
ASP.NET サーバー コントロールの書式指定オプションを設定するには
デザイン ビューに切り替えます。
ツールボックスの [標準] グループから、ListBox コントロールをページにドラッグします。
[ListBox タスク] ダイアログ ボックスで、[項目の編集] をクリックします。
[ListItem コレクション エディタ] ダイアログ ボックスが表示されます。
2 つの項目について [追加] をクリックして、その 2 つの項目を追加します。
[メンバ] の最初の [ListItem] をクリックし、次に [ListItem プロパティ] の [テキスト] を「Item 1」に設定します。
[メンバ] の最初の [ListItem] をクリックし、次に [ListItem プロパティ] の [テキスト] を「Item 2」に設定します。
[OK] をクリックして [ListItem コレクション エディタ] ダイアログ ボックスを閉じます。
ソース ビューに切り替えます。
このコントロールは、次のように書式指定されています。
<asp:Listbox ID="ListBox1" runat="server"> <asp:ListItem>Item 1</asp:Listitem> <asp:ListItem>Item 2</asp:Listitem> </asp:Listbox>ウィンドウの何も表示されていない部分を右クリックし、[書式と入力規則] をクリックします。
[タグ指定オプション] をクリックします。
[タグ指定オプション] ダイアログ ボックスで、[ASP.NET コントロール] をクリックし、次に [新しいタグ] をクリックします。
[タグ名] ボックスに「asp:listitem」と入力します。
タグ名で、左右の山かっこ (< と >) は使用しないでください。
ListBox コントロールの内側に使用されている asp:ListItem 要素のオプションを設定します。しかし、asp:ListBox 要素のオプションは設定しません。今の作業は、asp:ListBox 要素の内容 (子) の書式指定方法を制御することが目的だからです。
[OK] をクリックして、[新しいタグ] ダイアログ ボックスを閉じます。
[改行] ボックスの [なし] をクリックします。
これで、コントロールの内側で改行が発生しません。
[OK] をクリックして [タグ指定オプション] ダイアログ ボックスを閉じ、次に [OK] をクリックして [オプション] ダイアログ ボックスを閉じます。 これで、新しい書式指定オプションの効果を確認できます。
新しい書式指定オプションを使用して ASP.NET サーバー コントロールを追加するには
デザイン ビューに切り替えます。
ツールボックスの [標準] グループから、2 番目の ListBox コントロールをページにドラッグします。
[ListBox タスク] メニューの [項目の編集] をクリックします。
この前の手順で行ったように、ListBox コントロールに 2 つの項目を作成します。
ソース ビューに切り替えます。
<asp:ListItem> 要素は、すべて 1 行に記述されています。タグの折り返しが 80 字に設定されているので、</asp:ListBox> 要素は、次の行に記述されています。この値は、[オプション] ダイアログ ボックスで変更できます。 ここでは、たった 2 つのコントロールを作成し、書式指定オプションの 1 つ (改行) を変更しただけですが、通常使用する要素にオプションを適用する方法がわかりました。
要素のアウトライン表示
ソース ビューで要素をアウトライン表示にすると、要素を折りたたんだり、展開したりできるので、その要素を操作していないときに邪魔になりません。テーブルのような広い面積を占めることの多い要素をアウトライン表示にすると、特に便利です。この折りたたみ機能は、ページ内のすべての要素に適用できます。
要素をアウトライン表示にするには
ソース ビューに切り替えます。
前の手順で追加したテーブルの 1 つを選択します。
- 既にテーブルを削除してしまった場合は、ツールボックスの [HTML] グループからテーブルをページにドラッグします。
[編集] メニューの [アウトライン] をポイントし、[選択範囲の非表示] をクリックします。
<table> タグが折りたたまれ、マージンに正符号 (+) が表示されます。
この正符号をクリックすると、テーブル要素を展開できます。 また、要素が一定のサイズより大きくなると、自動的に正符号 (+) とマイナス記号 (-) がマージンに表示されるように、設定することもできます。
要素が自動的にアウトライン表示になるように設定するには
ページを右クリックし、[書式と入力規則] をクリックして、[書式] をクリックし、次に [タグ指定オプション] をクリックします。
[タグ指定オプション] ダイアログ ボックスで [クライアント HTML タグ] を展開し、[table] をクリックします。
[コード エディタのアウトライン] の下にある [最小行数] ボックスに「5」と入力します。
[OK] をクリックし、さらに [OK] をクリックします。
既存のテーブルと後から追加された新しいテーブルについて、サイズが 5 行を超えると自動的にアウトラインが表示されます。
HTML の検証
HTML エディタには、HTML の検証、つまり、HTML が特定のブラウザの規則、または XHTML などの規格に準拠していることを確認する機能があります。たとえば、Netscape Navigator 4.0 では使用できないタグや属性、または XHTML 規格に準拠していないタグや属性を検出できます。 ここでは、いくつかのスキーマ (ブラウザの種類や規格) を使用します。そして、異なる種類の小さなエラーを使って、エディタでエラーにフラグが立てられるしくみについて説明します。
エディタで検証をテストするには
ソース ビューで Default.aspx ページを開くか、このページに切り替えます。
[HTML ソースの編集] ツール バーの一覧の [Internet Explorer 3.02/Netscape Navigator 3.0] をクリックします。
ページの下部までスクロールします。
</form> タグの中に、次の HTML を入力します。
<font face=arial> <a href=Default.aspx >Default Page </a> </font>入力すると、Microsoft IntelliSense の機能によりタグが補完されます。
[HTML ソースの編集] ツール バーの一覧の [XHTML 1.0 Transitional (Netscape 7, Opera 7, Internet Explorer 6)] をクリックします。
少し間をおいて (バックグラウンド タスクとして検証が実行されているため)、タグのあちこちに赤い波線の下線が表示されます。スペル チェック機能と同様に、HTML 検証機能により、現在選択しているブラウザで使用できないマークアップがページ内で検出されます。
<font> タグで、マウス ポインタを font という単語の上に置きます。
この font 要素は既に使われていないことを指摘するツールヒントが表示されます。現在の規格は、テキストの書式指定にカスケード スタイル シート スタイルを使用するよう推奨しています。たとえば、<span style="font-name:Arial;"> などと表示されます。
<a> タグの href 属性で、マウス ポインタを Default.aspx の上に置きます。
ツールヒントが表示され、現在のスキーマでは、属性を引用符で囲む必要があることが指摘されます。
Default.aspx を引用符で囲みます。
href 属性の値に引かれていた下線が表示されなくなります。アンカー タグ、または URL を必要とするその他のタグに相対参照を指定すると、検証により対象の要素の有無が判断されます。
作業中の HTML の下の行に、左山かっこ (<) を入力します。
IntelliSense のドロップダウン リストが表示されますが、font は表示されません。それは、font 要素が XHTML スキーマでは有効ではないためです。
左山かっこ (<) を削除します。
検証オプションの設定
検証で示されるエラーの種類を制御できます。この機能は、エラーが特定のスキーマでは許容される場合であっても、特定の種類のエラーを検証で検出する場合に便利です。
検証オプションを設定するには
ソース ビューでページの任意の場所を右クリックし、[書式と入力規則] をクリックします。
メモ :[書式と入力規則] コマンドは、ソース ビューでのみ使用できます。
[オプション] ダイアログ ボックスで、[検証] をクリックします。
[エラーの表示] チェック ボックスのオン、オフの指定にかかわらず、チェック ボックスのエラー表示は無効となります。これは、現在のスキーマが XHTML であり、すべての起こり得る検証エラーが既に表示されているためです。
[ターゲット] ボックスの [Internet Explorer 6.0] をクリックします。
[エラーの表示] チェック ボックスがオンであることを確認し、[エラーの表示] の下で、すべてのチェック ボックスをオンにします。
[OK] をクリックして、エディタに戻ります。
前の手順で入力した HTML を選択し、次に [編集] メニューの [大文字に変換] をクリックします。
少し間を置いて、タグ名に下線が表示されます。マウス ポインタをタグ名の上に置くと、この名前には大文字が使われていることを示すツールヒントが表示されます。一般的に Internet Explorer 6 では大文字のタグ名を使用できますが、このスキーマの検証オプションを変更したために検証エラーが表示されました。
検証により、重複したコントロール ID、逆に配置された開始タグと終了タグ (たとえば、<b><i></b></i>) など、他の多くの種類のエラーも検出できます。ただし、エディタでの検証機能にかかわらず、ユーザーは自由に HTML コードを作成できます。検証は、あくまでも、指定されたブラウザの規則に準拠しないマークアップを見つけ出すための機能です。
ASP.NET ページを実行すると、出力には、作成した HTML 要素だけではなく、ASP.NET サーバー コントロールによって表示される HTML や、ページに書き込まれるコードも含まれます。検証では、これらの動的な要素の出力は検査できません。つまり、エディタでは、生成された出力の妥当性を検証することはできません。ASP.NET コントロールは既定で、XHTML 1.1 規格に準拠した出力を生成します。つまり、この出力は、ほとんどのブラウザに対応しています。ASP.NET コントロールにより生成されるマークアップの詳細については、「ASP.NET と XHTML」を参照してください。
次の手順
このチュートリアルでは、HTML エディタの高度な機能の一部について説明しました。このチュートリアルではすべての機能を紹介できませんでしたが、書式指定オプション、アウトライン表示、および検証を使用することで、整形式の、カスタム書式が指定されたマークアップを容易に作成できること、しかもユーザーは最終的にマークアップを制御できることを理解しました。
参照
概念
Visual Web Developer でのマークアップ検証