Visual Web Developer の HTML エディタでの要素の書式指定
更新 : 2007 年 11 月
HTML デザイナでは、HTML エディタを使用して、要素の書式指定を簡単に行うことができます。このトピックでは、マークアップ要素を操作するためのエディタの書式指定機能について説明します。
既定の書式指定
既定では、HTML エディタで、マークアップをどのようにでも書式指定できます。このとき、改行とインデントは入力された状態のまま維持されます。エディタには、要素の書式指定をサポートする機能が含まれています。たとえば、Tab キーを押して行をインデントすると、以降の行も同じようにインデントされます。Shift キーを押しながら Tab キーを押すと、行のインデントを削除できます。ページに適用する書式指定は、ソース ビューとデザイン ビューを切り替えても維持されます。
ソース ビューでエディタがタブをどのように扱うかについて、基本的なオプションを設定できます。詳細については、「[タブ] ([オプション] ダイアログ ボックス - [テキスト エディタ] - [HTML])」を参照してください。
また、入力時に自動的に引用符や終了タグを挿入するオプションもあります。詳細については、「[書式] ([オプション] ダイアログ ボックス - [テキスト エディタ] - [HTML])」を参照してください。
書式指定と現在のスキーマ
大文字小文字の設定、または属性を囲む引用符の使用など、特定の書式指定オプションは、エディタに対して選択したスキーマによってオーバーライドできます。たとえば、スキーマとして XHTML 1.1 Strict を選択すると、このスキーマでは小文字名しか許可しないので、エディタは、大文字のタグ名と属性名を小文字に変換します。
書式指定オプションの指定
要素を作成すると、デザイナは、開発者が設定できる特定のオプションを使用して新しい要素を書式指定します。たとえば、既定では、クライアント要素 (HTML タグなど) は小文字のタグ名で作成されます。次の場合、書式指定オプションが適用されます。
ツールボックスからページにコントールをドラッグしたとき
IntelliSense を使用してソース ビューにタグを作成したとき
[プロパティ] ウィンドウまたプロパティ ビルダで値を設定したとき
クリップボードから要素を貼り付けたとき
デザイン ビューで [表の挿入] ダイアログ ボックスなどのダイアログ ボックスを使用してマークアップを生成したとき
手動で選択項目またはドキュメントを書式指定したとき
書式指定オプションの設定方法の詳細については、「[書式] ([オプション] ダイアログ ボックス - [テキスト エディタ] - [HTML])」および「[その他] ([オプション] ダイアログ ボックス - [テキスト エディタ] - [HTML])」を参照してください。
個々のタグに対する書式指定オプション
個々のタグに対しても書式指定オプションを設定できます。これらのオプションによって、個々のタグのマークアップが書式指定される方法をカスタマイズできます。タグ固有の書式指定によって、次のことを設定できます。
タグの閉じ方 (閉じない、自己終了、終了タグの使用)
タグを囲む改行およびタグ内の改行
タグのインデント方法
アウトライン オプション
エディタ内のタグの色付け
詳細については、「[タグ指定オプション]」を参照してください。
任意時点での書式指定
[編集] メニューまたはショートカット メニューの [ドキュメントのフォーマット] を使用して、ドキュメントまたは選択項目に対していつでも書式指定できます。このメニューにある書式指定用の他のオプションには、選択項目を大文字または小文字に変換するオプション、スペースをタブに変換するオプション ([選択部分にタブを設定])、またはタブをスペースに変換するオプション ([選択部分のタブの設定を解除]) があります。大文字小文字の変換時など明示的に規則をオーバーライドしない限り、手動で書式指定すると、設定済みの書式指定オプションが使用されます。書式指定オプションを変更した場合、ドキュメントを再書式指定することにより、変更したオプションを既存のマークアップに適用できます。
空白保持規則
エディタの書式指定プロセスは、空白をブラウザにレンダリングする規則を優先します。したがって、エディタは、変更後の要素の書式指定により、ページのレンダリング方法が変わるような変更は行いません。特に、タグ間にスペースのないマークアップを記述している場合、エディタのこの動作は顕著です。
たとえば、ページに 2 つの HTML ボタンの次のようなマークアップが含まれているとします。
<input type="button" id="b1"><input type="button" id="b2">
ページがレンダリングされると、2 つのボタンはその間にスペースが入らない状態で表示されます。エディタでドキュメントを書式指定する場合、2 つのタグを別々の行に配置したいとします。しかし、この 2 つのタグを 2 行に配置しようとしても、ページをレンダリングすると、ボタン間にスペースが生成されることから、エディタはタグを移動しません。手動でタグ間にスペースを挿入した場合は、書式指定によりスペースを改行に変更できます。これは、再書式指定が、ブラウザへのボタンのレンダリング方法に影響しないためです。
その他にも、内容と終了タグの間については、書式指定より空白規則が優先されます。たとえば、ドキュメントに次の table 要素が 1 行で含まれているとします。
<table><tr><td>Hello, World</td></tr></table>
ドキュメントを手動で再書式指定した場合、結果は次のようになります。
<table>
<tr>
<td>
Hello, World</td>
</tr>
</table>
終了 </td> タグは次の行に移動していません。これは、この移動が、そのセルのレンダリングに影響するためです。"Hello, World" と </td> タグの間に手動でスペースを挿入してからドキュメントを再書式指定した場合、終了タグは次の行に移動されます。
コード インラインの書式指定
通常、ASP.NET Web ページ内のクライアント スクリプトとサーバー コードは、その言語エディタの規則に従って書式指定されます。キャリッジ リターン動作、改行生成、インデントなどはすべて個々の言語フォーマッタによって規定されています。たとえば、Visual Basic 言語フォーマッタは、自動的に Function 宣言の後に行を挿入します。
ソース ビューでは、スクリプト ブロックは、それぞれの親要素に対して 1 レベル分インデントされます。<%#、<%$、または <%= で始まるインライン式は、入力したとおりになり、書式指定されません。ただし、それぞれが <% %> 区切り記号で区切られたステートメントのブロックを入力した場合、適切な言語のインデント規則を使用する 1 つのブロックであるかのように書式指定されます。