次の方法で共有

チュートリアル : Visual Web Developer での HTML テーブルの編集

更新 : 2007 年 11 月

Web ページではテーブルを使用してページ レイアウトを作成するため、多くの Web ページの作成においてページ編集は重要な部分です。このチュートリアルでは、Microsoft Visual Studio の HTML エディタのテーブル編集機能を示します。テーブルを使用して、ページの簡単なエントリ フォームのレイアウトを作成します。

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

このチュートリアルで説明するテーブル編集機能は HTML テーブルに関連するものであり、Table Web サーバー コントロール (<asp:Table> コントロールとその子コントロール) に関連するものではありません。

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

  • テーブルを追加します。

  • テーブル、行、および列を選択します。

  • 要素のサイズを変更します。

  • テーブル要素を追加および削除します。

  • セルの特性 (背景色や配置など) を設定します。

前提条件

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

  • Visual Web Developer および .NET Framework。

Web サイトの作成

Visual Studio で (チュートリアル : Visual Web Developer での基本的な Web ページの作成 の手順を実行するなどして) 既に Web サイトを作成してある場合はその Web サイトを使用できるので、次のセクション「テーブルを使用したページ レイアウトの作成」にスキップできます。それ以外の場合は、次の手順に従って、新しい Web サイトおよびページを作成します。

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

  1. Visual Web Developer を開きます。

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

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

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

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

  5. [言語] ボックスで、作業に使用する言語をクリックします。

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

    Visual Web Developer によりフォルダが作成され、Default.aspx という名前の新しいページが作成されます。

テーブルを使用したページ レイアウトの作成

最初に、ページの全体的なレイアウトを定義するテーブルを追加します。

ページ レイアウト用のテーブルを追加するには

  1. デザイナでまだページを開いていない場合は、Web サイトにページを追加します。

  2. デザイン ビューに切り替えます。

  3. [レイアウト] メニューの [テーブルの挿入] をクリックします。

    [表の挿入] ダイアログ ボックスが表示されます。

  4. [テンプレート] をクリックします。

    テーブル テンプレートは、定義済みのテーブル レイアウトです。

  5. [テンプレート] ボックスの [ヘッダーと左右] をクリックします。

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

    2 列構成のテーブルがページに追加されます。このテーブルは、ページの高さと幅全体を使用しています。最上部には、2 列にまたがる単一のセルがあり、ヘッダーを配置できるようになっています。ヘッダーの下の左側のセルは、ナビゲーション情報、つまり副次的な情報に使用されます。ヘッダーの下の右側のセルは、ページのメインの表示領域です。

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

    デザイン時には、テーブルのセルの周りに既定で罫線が表示されるので、編集する際に役立ちます。テーブルまたはセルの罫線を明示的に設定しない限り、ブラウザにテーブルが表示されるときには罫線は表示されません。

テーブルを使用したフォーム レイアウトの作成

HTML テーブルを使用して、フォームのコントロールを配置することもできます。今度は、最初のテーブルの中に 2 つ目のテーブルを作成します。後でこの 2 つ目のテーブルを使用して、フォームのいくつかのコントロールのレイアウトを作成します。

フォーム レイアウト用のテーブルを追加するには

  1. ツールボックスの [HTML] グループから、[Table] 要素を右側の (メインの) セルにドラッグします。

    ツールボックスからテーブルをドラッグすると、3 つの列と 3 つの行で構成される空のテーブルが作成されます。必要なのは 2 列だけなので、この後で 1 列は削除します。

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

    先ほどと同じように [テーブルの挿入] コマンドを使用してテーブルを作成することも、ツールボックスから [Table] 要素をドラッグして作成することもできます。

  2. マウス ポインタをテーブルの上に移動し、マウス ポインタが移動カーソル (4 方向矢印) に変わったら、テーブルをクリックして選択します。

  3. テーブルの右端をドラッグして、ページの幅いっぱいにテーブルの幅を広げます。

    ドラッグしているときに、テーブルの現在の寸法が表示されます。

  4. 左端の列のセルの 1 つを右クリックします。[削除] サブメニューの [列] をクリックして、選択されているセルの列を削除します。

    テーブルから列が削除されます。

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

    [削除] オプションにサブメニューが表示されない場合、フォーカスがセル内に置かれていないことを示します。左側の列のセル内で右クリックしてください。

  5. 一番下の右側のセルをクリックし、Tab キーを押してテーブルに 4 番目の行を追加します。

    2 つの列と 4 つの行で構成されるテーブルができました。このテーブルをフォーム コントロールのコンテナとして使用します。

ページ レイアウト テーブルの特性の設定

ページ テーブルの中にフォーム レイアウト テーブルを作成したので、ページ レイアウト テーブルを編集してページのレイアウトを完成させることができます。

ページ レイアウト テーブルの特性を設定するには

  1. ページ レイアウト テーブルの最上部のセルをクリックします。

    セルの周りの罫線が太くなります。これは、セルが選択されていること、および内容編集モードであることを示します。

  2. [プロパティ] ウィンドウの [スタイル] ボックスのボタンをクリックします。

    [スタイル ビルダ] ダイアログ ボックスが表示されます。

  3. [テキスト] タブの [左右] ボックスの [中央揃え] をクリックします。

  4. [背景] タブの [色] ボックスで好みの色を選択します。[色] ボックスの横のボタンをクリックして [カラー ピッカー] ダイアログ ボックスを表示し、追加の色から選択することもできます。

    ここで行った設定により、レイアウト テーブルの最上部のセルのスタイルが設定されます。

  5. 見出しとして「Contoso Web Site」と入力します。

  6. テキストを選択し、[書式設定] ツール バーの [フォーマットのブロック] ボックスの [Heading 1 <H1>] をクリックします。

  7. テーブルの左端のセルについて手順 1. ～ 6. を繰り返し、次の変更を行います。

    • テキストを「This site is maintained by Contoso, Incorporated」に変更します。

    • テキストは見出し 1 として書式指定しません。

    • [スタイル ビルダ] ダイアログ ボックスで、[テキスト] タブの [上下] ボックスの [下] をクリックします。

    実行用の Web ページでは、多くの場合、脇のセルはリンクのメニューなどの内容に使用されます。ただし、このチュートリアルでは、セルに格納されている内容は問題ではありません。

フォームの作成

ここでフォームを作成できます。

フォーム レイアウト テーブルにテキストとコントロールを追加するには

  1. フォーム レイアウト テーブル (ページ レイアウト テーブルの中にあるテーブル) で、左上隅のセルをクリックし、「Name:」と入力します。

  2. 2 行目の左側のセルをクリックし、「Birth year:」と入力します。

  3. ツールボックスの [標準] グループから、TextBox コントロールを右上隅のセルにドラッグします。

  4. TextBox コントロールの ID プロパティを「textName」に設定します。

  5. TextBox を今度は 2 行目の右側のセルにドラッグし、ID プロパティを「textBirthYear」に設定します。

  6. Button コントロールを 3 行目の右側のセルにドラッグし、Text プロパティを「Submit」に設定します。

  7. Label コントロールを最後の行の右側のセルにドラッグし、ID プロパティを「labelDisplay」に設定し、Text プロパティを消去します。

  8. マウス カーソルを左側の列の上に置き、列の上部に選択記号 (小さい四角形) が表示されたら、その記号をクリックします。

    左側の列が選択されます。

  9. [プロパティ] ウィンドウで、[スタイル] ボックス内のボタンをクリックします。すると、[スタイル ビルダ] ダイアログ ボックスが表示されます。

  10. [テキスト] タブの [左右] ボックスの [右] をクリックします。

    フォームのテキスト キャプションが右寄せになります。

  11. [OK] をクリックしてスタイル ビルダを閉じます。

  12. 左側の列を再度選択し、右端をドラッグして、キャプション テキストがちょうど収まる幅に列を縮小します。

  13. フォーム レイアウト テーブルの外側のレイアウト テーブルのセルを右クリックし、[スタイル] をクリックします。

    ショートカット メニューを使用して [スタイル ビルダ] ダイアログ ボックスを表示することもできます。

  14. [テキスト] タブの [上下] ボックスの [上] をクリックします。

    フォーム レイアウト テーブルがセルの上端に揃えられます。

フォーム コントロールのプログラミング

ここでフォーム コントロールをプログラミングできます。フォームには、ユーザーが今年で何歳になるかが表示されます。

フォーム コントロールをプログラミングするには

  1. フォーム上の Button コントロールをダブルクリックします。

    エディタによって Click イベント ハンドラが作成されます。

  2. 次の強調表示されたコードを追加します。

    Protected Sub Button1_Click(ByVal sender As Object, _
    ByVal e As System.EventArgs) _
    Handles Button1.Click 
    Dim age As Integer    age = DateTime.Now.Year - CInt(textBirthYear.Text)    labelDisplay.Text = Server.HtmlEncode(textName.Text) & _        ", this year you are " & Server.HtmlEncode(age.ToString())
End Sub

    protected void Button1_Click(Object sender, EventArgs e)
{
    int age = DateTime.Now.Year - Int32.Parse(textBirthYear.Text);    labelDisplay.Text = Server.HtmlEncode(textName.Text) +     ", this year you are " + Server.HtmlEncode(age.ToString());
}

ページのテスト

ここでページをテストできます。

ページをテストするには

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

    ページがブラウザに表示されたときに、作成したレイアウトに注目してください。表の罫線を明示的に指定しなかったので、フォームには罫線がありません。

  2. [Name] ボックスに自分の名前を入力します。

  3. [Birth year] ボックスに自分が生まれた年を入力し、[Submit] をクリックします。

    フォーム内のフォーム テーブルを使用して作成した場所に年齢の計算が表示されます。

次の手順

このチュートリアルでは、デザイン ビューのビジュアル テーブル エディタの機能の一部を使用しました。2 とおりの方法でテーブルを追加し、テーブルのサイズ変更、行の追加、列の削除、セル スタイルの設定、セルの内容としてのテキストとコントロールの追加を行いました。次に行う作業の例を示します。

参照

処理手順

チュートリアル : Visual Web Developer での ASP.NET マスタ ページの作成と使用

概念

Visual Web Developer の HTML エディタでのタグ ナビゲーション

Visual Web Developer の HTML エディタでの要素の書式指定