次の方法で共有

チュートリアル : 新しい ASP.NET Web サイトの作成

  • [アーティクル]

更新 : 2007 年 11 月

このチュートリアルでは、Microsoft Visual Web Developer Express Edition および Microsoft Visual Studio 2008 の Web 開発機能の概要について説明します。ここでは、簡単なページを作成する手順を示します。さらに、WYSIWYG 形式のビジュアルなデザイナも紹介します。

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

前提条件

このチュートリアルを実行するには、以下が必要です。

  • Microsoft Visual Studio 2008 または Microsoft Visual Web Developer Express Edition。ダウンロード情報については、.NET Framework Developer Center の Web サイトを参照してください。

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

前半では、既定のページを使用した ASP.NET Web サイトを作成します。この Web サイトは、Microsoft Internet Information Services (IIS) を必要としないファイル システム Web サイトです。この Web サイトでは、コンピュータのローカル ファイル システムでページを作成し、実行できます。

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

Bb547121.alert_note(ja-jp,VS.90).gifメモ :

Web サイトは、Web アプリケーション プロジェクトを使用する方法でも作成できます。詳細については、「Web アプリケーション プロジェクトの概要」を参照してください。

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

  1. Visual Web Developer を開きます。

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

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

    [新しい Web サイト] ダイアログ ボックス スクリーンショット

  3. [Visual Studio にインストールされたテンプレート] の [ASP.NET Web サイト] をクリックします。

  4. [場所] ボックスで、[ファイル システム] ボックスをクリックし、Web サイトのページを格納するフォルダの名前を入力します。

    たとえば、フォルダ名として「C:\Tasks」と入力します。

  5. [言語] ボックスの一覧で、[Visual Basic] または [Visual C#] をクリックし、Web プロジェクトで使用するプログラミング言語を選択します。

    Bb547121.alert_note(ja-jp,VS.90).gifメモ :

    このチュートリアルでは、プログラム コードは作成しません。

  6. [OK] をクリックします。

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

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

Visual Web Developer の概要

次の手順に進む前に、Visual Web Developer の開発環境について理解しておくと便利です。次の図は、Visual Web Developer のウィンドウおよびツールの一部を示しています。

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

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

  • ツール バー。テキストの書式指定、検索などのコマンドを提供します。一部のツール バーは、デザイン ビューで作業する場合にのみ表示されます。

  • ソリューション エクスプローラ。Web サイトのフォルダとファイルを表示します。

  • ドキュメント ウィンドウ。タブ付きのウィンドウでの作業時にドキュメントを表示します。タブをクリックすると、ドキュメント間を移動できます。

  • [表示] タブ。同じドキュメントのさまざまなビューを表示します。デザイン ビューは、WYSIWYG に近い表示機能を持った編集サーフェイスです。ソース ビューは、ページのエディタで、マークアップを表示します。分割ビューには、ドキュメントのデザイン ビューとソース ビューの両方が表示されます。デザイン ビューとソース ビューの操作方法は、後でこのチュートリアルで説明します。Web ページをデザイン ビューで開くには、[ツール] メニューの [オプション] をクリックし、[HTML デザイナ] ノードを選択して、[ページを開始するビュー] オプションを変更します。

  • [プロパティ] ウィンドウ。ページ、HTML 要素、コントロール、およびその他のオブジェクトの設定を変更できます。

  • [CSS のプロパティ] ウィンドウ。デザイン ビューがアクティブになっているときに、現在の CSS スタイルを表示します。

  • [スタイルの管理] ウィンドウおよび [スタイルの適用] ウィンドウ。Web サイトの CSS スタイルを制御できます。

  • ツールボックス。ここに表示されるコントロールと HTML 要素は、ページにドラッグできます。ツールボックス内の要素は、共通の機能ごとにグループ化されています。

  • データベース エクスプローラ。データベース接続を表示します。Visual Web Developer でデータベース エクスプローラが表示されていない場合は、[表示] メニューの [その他のウィンドウ] をクリックし、[データベース エクスプローラ] をクリックします。

    Bb547121.alert_note(ja-jp,VS.90).gifメモ :

    Visual Web Developer の [データベース エクスプローラ] ウィンドウは、完全版の Visual Studio ではサーバー エクスプローラという名前になります。

これらのウィンドウは、使いやすいように再整列、サイズ変更、およびドッキングできます。[表示] メニューからは、追加のウィンドウを表示できます。

開発環境の操作方法を確認するには

  1. [表示] メニューの [ツール バー] をクリックします。

    使用できるツール バーのサブメニューが表示されます。現在表示されているツール バーの選択項目の横には、チェック ボックスが表示されています。

  2. ツール バーの一覧の一番下へスクロールし、[ユーザー設定] をクリックします。

    [ユーザー設定] ダイアログ ボックスが表示されます。

  3. 使用できるツール バーを確認します。終了したら、[閉じる] をクリックします。

  4. [表示] メニューの [ソリューション エクスプローラ] をクリックします。

    [ソリューション エクスプローラ] ウィンドウが表示されます。既定では、このウィンドウは Visual Web Developer 環境の一方の端にドッキングされます。

  5. ソリューション エクスプローラで、サイトの一覧の一番上にある項目を右クリックします。

    よく使用される Web サイトの操作のショートカット メニューが表示されます。

  6. Esc キーを押してショートカット メニューを閉じます。

  7. ソリューション エクスプローラで、Web.config ファイルを右クリックし、[開く] をクリックして、このファイルをドキュメント ウィンドウで開きます。

  8. Default.aspx ページをダブルクリックして、このページをドキュメント ウィンドウで開きます。ファイルをダブルクリックすると、ショートカット メニューの [開く] を使用した場合と同じ操作を実行できます。

    開いている各ページの名前が、ドキュメント ウィンドウの上部にあるタブに表示されます。

  9. ドキュメント ウィンドウの下部にある [分割] をクリックして、ソース ビューとデザイン ビューを同時に表示します。

  10. [表示] メニューの [プロパティ ウィンドウ] をクリックします。

    [プロパティ] ウィンドウが表示されます。

    ドキュメント ウィンドウでオブジェクトを選択すると、選択したオブジェクトのプロパティが [プロパティ] ウィンドウに表示されます。

  11. ソース ビューのペインで form 要素を選択し、[プロパティ] ウィンドウで使用可能なプロパティを確認します。

  12. [表示] メニューの [ツールボックス] をクリックします。

    [ツールボックス] ウィンドウが表示されます。

  13. デザイン ビューで、ツールボックスの [標準] タブから、Button コントロールをドキュメントにドラッグし、div 要素内にドロップします。

    ソース ビューが更新され、該当するマークアップが追加されます。

  14. [表示] メニューの [データベース エクスプローラ] をクリックします。

    [データベース エクスプローラ] ウィンドウが表示されます。

    Bb547121.alert_note(ja-jp,VS.90).gifメモ :

    Visual Web Developer の データベース エクスプローラ] ウィンドウは、完全版の Visual Studio では [サーバー エクスプローラ] という名前になります。

  15. [データ接続] を右クリックして、使用できるデータベース オプションを確認します。

ASP.NET Web ページの作成

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

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

  1. ドキュメント ウィンドウで、Default.aspx ページのタブを右クリックし、[閉じる] をクリックします。

  2. 変更を保存するかどうかを確認するメッセージが表示された場合は、[いいえ] をクリックします。

  3. ソリューション エクスプローラで、Web サイト ([C:\Tasks] など) を右クリックし、[新しい項目の追加] をクリックします。

    [新しい項目の追加] ダイアログ ボックスが表示されます。

  4. [Visual Studio にインストールされたテンプレート] の [Web フォーム] をクリックします。

  5. [名前] ボックスに「Home.aspx」と入力します。

  6. [言語] ボックスの一覧で、使用するプログラミング言語 ([Visual Basic] または [C#]) を選択します。

  7. [別のファイルにコードを書き込む] チェック ボックスをオフにします。

    次の図は、[新しい項目の追加] ダイアログ ボックスを示しています。

    [新しい項目の追加] ダイアログ ボックス

  8. [追加] をクリックします。

    Visual Web Developer によって新しいページが作成されます。既定では、ページはソース ビューで表示されます。

ページへの HTML の追加

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

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

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

  2. ページに「To-Do List」と入力します。

ページの実行

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

ページを実行するには

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

    Visual Web Developer によって ASP.NET 開発サーバーが起動されます。Windows ツール バーには、次の図に示すように、Visual Web Developer の Web サーバーが実行中であることを示すアイコンが表示されます。

    開発 Web サーバー アイコン

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

    Bb547121.alert_note(ja-jp,VS.90).gifメモ :

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

  2. ブラウザを閉じます。

次の手順

このチュートリアルでは、Visual Web Developer の基本的な機能について説明しました。

ファイルをより細かく管理するには、Visual SourceSafe などのソース管理システムに Web サイトのファイルを格納することを検討してください。詳細については、「ソース管理の概要」を参照してください。

参照

概念

ASP.NET の主要チュートリアル