チュートリアル : ASP.NET での入れ子になったマスタ ページの使用
更新 : 2007 年 11 月
このチュートリアルでは、別のマスタ ページ内に入れ子にされたマスタ ページを作成する方法について説明します。マスタ ページは、ページの外観を指定するテンプレートとして機能します。
マスタ ページを入れ子にすると、Web サイト上で一貫した外観を保持しながら、各ページに柔軟なレイアウトを適用することができます。たとえば、上部に会社のバナーがあり、端の列にサイト ナビゲーション コントロールを表示する親マスタ ページを作成できます。次に、その親マスタ ページを使用する特定の部門または製品の子マスタ ページを作成できます。子マスタ ページは、他の関連するすべての部門ページまたは製品ページのマスタ ページとしても機能します。このようにすることで、それぞれの製品ラインや部門で統一感のある外観が使用され、親マスタ ページの使用により、すべてのページでも全体的な外観の一貫性が維持されます。マスタ ページの詳細については、「ASP.NET マスター ページの概要」を参照してください。
このチュートリアルでは、次のタスクについて説明します。
マスタ ページの作成
別のマスタ ページ内に入れ子にされたマスタ ページの作成
マスタ ページに表示するコンテンツを使用した ASP.NET ページの作成
前提条件
このチュートリアルを完了するには、次の条件が必要です。
Visual Studio 2008 または Microsoft Visual Web Developer Express Edition。ダウンロード情報については、.NET Framework Developer Center の Web サイトを参照してください。
.NET Framework version 3.5。
オプションとして、マスタ ページのバナーとして使用できる .jpg、.gif、またはその他のグラフィックス ファイル。バナーは、幅 780 ピクセル以内、高さ 150 ピクセル以内にすることをお勧めします。ただし、ロゴの表示はオプションであり、グラフィックの正確なサイズはチュートリアルの実行には重要ではありません。
Web サイトの作成
「チュートリアル : Visual Web Developer での基本的な Web ページの作成」などの手順を実行して Visual Web Developer で Web サイトを作成済みの場合は、その Web サイトを使用し、次のセクション「マスタ ページの作成」に進むことができます。それ以外の場合は、次の手順に従って、新しい Web サイトおよびページを作成します。
ファイル システム Web サイトを作成するには
Visual Web Developer を開きます。
[ファイル] メニューの [新しい Web サイト] をクリックします。
[新しい Web サイト] ダイアログ ボックスが表示されます。
[Visual Studio にインストールされたテンプレート] の [ASP.NET Web サイト] をクリックします。
[場所] ボックスに、Web サイトのページを格納するフォルダの名前を入力します。
たとえば、「C:\Tasks」のように入力します。
[言語] ボックスで、作業に使用するプログラミング言語をクリックします。
[OK] をクリックします。
Visual Web Developer によりフォルダが作成され、Default.aspx という名前の新しいページが作成されます。
親マスタ ページの作成
ここでは、親マスタ ページを作成します。このページには、サイト全体で使用できるバナーとナビゲーション コントロールが含まれます。後で、この親マスタ ページ内で使用される別のマスタ ページを作成します。子マスタ ページでは、親マスタ ページで設定された外観を維持しながら、ページにさまざまなレイアウトを追加できます。
マスタ ページを作成するには
ソリューション エクスプローラで、Web サイトの名前を右クリックし、[新しい項目の追加] をクリックします。
[新しい項目の追加] ダイアログ ボックスが表示されます。
[Visual Studio にインストールされたテンプレート] の [マスタ ページ] をクリックします。
[名前] ボックスに「ParentMaster」と入力します。
[別のファイルにコードを書き込む] チェック ボックスをオフにします。
[言語] ボックスで、作業に使用するプログラミング言語をクリックします。
[追加] をクリックします。
新しいマスタ ページがソース ビューに表示されます。
親マスタ ページへの要素の追加
マスタ ページの上部には、通常の ASP.NET ページの上部にある @ Page 宣言の代わりに、@ Master 宣言が表示されます。ページの本文には、ContentPlaceHolder コントロールが含まれます。これは、置換可能なコンテンツが実行時にコンテンツ ページとマージされるマスタ ページの領域です。このコンテンツ プレースホルダの操作方法は、後でこのチュートリアルで説明します。
親マスタ ページへのグラフィックスの追加
親マスタ ページにグラフィックスを組み込む前に、グラフィック ファイルを Web サイトに追加する必要があります。
バナー用に幅 780 ピクセル、高さ 150 ピクセルのグラフィックを作成し、フッター用に幅 780 ピクセル、高さ 50 ピクセルのグラフィックを作成します。グラフィックスは、入れ子になったマスタ ページにおいて、親マスタ ページのグラフィックスがどのように表示されるかを示すために使用されます。これらのグラフィックスがない場合は、Microsoft ペイントや別のグラフィックス プログラムを使用して作成できます。
既存のグラフィック ファイルを Web サイトに追加するには
ソリューション エクスプローラで、Web サイトの名前を右クリックし、[既存項目の追加] をクリックします。
[既存項目の追加] ダイアログ ボックスが表示されます。
作成したグラフィック ファイルを選択します。
[追加] をクリックします。
親マスタ ページで、バナー用とフッター用の 2 つの単純なグラフィックスを追加します。これらのグラフィックスにより、後でこのチュートリアルで作成する入れ子になったマスタ ページで親マスタ ページがどのように使用されるかを確認できます。
バナー グラフィックとフッター グラフィックを親マスタ ページに追加するには
ソース ビューで、開始の <form> タグの直後に、バナー グラフィックの img 要素を含む div 要素を追加します。
たとえば、Banner.gif という名前のグラフィックを作成した場合、このグラフィックを追加するマークアップは次のようになります。
<div id="banner"> <img src="banner.gif" alt="banner graphic" /> </div>終了の </form> タグの直前に、フッター グラフィックの img 要素を含む div 要素を追加します。
たとえば、Footer.gif という名前のグラフィックを作成した場合、このグラフィックを追加するマークアップは次のようになります。
<div id="banner"> <img src="footer.gif" alt="footer graphic" /> </div>マスタ ページを保存します。
ContentPlaceHolder コントロール内には、まだ何も追加していないことに注意してください。次に作成する一連のマスタ ページが、ContentPlaceHolder コントロール内に配置されます。
子マスタ ページの作成
あるマスタ ページを別のマスタ ページ内に入れ子にするには、別のマスタ ページを作成する必要があります。新しいマスタ ページは、親マスタ ページのコンテンツ プレースホルダ内に配置されます。子マスタ ページでは、親マスタ ページで設定された一貫性のある外観を維持しながら、ページをさまざまな方法で配置できます。
子マスタ ページを作成するには
ソリューション エクスプローラで、Web サイトの名前を右クリックし、[新しい項目の追加] をクリックします。
[新しい項目の追加] ダイアログ ボックスが表示されます。
[Visual Studio にインストールされたテンプレート] の [マスタ ページ] をクリックします。
[名前] ボックスに「ChildMaster」と入力します。
[別のファイルにコードを書き込む] チェック ボックスをオフにします。
[マスタ ページを選択する] チェック ボックスをオンにします。
[言語] ボックスで、作業に使用するプログラミング言語をクリックします。
[追加] をクリックします。
[マスタ ページを選択してください] ダイアログ ボックスが表示されます。
このチュートリアルの前半で作成した親マスタ ページを選択します。
[OK] をクリックします。
新しいマスタ ページがソース ビューに表示されます。
新しいマスタ ページの上部にある @ Master 宣言は、マスタ ページを参照していることを示します。
子マスタ ページへの ContentPlaceHolder コントロールの追加
子マスタ ページには別のマスタ ページが関連付けられているため、2 つの Content コントロールが含まれています。最初のコンテンツ プレースホルダは、script 要素など、通常は head 要素内に配置される情報をページに追加するために使用できます。もう 1 つの Content コントロール内には、ContentPlaceHolder コントロールを追加できます。これにより、子マスタ ページを使用する ASP.NET ページで、ページのコンテンツを提供できるようになります。Content コントロール内には、他のページ要素も追加できます。子マスタ ページを使用するページに一貫した外観を適用するために、子マスタ ページに追加のページ要素を含めることができます。
子マスタ ページに ContentPlaceholder コントロールを追加するには
子マスタ ページを開くか、子マスタ ページに切り替えます。
ソース ビューに切り替えます。
ContentPlaceHolder コントロールを作成するために、2 番目の Content コントロール セクション内に次のマークアップを追加します。
<div id="2col"> <asp:ContentPlaceHolder ID="leftcolumn" runat="server"> </asp:ContentPlaceHolder> <asp:ContentPlaceHolder ID="rightcolumn" runat="server"> </asp:ContentPlaceHolder> </div>ファイルを保存します。
これにより、子マスタ ページに、その子マスタ ページを使用する ASP.NET ページからのマークアップを含む ContentPlaceHolder コントロールが表示されます。
子マスタ ページを使用するコンテンツ ページの作成
前の手順では、別のマスタ ページ内に入れ子にされたマスタ ページを作成しました。作成した子マスタ ページでは、親マスタ ページの UI 要素が使用されます。さらに、2 番目のマスタには他の UI 要素も追加されます。このチュートリアルでは、親マスタ ページにグラフィックスを追加し、2 番目のマスタ ページにプレースホルダを追加しました。入れ子になったマスタ ページの動作を確認するには、子マスタ ページを使用する ASP.NET Web ページを作成する必要があります。子マスタ ページを使用する新しいページでは、その子マスタ ページに作成した ContentPlaceHolder コントロールごとに、Content コントロールが自動的に追加されます。
子マスタ ページを使用するページを作成するには
ソリューション エクスプローラで、Web サイトの名前を右クリックし、[新しい項目の追加] をクリックします。
[新しい項目の追加] ダイアログ ボックスが表示されます。
[Visual Studio にインストールされたテンプレート] の [Web フォーム] をクリックします。
[名前] ボックスに「Tasks」と入力します。
[別のファイルにコードを書き込む] チェック ボックスをオンにします。
[マスタ ページを選択する] チェック ボックスをオンにします。
[言語] ボックスで、作業に使用するプログラミング言語をクリックします。
[追加] をクリックします。
[マスタ ページを選択してください] ダイアログ ボックスで、このチュートリアルの前半で作成した子マスタ ページを選択します。
[OK] をクリックします。
新しいコンテンツ ページがソース ビューに表示されます。
最初の Content コントロールの ID を leftcolumn に変更し、2 番目の Content コントロールの ID を rightcolumn に変更します。
左の列または右の列の Content コントロールに、テキスト要素またはページ要素を追加します。
Ctrl キーを押しながら F5 キーを押して Web サイトを実行します。
Tasks.aspx ページに、このチュートリアルで作成したすべての要素の組み合わせが表示されます。これには、親マスタ ページのグラフィックス、子マスタ ページの 2 列のレイアウト、および Tasks.aspx ページに追加したテキストとコントロールが含まれます。
次の手順
これで入れ子になったマスタ ページの動作を確認できたので、親マスタ ページを使用する他の子マスタ ページを作成することができます。このチュートリアルでは、子マスタ ページを作成して 2 列のレイアウトを作成しました。親マスタ ページに対する別の子マスタ ページとして、1 列のレイアウトや他のレイアウトを作成することもできます。