チュートリアル : Visual Web Developer での基本的な HTML 編集
更新 : 2007 年 11 月
Microsoft Visual Web Developer の Web 開発ツールには豊富な HTML 編集機能が用意されており、Web ページを視覚化する WYSIWYG モードで作業したり、HTML マークアップを直接操作して詳細に調整したりできます。このチュートリアルでは、Visual Web Developer の HTML 編集機能について紹介します。
このチュートリアルでは、以下のタスクを行います。
デザイン ビューでの HTML の作成と編集
ソース ビューでの HTML の作成と編集
分割ビューの使用
ナビゲーション ツールによる HTML タグ間の迅速な移動
前提条件
このチュートリアルを実行するための要件は次のとおりです。
- Visual Web Developer の基本的な知識
Visual Web Developer での Web ページの作成の概要については、「チュートリアル : Visual Web Developer での基本的な Web ページの作成」を参照してください。
このチュートリアルでは、1 つの Web サイトと「チュートリアル : Visual Web Developer での基本的な Web ページの作成」で作成したような 1 つの ASP.NET Web ページを使用して作業します。そのチュートリアルを完了している場合は、その Web サイトとページを使用できます。
Web サイトおよびページの作成
「チュートリアル : Visual Web Developer での基本的な Web ページの作成」などを完了して Visual Web Developer で既に Web サイトを作成済している場合は、その Web サイトを使用して、次のセクションに進むことができます。それ以外の場合は、次の手順に従って、新しい Web サイトおよびページを作成します。
ファイル システム Web サイトを作成するには
Visual Web Developer を開きます。
[ファイル] メニューの [新しい Web サイト] をクリックします
[新しい Web サイト] ダイアログ ボックスが表示されます。
[Visual Studio にインストールされたテンプレート] の [ASP.NET Web サイト] をクリックします。
[場所] ボックスに、Web サイトのページを格納するフォルダの名前を入力します。
たとえば、フォルダ名として「C:\WebSites」と入力します。
[言語] ボックスで、作業に使用するプログラミング言語をクリックします。
[OK] をクリックします。
Visual Web Developer によりフォルダが作成され、Default.aspx という名前の新しいページが作成されます。
デザイン ビューでの作業
チュートリアルのこのセクションでは、ページを WYSIWYG のように表示できるデザイン ビューでの作業方法を説明します。テキストは、ワード プロセッシング プログラムと同様にキー入力できます。テキストを直接書式指定するには、書式指定コマンドを使用するか、またはインライン スタイルを作成します。
デザイン ビューには、ブラウザとほぼ同様にページが表示されます。ただし、多少相違があります。1 つ目の相違点は、デザイン ビューではテキストと要素を編集できることです。2 つ目の相違点は、ページを編集しやすくするために、デザイン ビューにはブラウザに表示されない要素とコントロールが表示されます。また、HTML テーブルのような一部の要素向けには、エディタ用の領域が追加された特殊なデザイン ビューが表示されます。全般的に、デザイン ビューではページを視覚化できますが、ブラウザでのページの表示状態が正確に反映されるわけではありません。
デザイン ビューで静的 HTML を追加して書式指定するには
デザイン ビューで表示していない場合は、ウィンドウの左下にある [デザイン] をクリックします。
ページの最上部に「ASP.NET Web Page」と入力します。
テキストを強調表示して選択し、[スタイルの適用] ツール バーの [見出し 1] をクリックします。
カーソルを [ASP.NET Web Page] の下に置き、「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 コントロールをページにドラッグします。
.gif "メモ")
メモ :コントロールをダブルクリックして追加することもできます。
Button コントロールをページにドラッグします。
TextBox コントロールと Button コントロールは、HTML 要素ではなく、ASP.NET Web サーバー コントロールです。
[テーブル] メニューの [テーブルの挿入] をクリックします。
[表の挿入] ダイアログ ボックスが表示されます。
[OK] をクリックします。
[表の挿入] ダイアログ ボックスには、作成するテーブルの設定オプションが表示されます。ただし、このチュートリアルでは、既定のテーブル レイアウトを使用できます。
ハイパーリンクの作成
デザイン ビューには、プロパティ設定が必要な HTML 要素を作成しやすくするためのビルダーなどのツールが用意されています。
ハイパーリンクを作成するには
テキスト "This page is powered by ASP.NET." の ASP.NET を強調表示して選択します。
[書式] メニューの [ハイパーリンクに変換] をクリックします。
[ハイパーリンク] ダイアログ ボックスが表示されます。
[URL] ボックスに「https://www.asp.net」と入力します。
[OK] をクリックします。
[プロパティ] ウィンドウでのプロパティの設定
ページの要素の外観や動作を変更するには、[プロパティ] ウィンドウで値を設定します。
[プロパティ] ウィンドウを使用してプロパティを設定するには
このチュートリアルの「コントロールと要素の追加」のセクションで追加した Button コントロールをクリックします。
[プロパティ] で Text を Click Here に、ForeColor を別の色に、Bold を true に設定します。
前のセクションで作成した [ASP.NET] ハイパーリンクにカーソルを置きます。
[プロパティ] で、a 要素の HRef プロパティが、ハイパーリンクに指定した URL に設定されます。
ページのテスト
編集結果を表示するには、ブラウザでページを表示します。
ブラウザで外部からページを起動するには
ページを右クリックし、[ブラウザで表示] をクリックします。
- 変更を保存するかを確認するメッセージが表示されたら、[はい] をクリックします。
Visual Web Developer によって Visual Web Developer Web サーバーが起動されます。このローカル Web サーバーを使用することにより、IIS を使用せずにページをテストできます。
既定のビューの変更
既定では、Visual Web Developer のソース ビューで新しいページが開きます。
既定のページ ビューをデザイン ビューに変更するには
[ツール] メニューの [オプション] をクリックします。
[オプション] ダイアログ ボックスで、[全般] をクリックし、[ページを開始するビュー] の [デザイン ビュー] をクリックします。
| メモ : |
|---|
ページを実行する方法は数種類あります。Ctrl キーを押しながら F5 キーを押すと、[開始オプション] のプロパティ ページで設定した開始動作が Visual Web Developer によって実行されます。既定では、Ctrl + F5 キーに起動オプションとして現在のページの実行が指定されています。現在のページとは、ソース ビューまたはデザイン ビューで現在アクティブなページです。ページをデバッガで実行することもできます。詳細については、「チュートリアル : Visual Web Developer での Web ページのデバッグ」を参照してください。 |
ソース ビューでの作業
ソース ビューでは、ページのマークアップを直接編集できます。ソース ビュー エディタには、HTML コントロールと ASP.NET コントロールを作成しやすくするための機能が多数組み込まれています。デザイン ビューの場合と同様に、ソース ビューのツールボックスを使用して、ページに新しい要素を追加できます。
ソース ビューで要素を追加するには
ウィンドウの左下にある [ソース] をクリックしてソース ビューに切り替えます。
追加したコントロールは、<asp:> 要素として作成されます。たとえば、Button コントロールは <asp:button> 要素です。設定したプロパティ設定は、<asp:button> タグの属性設定として保存されます。
ツールボックスの ([標準] グループではなく) [HTML] グループから Table コントロールをページにドラッグし、</form> 終了タグのすぐ上に配置します。
このエディタは、マークアップを手動で入力する場合にも便利です。たとえば、このエディタでは、入力内容に合わせて HTML の終了タグや属性の候補が表示されます。また、このエディタでは、問題があると思われるマークアップの下に波線が表示され、そのエラー情報や警告情報が表示されます。エラー情報や警告情報を表示するには、マークアップ テキスト上にマウス ポインタを合わせます。
ソース ビューで HTML を編集するには
カーソルを </form> 終了タグの上に置き、左山かっこ (<) を入力します。
現在のコンテキストに適したタグの一覧がエディタに表示されます。
"a" を強調表示して選択し、Space キーを押します。
アンカー タグに適した属性の一覧がエディタに表示されます。
一覧の [href] をクリックし、等号と二重引用符 (=") を入力します。
現在リンク先として使用できるページの一覧と [プロジェクト項目の選択] ダイアログ ボックスを開くためのオプションがエディタに表示されます。
ファイル一覧の [Default.aspx] をダブルクリックし、Space キーを押して、右山かっこ (>) を入力してタグを閉じます。
エディタによって </a> 終了タグが挿入されます。
リンク テキストの Home を使用して Default.aspx ページにリンクするために、次のように入力して、アンカー要素を終了します。
<a href="Default.aspx">Home</a>カーソルを a タグに置きます。
[プロパティ] にタグの属性が表示されます。
[プロパティ] で HRef プロパティについて省略記号ボタン ([…]) をクリックします。
[プロジェクト項目の選択] ダイアログ ボックスが表示されます。
ここで、ターゲット ページとして現在の Web サイトのページを選択します。選択できる他のページが Web サイトにない場合、[プロジェクト項目の選択] ダイアログ ボックスを閉じ、[プロパティ] ウィンドウの [Href] ボックスに任意の URL を入力します。
</form> 終了タグの上にカーソルを置き、「<invalid>」と入力します。
エディタでタグに波線の下線が表示されます。この下線は、このタグが HTML タグとして認識されないことを表します。
前の手順で作成したタグを削除します。
HTML 書式指定の検査
ページ デザイナの重要な機能として、エディタでドキュメントを再設定するように明示的に指定した場合を除き、ページに適用する HTML 書式指定を保存できる機能があります。
HTML 書式指定を検査するには
次のような宣言構文を指定して Button コントロールの属性を整列させ、この属性を再設定します。
<asp:Button id="Button1" runat="server" Font-Bold="True" ForeColor="Blue" Text="Click Here" />最初の属性にインデントを設定した後にタグ内にカーソルを合わせて Enter キーを押すと、後続の行にも同様にインデントが設定されます。
デザイン ビューに切り替えます。
新しい Button コントロールを右クリックし、[コピー] をクリックします。
新しい Button コントロールの下にカーソルを置き、右クリックして、[貼り付け] をクリックします。
これにより、Button2 の ID を持つボタンが作成されます。
ツールボックスの [標準] グループから、3 番目の Button コントロールをページにドラッグします。これにより <Button3> が作成されます。
ソース ビューに切り替えます。
<Button1> の書式とまったく同様に <Button2> が書式指定されます。一方、<Button3> は、asp:button 要素の既定の書式指定を使用して書式指定されます。
メモ :各要素の書式指定をカスタマイズする方法の詳細については、「チュートリアル : Visual Web Developer での高度な 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"/>要素を折り返すことはできますが、<Button1> の末尾 (/>) に続けて <Button2> の先頭 (<asp:Button ID=) を指定する必要があります。
デザイン ビューに切り替えます。
<Button1> と <Button2> が隣どうしに間隔を空けずに表示されます。
ソース ビューに切り替えます。
[編集] メニューの [ドキュメントのフォーマット] をクリックします。
ドキュメントが再設定されます。ただし、<Button1> と <Button2> は、引き続き同じ行に表示されます。エディタでボタンが分離される場合、表示中に空白が導入されます。そのため、作成した書式指定がエディタによって変更されることはありません。
分割ビューでの作業
分割ビューを使用すると、デザイン ビュー ウィンドウとソース ビュー ウィンドウを同時に表示できます。
分割ビューでページを表示するには
- ウィンドウの左下にある [並べて表示] をクリックして、分割ビューに切り替えます。
要素間の移動
ページが大きく複雑になるほど、タグをすぐに見つけたり、ページを整理したりできると便利です。Visual Web Developer には、ソース ビューでこれらの作業を実行するときに役立つ次のツールが用意されています。
ドキュメント アウトライン。ドキュメント全体が表示されます。
タグ ナビゲータ。現在選択されているタグの情報とページ階層構造でのそのタグの位置が表示されます。
まず、ナビゲーション機能を検査できるように、ページに要素をさらに追加します。
要素を追加するには
デザイン ビューに切り替えます。
ツールボックスの [HTML] グループから、このチュートリアルの「ソース ビューでの作業」で作成したテーブルのセル内に Table コントロールをドラッグします。
ツールボックスの [標準] グループから、入れ子になったテーブルの中央のセル内に Button コントロールをドラッグします。
このページの入れ子になったいくつかの要素を使用して、ドキュメント アウトラインによってページ内のタグにどの程度速く移動できるかを確認できます。
ドキュメント アウトラインを使用して移動するには
ソース ビューに切り替えます。
[表示] メニューの [ドキュメント アウトライン] をクリックします。
[ドキュメント アウトライン] の [Button4] をクリックします。
エディタでは、前の手順で追加した <Button4> コントロールが選択されています。
タグ ナビゲータでは、現在選択されているタグの情報とページ階層構造でのそのタグの位置が表示されます。
タグ ナビゲータを使用して移動するには
カーソルを <asp: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 ファイルの作成と変更」を参照してください。
既定では、XHTML 1.1 標準と互換性があるマークアップがエディタで作成され、すべての HTML タグ名は大文字で入力した場合でも小文字に変換されます。また、エディタでは、属性 (プロパティ) 値が引用符で囲まれます。詳細については、「チュートリアル : Visual Web Developer での高度な HTML 編集」を参照してください。
既定のマークアップ検証を変更するには
ソース ビューでページの任意の場所を右クリックし、[書式と入力規則] をクリックします。
[オプション] ダイアログ ボックスで、[テキスト エディタ] を展開し、[HTML] を展開して、[検証] をクリックします。
[ターゲット] ボックスに検証タイプを入力します。
次の手順
このチュートリアルでは、Web ページ エディタの HTML 機能の概要を説明しています。これには、デザイン ビューとソース ビューでの HTML 作成方法、基本的な書式指定、およびナビゲーションについての説明が含まれます。Visual Web Developer での編集機能について、より詳細な学習が必要な場合もあります。たとえば、次のような作業について学習できます。
カスタムの書式指定オプション、アウトライン表示、HTML 検証などの HTML エディタのその他の機能の学習。詳細については、「チュートリアル : Visual Web Developer での高度な HTML 編集」を参照してください。
カスケード スタイル シートの操作方法の学習。詳細については、「チュートリアル : CSS ファイルの作成と変更」を参照してください。
参照
処理手順
チュートリアル : Visual Web Developer での高度な HTML 編集