チュートリアル : Visual Web Developer での基本的な Web ページの作成

[アーティクル]
10/22/2014

更新 : 2007 年 11 月

このチュートリアルでは、Microsoft Visual Web Developer について紹介します。Visual Web Developer を使用した簡単なページの作成方法、および新しいページの作成、コントロールの追加、コードの記述に関する基本的な手法について説明します。

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

ファイルシステム Web サイトの作成
Visual Web Developer の操作の学習
Visual Web Developer を使用した 1 ファイルで構成される ASP.NET ページの作成
コントロールの追加
イベントハンドラの追加
Visual Web Developer における Web サーバーでのページの実行

前提条件

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

Visual Web Developer
.NET Framework

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

チュートリアルのこの部分では、Web サイトを作成し、そこに新しいページを追加します。また、Web ブラウザで HTML テキストを追加し、ページを実行します。

このチュートリアルでは、ファイルシステム Web サイトを作成しますが、Microsoft Internet Information Services (IIS) は使用しません。その代わりに、ローカルファイルシステムで Web ページを作成して実行します。

ファイルシステム Web サイトは、ユーザーのローカルコンピュータ上にあるフォルダに、ページやその他のファイルを格納します。その他の Web サイトオプションには、ローカル IIS Web サイトがあります。この場合は、ローカル IIS ルート (通常は、\Inetpub\Wwwroot\) のサブフォルダにファイルを格納します。FTP サイトは、インターネット上で、ファイル転送プロトコル (FTP: File Transfer Protocol) を使用してアクセスするリモートサーバー上にファイルを格納します。リモートサイトは、ローカルネットワーク経由でアクセスできるリモートサーバー上にファイルを格納します。詳細については、「チュートリアル : Visual Web Developer での FTP による Web サイトの編集」を参照してください。また、Web サイトファイルは、Visual SourceSafe などのソースコントロールシステムにも格納できます。詳細については、「ソース管理の概要」を参照してください。

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

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

[新しい Web サイト] ダイアログボックスが次のスクリーンショットのように表示されます。

[新しい Web サイト] ダイアログボックス
[Visual Studio にインストールされたテンプレート] の [ASP.NET Web サイト] をクリックします。

Web サイトを作成するときに、テンプレートを指定します。個々のテンプレートは、それぞれ異なるファイルとフォルダを格納する Web アプリケーションの作成に使用します。このチュートリアルでは、[ASP.NET Web サイト] テンプレートを使用して Web サイトを作成します。このとき、いくつかのフォルダといくつかの既定のファイルが作成されます。
[場所] ボックスで、[ファイルシステム] ボックスをクリックし、Web サイトのページを格納するフォルダの名前を入力します。

たとえば、フォルダ名として「C:\BasicWebSite」と入力します。
[言語] ボックスの [Visual Basic] または [Visual C#] をクリックします。

ここで選択するプログラミング言語が、Web サイトの既定の言語となります。ただし、複数のプログラミング言語でページとコンポーネントを作成すると、1 つの Web アプリケーションで複数の言語を使用できます。
[OK] をクリックします。

Visual Web Developer により、フォルダと Default.aspx という名前の新しいページが作成されます。新しいページが作成されると、既定で Visual Web Developer のソースビューにそのページが表示され、ページの HTML 要素を確認できます。次のスクリーンショットは、既定の Web ページのソースビューを示したものです。

既定のページのソースビュー

Visual Web Developer の概要

このページの操作についての説明を進める前に、Visual Web Developer 開発環境の概要を説明します。次の図は、Visual Web Developer で使用するウィンドウやツールを示しています。

Visual Web Developer 環境のダイアグラム
IDE ウィンドウとツールの概略図

Visual Web Developer の Web デザイナを理解するには

前の図をよく観察して、図中のテキストと、次に記述する、よく使用するウィンドウとツールについての説明の一覧とを照合してください (ここでは、すべてのウィンドウとツールについて説明しているわけではなく、前の図でマークしたものについてのみ説明しています)。

ツールバー。テキストの書式指定、検索などのコマンドを提供します。一部のツールバーは、デザインビューで作業する場合にのみ表示されます。
ソリューションエクスプローラ。Web サイトのフォルダとファイルを表示します。
ドキュメントウィンドウ。タブ付きのウィンドウでの作業時にドキュメントを表示します。タブをクリックすると、ドキュメント間を移動できます。
[プロパティ] ウィンドウ。ページ、HTML 要素、コントロール、その他のオブジェクトの設定を変更できます。
[表示] タブ。各ドキュメントのさまざまなビューを表示します。デザイン ビューは、WYSIWYG に近い表示機能を持った編集サーフェイスです。ソース ビューは、ページの HTML エディタとして使用できます。分割ビューには、ドキュメントのデザイン ビューとソース ビューの両方が表示されます。デザイン ビューとソース ビューの操作方法は、後でこのチュートリアルで説明します。Web ページをデザイン ビューで開くには、[ツール] メニューの [オプション] をクリックし、[HTML デザイナ] ノードを選択して、[ページを開始するビュー] オプションを変更します。
ツールボックス。ここに表示されるコントロールと HTML 要素は、ページにドラッグできます。ツールボックス内の要素は、共通の機能ごとにグループ化されています。

サーバーエクスプローラ/データベースエクスプローラ。データベース接続を表示します。Visual Web Developer にサーバーエクスプローラが表示されない場合は、[表示] メニューの [サーバーエクスプローラ] または [データベースエクスプローラ] をクリックします。

メモ :
これらのウィンドウについては、使用しやすいように再整列やサイズ変更を実行できます。[表示] メニューからは、追加のウィンドウを表示できます。

新しい Web フォームページの作成

新しい Web サイトを作成する場合は、Visual Web Developer により Default.aspx という名前の ASP.NET ページ (Web フォームページ) が追加されます。Default.aspx ページを Web サイトのホームページとして使用できます。ただし、このチュートリアルでは、別に新しいページを作成して作業します。

Web サイトに新しいページを追加するには

Default.aspx ページを閉じます。この操作を実行するには、ファイル名が表示されているタブを右クリックし、[閉じる] を選択します。
ソリューションエクスプローラで、Web サイト (たとえば、[C:\BasicWebSite]) を右クリックし、[新しい項目の追加] をクリックします。
[Visual Studio にインストールされたテンプレート] の [Web フォーム] をクリックします。次のスクリーンショットは、[新しい項目の追加] ダイアログボックスを示したものです。

[新しい項目の追加] ダイアログボックス
[プロジェクト名] ボックスに「FirstWebPage」と入力します。
[言語] ボックスで、使用するプログラミング言語を選択します ([Visual Basic]、[C#]、または [J#])。Web サイトを作成したときに、既定の言語を指定しています。ただし、Web サイトに新しいページやコンポーネントを作成するたびに、既定の言語を別の言語に変更できます。同じ Web サイトで、複数のプログラミング言語を使用できます。
[別のファイルにコードを書き込む] チェックボックスをオフにします。

このチュートリアルでは、コードと HTML が同じページにある、単一ファイルのページを作成します。ASP.NET ページのコードは、同じページ上に置くことも、別のクラスファイルに入れることもできます。コードを別のファイルに置く方法の詳細については、「チュートリアル : Visual Web Developer でのコードの分離を使用した基本的な Web ページの作成」を参照してください。
[追加] をクリックします。

新しいページが作成され、ソースビューに表示されます。

ページへの HTML の追加

ここでは、新しい静的テキストをページに追加する方法を説明します。

テキストをページに追加するには

ドキュメントウィンドウの下部にある [デザイン] タブをクリックして、デザインビューに切り替えます。

デザインビューに、作業中のページが WYSIWYG に近いビューで表示されます。この時点では、このページにはテキストもコントロールもないので、空白のページが表示されます。
このページに、「Welcome to Visual Web Developer」と入力します。

次のスクリーンショットは、デザインビューに上のテキストを入力したところです。

デザインビューに示された開始テキスト
ソースビューに切り替えます。

次のスクリーンショットに示されているように、デザインビューに入力して作成した HTML が表示されます。

ソースビューに表示された開始テキスト

ページの実行

ページにコントロールを追加する作業を行う前に、ページを実行してみることができます。ページを実行するには、Web サーバーが必要です。実際に使用する Web サイトでは、IIS を Web サーバーとして使用します。ただし、ページをテストするときには、ローカルで実行している ASP.NET 開発サーバーを使用するので、IIS は必要ありません。ファイルシステム Web サイトの場合は、Visual Web Developer の既定の Web サーバーが ASP.NET 開発サーバーです。

ページを実行するには

Ctrl キーを押しながら F5 キーを押してページを実行します。

Visual Web Developer により ASP.NET 開発サーバーが起動します。ツールバー上に Visual Web Developer の Web サーバーが実行中であることを示すアイコンが表示されます (下のスクリーンショットを参照)。

Visual Web Developer の Web サーバーのアイコン
開発 Web サーバーアイコン

ブラウザにページが表示されます。作成したページの拡張子は .aspx ですが、通常の HTML ページと同じように表示できます。

メモ :
ブラウザに 502 のエラーやページを表示できないことを意味するエラーが表示されたときは、ローカルの要求に対してプロキシサーバーをバイパスするようにブラウザを構成することが必要な場合があります。詳細については、「方法 : ローカル Web 要求に対してプロキシサーバーをバイパスする」を参照してください。

ブラウザに 502 のエラーやページを表示できないことを意味するエラーが表示されたときは、ローカルの要求に対してプロキシサーバーをバイパスするようにブラウザを構成することが必要な場合があります。詳細については、「方法 : ローカル Web 要求に対してプロキシサーバーをバイパスする」を参照してください。

ブラウザを閉じます。

コントロールの追加とプログラミング

ここでは、ページに Button、TextBox、および Label の各コントロールを追加し、Button コントロールの Click イベントを処理するためのコードを記述します。

次に、ページにサーバーコントロールを追加します。サーバーコントロールには、ボタン、ラベル、テキストボックス、その他よく使用するコントロールが含まれ、ASP.NET の Web ページで使用する一般的なフォーム処理機能を提供します。ただし、コントロールのプログラミングに使用するコードは、クライアントではなくサーバーで実行するコードです。

ページにコントロールを追加するには

[デザイン] タブをクリックしてデザインビューに切り替えます。
Shift キーを押しながら Enter キーを何度か押して、空間を作ります。
[ツールボックス] で、[標準] グループから TextBox、Button、および Label の 3 つのコントロールをページにドラッグします。
カーソルを TextBox コントロールの上に置き、「Enter your name:」と入力します。

この静的 HTML テキストは、TextBox コントロールのキャプションとなります。同じページ上で、静的 HTML とサーバーコントロールを混在して使用できます。次のスクリーンショットは、上記の 3 つのコントロールがデザインビューに表示されているところです。

デザインビューに表示されたコントロール

コントロールのプロパティの設定

Visual Web Developer には、ページ上のコントロールのプロパティを設定するさまざまな方法が用意されています。ここでは、デザインビューとソースビューでプロパティの設定を行います。

コントロールのプロパティを設定するには

Button コントロールを選択し、[プロパティ] ウィンドウの [テキスト] を「表示名」に設定します (次のスクリーンショットを参照)。

変更された [Button] コントロールのテキスト
ソースビューに切り替えます。

ソースビューに、このページの HTML が表示されます。Visual Web Developer がサーバーコントロール用に作成した要素も表示されます。コントロールは、HTML に似た構文で表記されます。ただし、タグはプレフィックスに asp: を使用し、属性は runat="server" と指定されます。

コントロールのプロパティは、属性として宣言します。たとえば、手順 1 で Button コントロール用の Text プロパティを設定したとき、実際にはコントロールのマークアップに Text 属性を設定したことになります。

すべてのコントロールが <form> 要素の内部にあります。この要素にも属性 runat="server" が指定されています。コントロールタグの runat="server" 属性と asp: プレフィックスは、ページが実行されるときに、そのコントロールについてはサーバー上で ASP.NET による処理が必要なことを示します。<form runat="server"> 要素と <script runat="server"> 要素の外部にあるコードは、クライアントのマークアップまたはコードとしてブラウザに送信されます。したがって、ASP.NET コードは、開始タグに runat="server" 属性を含む要素の内部にあることが必要です。
カーソルを、<asp:label> タグ内に置き、Space キーを押します。

ドロップダウンリストが開き、Label コントロールに設定できるプロパティの一覧が表示されます。この機能は、IntelliSense と呼ばれ、ページ上で使用するサーバーコントロール、HTML 要素、その他のアイテムの構文をソースビューで記述するのに便利です。次のスクリーンショットは、Label コントロールの IntelliSense ドロップダウンリストを示したものです。

ラベルコントロールの IntelliSense
ForeColor を選択し、等号 (=) を入力します。IntelliSense により色の一覧が表示されます。

メモ :

Ctrl キーを押しながら J キーを押すと、いつでも IntelliSense ドロップダウンリストを表示できます。
Label コントロールのテキストに使用する色を選択します。

ForeColor 属性に、選択した色が指定されます。

メモ :
Ctrl キーを押しながら J キーを押すと、いつでも IntelliSense ドロップダウンリストを表示できます。

ボタンコントロールのプログラミング

このチュートリアルでは、ユーザーがテキストボックスに入力した名前を読み取り、それを Label コントロールに表示するコードを記述します。

既定のボタンのイベントハンドラを追加するには

デザインビューに切り替えます。
Button コントロールをダブルクリックします。

ソースビューに切り替わり、Button コントロールの既定のイベントである Click イベントのスケルトンイベントハンドラが作成されます。

メモ :

デザインビューでコントロールをダブルクリックする方法以外にも、イベントハンドラを作成する方法がいくつかあります。
ハンドラの内側に、次のように入力します。

Label1

次のスクリーンショットに示されているように、Label コントロールで使用できるメンバの一覧が表示されます。

コントロールのメンバに使用可能なラベル

メモ :
デザインビューでコントロールをダブルクリックする方法以外にも、イベントハンドラを作成する方法がいくつかあります。

ボタンの Click イベントハンドラを、次のコード例に示されているように完成させます。

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = Textbox1.Text & ", welcome to Visual Web Developer!"
End Sub

protected void Button1_Click(object sender, System.EventArgs e)
{    
    Label1.Text = TextBox1.Text + ", welcome to Visual Web Developer!";
}

<asp:Button> 要素まで、スクロールダウンします。<asp:Button> 要素には、属性 OnClick="Button1_Click" があることに注意してください。この属性は、ボタンの Click イベントを、手順 4 でコードを記述したハンドラメソッドにバインドします。

イベントハンドラメソッドには、自由に名前を付けられます。ここに示されているのは、既定で作成された名前です。重要なことは、OnClick 属性名とこのページのメソッド名が一致していなければならないという点です。

メモ :
Visual Basic を使用してコードを分離している場合は、明示的な OnClick 属性は付加されません。その代わりに、このイベントは、ハンドラの宣言自体に使用されている Handles キーワードによってハンドラのメソッドにバインドされます。

ページの実行

次に、ページ上のサーバーコントロールのテストを行います。

ページを実行するには

Ctrl キーを押しながら F5 キーを押して、ブラウザでページを実行します。

このときも、ページは ASP.NET 開発サーバーで実行されます。
テキストボックスに名前を入力して、ボタンをクリックします。

入力した名前が、Label コントロールに表示されます。ボタンをクリックしたときに、ページが Web サーバーにポストされた点に注意してください。次に ASP.NET によってページが再作成され、ユーザーが記述したコード (この場合は、Button コントロールの Click イベントハンドラ) が実行されて、新しいページがブラウザに送られます。ブラウザのステータスバーを見ると、ボタンをクリックするたびに、ページが Web サーバーとの間を往復していることがわかります。
実行中のページのソースをブラウザに表示します。

ページのソースコードには通常の HTML のみが表示されます。ソースビューで操作した <asp:> 要素は表示されません。ページを実行すると、ASP.NET によってサーバーコントロールが処理され、そのコントロールを示す機能を実行する HTML 要素がページに表示されます。たとえば、<asp:Button> コントロールは、HTML 要素 <input type="submit"> として表示されます。
ブラウザを閉じます。

それ以外のコントロールの処理

ここでは、月日を表示する Calendar コントロールの処理方法を説明します。Calendar コントロールは、ここまでに説明したボタン、テキストボックス、およびラベルよりも複雑で、サーバーコントロールの高度な機能を実行できます。

ここでは、ページに Calendar コントロールを追加して、書式を指定します。

Calendar コントロールを追加するには

Visual Web Developer でデザインビューに切り替えます。
ツールボックスの [標準] タブから、Calendar コントロールをページにドラッグします。

カレンダーのスマートタグパネルが表示されます。パネルには、選択したコントロールでよく使用するタスクを実行するのに便利なコマンドが表示されます。次のスクリーンショットは、デザインビューに表示された Calendar コントロールを示しています。

デザインビューに示された Calendar コントロール
スマートタグパネルで、[オートフォーマット] を選択します。

[オートフォーマット] ダイアログボックスが表示され、ここでカレンダーの書式指定スキームを選択できます。次のスクリーンショットは、Calendar コントロールの [オートフォーマット] ダイアログボックスを示しています。

Calendar コントロールの [オートフォーマット] ダイアログボックス
[スキームの選択] ボックスの [シンプル] を選択し、次に [OK] をクリックします。
ソースビューに切り替えます。

<asp:Calendar> 要素が表示されます。この要素は、既に作成した単純なコントロールの要素よりもはるかに長くなります。また、この要素には、さまざまな書式設定値を示す <WeekEndDayStyle> などの下位要素が含まれます。次のスクリーンショットでは、ソースビューに Calendar コントロールが示されています。

ソースビューに表示された Calendar コントロール

Calendar コントロールのプログラミング

ここでは、現在選択されている日付を表示するよう Calendar コントロールのプログラミングを行います。

Calendar コントロールをプログラミングするには

デザイン ビューで、Calendar コントロールをダブルクリックします。

新しいイベントハンドラがソース ビューに作成されます。

強調表示された次のコードを書き込むと、SelectionChanged イベントハンドラが完成します。

Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = Calendar1.SelectedDate.ToString()
End Sub

protected void Calendar1_SelectionChanged(object sender, System.EventArgs e)
{    
    Label1.Text = Calendar1.SelectedDate.ToString();
}

ページの実行

ここでカレンダーをテストできます。

ページを実行するには

Ctrl キーを押しながら F5 キーを押して、ブラウザでページを実行します。
カレンダーのいずれかの日付をクリックします。

クリックした日付が Label コントロールに表示されます。
ブラウザで、ページのソースコードを確認します。

Calendar コントロールがページ上に表として表示され、個々の日付が <a> 要素を含んだ <td> 要素として表示されます。
ブラウザを閉じます。

次の手順

このチュートリアルでは、Visual Web Developer ページデザイナの基本的な機能について説明しました。Visual Web Developer を使用して Web ページを作成し、編集する方法を理解したので、次に他の機能について説明します。たとえば、次の場合です。

Visual Web Developer で HTML を編集する方法について、さらに詳しく学習します。詳細については、「チュートリアル : Visual Web Developer での基本的な HTML 編集」を参照してください。
Web ページにデータアクセスを追加します。詳細については、「チュートリアル : Web ページでの基本的なデータアクセス」を参照してください。
Web ページのデバッガについて学習します。詳細については、「チュートリアル : Visual Web Developer での Web ページのデバッグ」を参照してください。
携帯電話やその他のデバイス専用の Web ページを作成します。詳細については、「モバイルデバイス用の Web サイトの開発」を参照してください。
マスタページを使用して、一貫性のあるサイトレイアウトを作成します。詳細については、「チュートリアル : Visual Web Developer での ASP.NET マスタページの作成と使用」を参照してください。
ユーザーがページ間を移動するためのナビゲーションをサイトに追加します。詳細については、「チュートリアル : Web サイトへのサイトナビゲーションの追加」を参照してください。

参照

処理手順

チュートリアル : Visual Web Developer でのローカル IIS Web サイトの作成

チュートリアル : Visual Web Developer での FTP による Web サイトの編集

概念

ASP.NET の概要

Visual Web Developer の操作

次の方法で共有

チュートリアル : Visual Web Developer での基本的な Web ページの作成

前提条件

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

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

Visual Web Developer の概要

Visual Web Developer の Web デザイナを理解するには

新しい Web フォームページの作成

Web サイトに新しいページを追加するには

ページへの HTML の追加

テキストをページに追加するには

ページの実行

ページを実行するには

コントロールの追加とプログラミング

ページにコントロールを追加するには

コントロールのプロパティの設定

コントロールのプロパティを設定するには

ボタンコントロールのプログラミング

既定のボタンのイベントハンドラを追加するには

ページの実行

ページを実行するには

それ以外のコントロールの処理

Calendar コントロールを追加するには

Calendar コントロールのプログラミング

Calendar コントロールをプログラミングするには

ページの実行

ページを実行するには

次の手順

参照

処理手順

概念

その他のリソース

次の方法で共有

チュートリアル : Visual Web Developer での基本的な Web ページの作成

前提条件

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

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

Visual Web Developer の概要

Visual Web Developer の Web デザイナを理解するには

新しい Web フォーム ページの作成

Web サイトに新しいページを追加するには

ページへの HTML の追加

テキストをページに追加するには

ページの実行

ページを実行するには

コントロールの追加とプログラミング

ページにコントロールを追加するには

コントロールのプロパティの設定

コントロールのプロパティを設定するには

ボタン コントロールのプログラミング

既定のボタンのイベント ハンドラを追加するには

ページの実行

ページを実行するには

それ以外のコントロールの処理

Calendar コントロールを追加するには

Calendar コントロールのプログラミング

Calendar コントロールをプログラミングするには

ページの実行

ページを実行するには

次の手順

参照

処理手順

概念

その他のリソース

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

新しい Web フォームページの作成

ボタンコントロールのプログラミング

既定のボタンのイベントハンドラを追加するには