マスターページを利用してサイト全体レイアウトを作成する (VB)

[アーティクル]
07/13/2023

このチュートリアルでは、マスターページの基本について説明します。つまり、マスターページとは何か、どのようにマスターページを作成するか、コンテンツプレース所有者とは何か、マスターページを使用する ASP.NET ページをどのように作成するか、マスターページの変更が関連付けられているコンテンツページにどのように自動的に反映されるかなどです。

はじめに

適切に設計された Web サイトの 1 つの属性は、サイト全体で一貫したページレイアウトです。たとえば、 www.asp.net Web サイトを見てみましょう。この記事の執筆時点では、すべてのページがページの上部と下部に同じコンテンツを持っています。図 1 に示すように、各ページの最上部には、Microsoft コミュニティの一覧を含む灰色のバーが表示されます。その下には、サイトのロゴ、サイトが翻訳された言語の一覧、およびコアセクション (Home、Get Started、Learn、Downloads など) があります。同様に、ページの下部には、 www.asp.net の広告に関する情報、著作権に関する声明、およびプライバシーに関する声明へのリンクが含まれています。

図 01: www.asp.net Web サイトでは、すべてのページで一貫した外観が採用されています (フルサイズの画像を表示するをクリックします)

適切に設計されたサイトのもう 1 つの属性は、サイトの外観を簡単に変更できることです。図 1 は、2008 年 3 月時点の www.asp.net ホームページを示していますが、現在からこのチュートリアルの公開までの間に、外観が変わった可能性があります。上部のメニュー項目が展開され、MVC フレームワークの新しいセクションが含まれる場合があります。または、異なる色、フォント、レイアウトを持つ根本的に新しいデザインが発表されるかもしれません。このような変更をサイト全体に適用することは、サイトを構成する何千もの Web ページを変更する必要のない高速で簡単なプロセスである必要があります。

ASP.NET でサイト全体のページテンプレートを作成するには、 マスターページを使用します。簡単に言うと、マスターページは、すべてのコンテンツページに共通するマークアップと 、コンテンツページ ごとにカスタマイズ可能な領域を定義する特別な種類の ASP.NET ページです。 (コンテンツページは、マスターページにバインドされている ASP.NET ページです)。マスターページのレイアウトまたは書式設定が変更されるたびに、すべてのコンテンツページの出力も同様にすぐに更新されます。これにより、サイト全体の外観の変更を 1 つのファイル (つまりマスターページ) の更新と展開と同じくらい簡単に適用できます。

これは、マスターページの使用を調べる一連のチュートリアルの最初のチュートリアルです。このチュートリアルシリーズでは、次の手順を実行します。

マスターページとそれに関連するコンテンツページの作成を調べる
さまざまなヒント、テクニック、トラップについて話し合います。
マスターページの一般的な落とし穴を特定し、回避策を調べる
コンテンツページからマスターページにアクセスする方法と、その逆の方法を参照してください。
実行時にコンテンツページのマスターページを指定する方法について説明します。
その他の詳細なマスターページのトピック。

これらのチュートリアルは簡潔にし、プロセスを視覚的に説明するためのスクリーンショットを豊富に備えた詳細な手順を提供します。各チュートリアルは、C# と Visual Basic のバージョンで使用でき、使用される完全なコードのダウンロードが含まれています。

この最初のチュートリアルでは、マスターページの基本を確認することから始めます。ここでは、マスターページのしくみについて説明し、Visual Web Developer を使用してマスターページと関連コンテンツページを作成する方法を説明し、マスターページに対する変更がコンテンツページにどのようにすぐに反映されるかを確認します。それでは作業を始めましょう。

マスターページのしくみについて

サイト全体のページレイアウトが一貫した Web サイトを構築するには、各 Web ページがカスタムコンテンツに加えて共通の書式設定マークアップを出力する必要があります。たとえば、 www.asp.net の各チュートリアルやフォーラムの投稿には独自の固有のコンテンツが含まれていますが、これらの各ページでは、最上位レベルのセクションリンクを表示する一連の一般的な <div> 要素 (Home、Get Started、Learn など) もレンダリングされます。

一貫した外観で Web ページを作成するためのさまざまな手法があります。単純なアプローチは、共通のレイアウトマークアップをコピーしてすべての Web ページに貼り付けることですが、この方法にはいくつかの欠点があります。まず、新しいページが作成されるたびに、共有コンテンツをコピーしてページに貼り付ける必要があります。共有マークアップのサブセットのみを誤って新しいページにコピーする可能性があるため、このようなコピー操作と貼り付け操作はエラーに対して熟しています。また、このアプローチでは、サイト全体の既存の外観を新しい外観に置き換えるのに大きな痛みを伴います。新しい外観を使用するには、サイト内のすべてのページを編集する必要があるためです。

ASP.NET バージョン 2.0 より前では、ページ開発者は多くの場合、ユーザーコントロールに共通のマークアップを配置し、これらのユーザーコントロールを各ページに追加しました。この方法では、ページ開発者が新しいページごとにユーザーコントロールを手動で追加することを忘れないようにする必要がありましたが、共通のマークアップを更新する場合はユーザーコントロールのみを変更する必要があるため、サイト全体で簡単に変更できます。残念ながら、Visual Studio .NET 2002 および 2003 ( ASP.NET 1.x アプリケーションの作成に使用される Visual Studio のバージョン) では、ユーザーコントロールが灰色のボックスとしてデザインビューにレンダリングされました。そのため、このアプローチを使用するページ開発者は、WYSIWYG のデザイン時環境を利用できませんでした。

ユーザーコントロールの使用の欠点は、 マスターページの導入により、ASP.NET バージョン 2.0 と Visual Studio 2005 で対処されました。マスターページは、サイト全体のマークアップと、関連するコンテンツページがカスタムマークアップを定義する領域の両方を定義する特殊な種類の ASP.NET ページ です。手順 1 で説明するように、これらの領域は ContentPlaceHolder コントロールによって定義されます。 ContentPlaceHolder コントロールは、マスターページのコントロール階層内で、コンテンツページによってカスタムコンテンツを挿入できる位置を示すだけです。

注意

マスターページの主要な概念と機能は、バージョン 2.0 以降 ASP.NET 変更されていません。ただし、Visual Studio 2008 では、Visual Studio 2005 に欠けていた機能である、入れ子になったマスターページのデザイン時のサポートが提供されます。今後のチュートリアルでは、入れ子になったマスターページの使用について説明します。

図 2 は、 www.asp.net のマスターページの外観を示しています。マスターページでは、サイト全体の共通レイアウト (すべてのページの上部、下部、右にあるマークアップ) と、各 Web ページの一意のコンテンツが配置されている中央の左側の ContentPlaceHolder が定義されていることに注意してください。

マスターページコンテンツページごとに Site-Wide レイアウトと編集可能な領域を定義します

図 02: マスターページ:コンテンツページごとに Site-Wide レイアウトと編集可能領域を定義する

マスターページが定義されたら、チェックボックスのチェックボックスを使用して新しい ASP.NET ページにバインドできます。これらの ASP.NET ページ (コンテンツページと呼ばれます) には、マスターページの ContentPlaceHolder コントロールごとに Content コントロールが含まれます。ブラウザーを介してコンテンツページにアクセスすると、ASP.NET エンジンによってマスターページのコントロール階層が作成され、コンテンツページのコントロール階層が適切な場所に挿入されます。この結合されたコントロール階層がレンダリングされ、結果の HTML がエンドユーザーのブラウザーに返されます。そのため、コンテンツページは、ContentPlaceHolder コントロールの外部でマスターページで定義されている共通マークアップと、独自の Content コントロール内で定義されたページ固有のマークアップの両方を生成します。図 3 は、この概念を示しています。

図 03: 要求されたページのマークアップがマスターページに融合されている (フルサイズの画像を表示するをクリックします)

マスターページのしくみについて説明したので、Visual Web Developer を使用してマスターページと関連コンテンツページを作成する方法を見てみましょう。

注意

このチュートリアルシリーズ全体で構築する ASP.NET Web サイトは、Microsoft の無料バージョンの Visual Studio 2008 Visual Web Developer 2008 で ASP.NET 3.5 を使用して作成されます。 ASP.NET 3.5 にまだアップグレードしていない場合は、心配しないでください。これらのチュートリアルで説明されている概念は、ASP.NET 2.0 と Visual Studio 2005 でも同様に機能します。ただし、一部のデモアプリケーションでは、.NET Framework バージョン 3.5 の新機能を使用する場合があります。3.5 固有の機能を使用する場合は、バージョン 2.0 で同様の機能を実装する方法について説明するメモが含まれています。各チュートリアルからダウンロードできるデモアプリケーションは、.NET Framework バージョン 3.5 を対象としているため、3.5 固有のWeb.config構成要素を含むファイルになる点に注意してください。簡単に言うと、コンピューターに .NET 3.5 をまだインストールしていない場合、ダウンロード可能な Web アプリケーションは、最初にから 3.5 固有のマークアップ Web.configを削除しないと機能しません。このトピックの詳細については、「ファイル」を参照してくださいWeb.config。

手順 1: マスターページを作成する

マスターページとコンテンツページの作成と使用を調べる前に、まず ASP.NET Web サイトが必要です。まず、新しいファイルシステムベースの ASP.NET Web サイトを作成します。これを行うには、Visual Web Developer を起動し、[ファイル] メニューに移動し、[新しい Web サイト] を選択し、[新しい Web サイト] ダイアログボックスを表示します (図 4 を参照)。 ASP.NET Web サイトテンプレートを選択し、[場所] ドロップダウンリストを [ファイルシステム] に設定し、Web サイトを配置するフォルダーを選択して、言語を Visual Basic に設定します。これにより、ASP.NET ページ、フォルダー、ファイルをApp_Data含むDefault.aspx新しい Web サイトがWeb.config作成されます。

注意

Visual Studio では、Web サイトプロジェクトと Web アプリケーションプロジェクトの 2 つのプロジェクト管理モードがサポートされています。 Web サイトプロジェクトにはプロジェクトファイルがありませんが、Web アプリケーションプロジェクトは Visual Studio .NET 2002/2003 のプロジェクトアーキテクチャを模倣します。プロジェクトファイルを含め、プロジェクトのソースコードを 1 つのアセンブリにコンパイルし、フォルダーに /bin 配置します。 Visual Studio 2005 では最初は Web サイトプロジェクトのみがサポートされていましたが、Web アプリケーションプロジェクトモデルは Service Pack 1 で再導入されました。Visual Studio 2008 には、両方のプロジェクトモデルが用意されています。ただし、Visual Web Developer 2005 および 2008 エディションでは、Web サイトプロジェクトのみがサポートされます。このチュートリアルシリーズのデモでは、Web サイトプロジェクトモデルを使用しています。 Express 以外のエディションを使用していて、代わりに Web アプリケーションプロジェクトモデルを使用する場合は、自由に使用できますが、画面に表示される内容と実行する必要がある手順と、これらのチュートリアルで示されているスクリーンショットと手順に違いがあることに注意してください。

図 04: 新しいファイル System-Based Web サイトを作成する (フルサイズの画像を表示するをクリックします)

次に、[プロジェクト名] を右クリックし、[新しい項目の追加] を選択し、[マスターページ] テンプレートを選択して、ルートディレクトリ内のサイトにマスターページを追加します。マスターページは拡張子で終わることに注意してください .master。この新しいマスターページ Site.master に名前を付け、[追加] をクリックします。

図 05: Web サイトにという名前 Site.master のマスターページを追加する (フルサイズの画像を表示する場合はクリックします)

Visual Web Developer を使用して新しいマスターページファイルを追加すると、次の宣言型マークアップを含むマスターページが作成されます。

<%@ Master Language="VB" CodeFile="Site.master.vb" Inherits="Site" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title>Untitled Page</title>
 <asp:ContentPlaceHolder id="head" runat="server">
 </asp:ContentPlaceHolder>
</head>
<body>
 <form id="form1" runat="server">
 <div>
 <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
 
 </asp:ContentPlaceHolder>
 </div>
 </form>
</body>
</html>

宣言型マークアップの最初の行はディレクティブ@Masterです。ディレクティブは@Master、ASP.NET ページに表示されるディレクティブに似ています@Page。サーバー側言語 (VB) と、マスターページの分離コードクラスの場所と継承に関する情報を定義します。

DOCTYPEおよびページの宣言型マークアップは、ディレクティブの下に@Master表示されます。このページには、静的 HTML と 4 つのサーバー側コントロールが含まれています。

Web フォーム () <form runat="server"> - 通常、すべての ASP.NET ページには Web フォームがあり、マスターページには Web フォーム内に表示する必要がある Web コントロールが含まれている可能性があるため、(各コンテンツページに Web フォームを追加するのではなく) 必ず Web フォームをマスターページに追加してください。
という名前ContentPlaceHolder1の ContentPlaceHolder コントロール- この ContentPlaceHolder コントロールは Web フォーム内に表示され、コンテンツページのユーザーインターフェイスの領域として機能します。
サーバー側 <head> の要素 - <head> 要素には属性があり runat="server" 、サーバー側のコードを介してアクセスできるようにします。ページの <head> タイトルやその他 <head>の関連するマークアップをプログラムで追加または調整できるように、要素はこのように実装されます。たとえば、ASP.NET ページの Title プロパティを設定すると、サーバーコントロールによってレンダリングされる要素が<head>変更<title>されます。
という名前headの ContentPlaceHolder コントロール- この ContentPlaceHolder コントロールはサーバーコントロール内に<head>表示され、要素に宣言的にコンテンツを追加するために<head>使用できます。

この既定のマスターページ宣言型マークアップは、独自のマスターページを設計するための開始点として機能します。 HTML を自由に編集したり、Web コントロールまたは ContentPlaceHolders をマスターページに追加したりできます。

注意

マスターページをデザインするときは、マスターページに Web フォームが含まれていることと、この Web フォーム内に少なくとも 1 つの ContentPlaceHolder コントロールが表示されていることを確認します。

シンプルなサイトレイアウトの作成

既定の宣言型マークアップを展開 Site.masterして、すべてのページが共有するサイトレイアウトを作成しましょう。共通ヘッダー、ナビゲーション、ニュース、その他のサイト全体のコンテンツを含む左側の列、および "Powered by Microsoft ASP.NET" アイコンを表示するフッター。図 6 は、コンテンツページの 1 つがブラウザーを介して表示されたときのマスターページの最終結果を示しています。図 6 の赤い丸で囲まれた領域は、アクセスされるページに固有です (Default.aspx)、他のコンテンツはマスターページで定義されているため、すべてのコンテンツページで一貫性があります。

図 06: マスターページ上、左、および下部のマークアップを定義します (フルサイズの画像を表示するをクリックします)

図 6 に示すサイトレイアウトを実現するには、まずマスターページを Site.master 更新して、次の宣言型マークアップが含まれるようにします。

<%@ Master Language="VB" CodeFile="Site.master.vb" Inherits="Site" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title>Untitled Page</title>
 <asp:ContentPlaceHolder id="head" runat="server">
 </asp:ContentPlaceHolder>
 <link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <form id="form1" runat="server">
 <div id="topContent">
 <a href="Default.aspx">Master Pages Tutorials</a>
 </div>
 
 <div id="mainContent">
 <asp:ContentPlaceHolder id="MainContent" runat="server">
 </asp:ContentPlaceHolder>
 </div>
 
 <div id="leftContent">
 <h3>Lessons</h3>    
 <ul>
 <li>TODO</li>
 </ul>
 <h3>News</h3>    
 <ul>
 <li>TODO</li>
 </ul>
 </div>
 
 <div id="footerContent">
 <img src="Images/PoweredByASPNET.gif" alt="Powered by ASP.NET!" />
 </div>
 </form>
  </body>
</html>

マスターページのレイアウトは、一連の <div> HTML 要素を使用して定義されます。にはtopContent<div>、各ページの上部に表示されるマークアップが含まれます。一方mainContent<div>leftContentfooterContent、はそれぞれ、ページのコンテンツ、左側の列、および "Power by Microsoft ASP.NET" アイコンを表示するために使用されます。これらの<div>要素を追加するだけでなく、プライマリ ContentPlaceHolder コントロールのプロパティの名前をから ContentPlaceHolder1 にMainContent変更しましたID。

これらの並べ替えた<div>要素の書式設定とレイアウト規則は、マスターページ<head>の要素の要素を介して<link>指定されたカスケードスタイルシート (CSS) ファイルStyles.cssに記述されています。これらのさまざまなルールによって、上記の各 <div> 要素の外観が定義されます。たとえば、 topContent<div> "マスターページチュートリアル" のテキストとリンクを表示する要素には、次のように書式設定規則が指定されています Styles.css 。

#topContent {
 text-align: right;
 background-color: #600;
 color: White;
 font-size: x-large;
 text-decoration: none;
 font-weight: bold;
 padding: 10px;
 height: 50px;
}

コンピューターでフォローしている場合は、このチュートリアルの付随するコードをダウンロードし、ファイルを Styles.css プロジェクトに追加する必要があります。同様に、という名前 Images のフォルダーを作成し、ダウンロードしたデモ Web サイトから "Powered by Microsoft ASP.NET" アイコンをプロジェクトにコピーする必要もあります。

注意

CSS と Web ページの書式設定については、この記事の範囲外です。 CSS の詳細については、W3Schools.com の CSS チュートリアルをチェック。また、このチュートリアルの付随するコードをダウンロードし、の CSS 設定 Styles.css を使用して、さまざまな書式設定ルールの効果を確認することをお勧めします。

既存のデザインテンプレートを使用したマスターページの作成

長年にわたり、私は中小企業向けに多くの ASP.NET Web アプリケーションを構築してきました。私のクライアントの中には、使用したい既存のサイトレイアウトがありました。他の人は有能なグラフィックスデザイナーを雇いました。いくつかの人が私にウェブサイトのレイアウトを設計することを任せてくれた。図 6 でわかるように、プログラマに Web サイトのレイアウトを設計するように任せるのは、通常、医師が税金を行っている間に会計士が心開きの手術を行うのと同じくらい賢明です。

幸いなことに、無料のHTMLデザインテンプレートを提供する無邪気なウェブサイトがあります - Googleは検索用語「無料のウェブサイトテンプレート」のために600万件以上の結果を返しました。私のお気に入りの1つは OpenDesigns.org です。好きな Web サイトテンプレートを見つけたら、CSS ファイルと画像を Web サイトプロジェクトに追加し、テンプレートの HTML をマスターページに統合します。

注意

Microsoft では、Visual Studio の [新しい Web サイト] ダイアログボックスに統合される無料の ASP.NET デザインスタートキットテンプレートも多数用意されています。

手順 2: 関連するコンテンツページを作成する

マスターページを作成したら、マスターページにバインドされている ASP.NET ページの作成を開始する準備ができました。このようなページは 、コンテンツページと呼ばれます。

新しい ASP.NET ページをプロジェクトに追加し、マスターページに Site.master バインドしてみましょう。ソリューションエクスプローラーでプロジェクト名を右クリックし、[新しい項目の追加] オプションを選択します。 Web フォームテンプレートを選択し、名前About.aspxを入力し、図 7 に示すように [マスターページの選択] チェックボックスをチェックします。これにより、[マスターページの選択] ダイアログボックス (図 8 を参照) が表示され、そこで使用するマスターページを選択できます。

注意

Web サイトプロジェクトモデルではなく Web アプリケーションプロジェクトモデルを使用して ASP.NET Web サイトを作成した場合、図 7 の [新しい項目の追加] ダイアログボックスに [マスターページの選択] チェックボックスは表示されません。 Web アプリケーションプロジェクトモデルを使用するときにコンテンツページを作成するには、Web フォームテンプレートではなく Web コンテンツフォームテンプレートを選択する必要があります。 Web コンテンツフォームテンプレートを選択して [追加] をクリックすると、図 8 と同じ [マスターページの選択] ダイアログボックスが表示されます。

図 07: 新しいコンテンツページを追加する (フルサイズの画像を表示する場合はクリックします)

図 08: マスターページを選択します Site.master (フルサイズの画像を表示する場合にクリックします)

次の宣言型マークアップが示すように、新しいコンテンツページには、マスターページを指すディレクティブと、マスターページの各 ContentPlaceHolder コントロールの Content コントロールが含 @Page まれています。

<%@ Page Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="About.aspx.vb" Inherits="About" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
</asp:Content>

注意

手順 1 の [簡単なサイトレイアウトの作成] セクションで、名前をにMainContent変更しましたContentPlaceHolder1。この ContentPlaceHolder コントロールの ID 名前を同じ方法で変更しなかった場合、コンテンツページの宣言型マークアップは、上に示したマークアップと若干異なります。つまり、2 つ目の ContentPlaceHolderID Content コントロールには、マスターページ内の対応する ContentPlaceHolder コントロールのが反映 ID されます。

コンテンツページをレンダリングする場合、ASP.NET エンジンは、ページの Content コントロールをマスターページの ContentPlaceHolder コントロールと融合する必要があります。 ASP.NET エンジンは、ディレクティブMasterPageFileの属性からコンテンツページのマスターページを@Page決定します。上記のマークアップが示すように、このコンテンツページはに ~/Site.masterバインドされています。

マスターページには 2 つの ContentPlaceHolder コントロール head と MainContent Visual Web Developer によって生成された 2 つのコンテンツコントロールがあるためです。各 Content コントロールは、そのプロパティを使用して特定の ContentPlaceHolder を ContentPlaceHolderID 参照します。

マスターページが以前のサイト全体のテンプレート手法よりも優れているのは、デザイン時のサポートです。図 9 は、Visual Web Developer の About.aspx デザインビューで表示されるコンテンツページを示しています。マスターページのコンテンツは表示されますが、淡色表示され、変更できないことに注意してください。ただし、マスターページの ContentPlaceHolders に対応する Content コントロールは編集可能です。また、他の ASP.NET ページと同様に、[ソース] ビューまたは [デザイン] ビューを使用して Web コントロールを追加することで、コンテンツページのインターフェイスを作成できます。

図 09: コンテンツページのデザインビューには、Page-Specific とマスターページのコンテンツの両方が表示されます (フルサイズの画像を表示するをクリックします)

コンテンツページへのマークアップコントロールと Web コントロールの追加

少し時間を取って、ページのコンテンツを About.aspx 作成します。図 10 でわかるように、"About the Author" という見出しと 2 つの段落のテキストを入力しましたが、Web コントロールも自由に追加できます。このインターフェイスを作成したら、ブラウザーから About.aspx ページにアクセスします。

図 10: ブラウザーを使用してページに About.aspx アクセスする (フルサイズの画像を表示するをクリックします)

要求されたコンテンツページとそれに関連付けられているマスターページが融合され、Web サーバー上に全体としてレンダリングされることを理解しておくことが重要です。その後、エンドユーザーのブラウザーに、結果として生成された融合 HTML が送信されます。これを確認するには、[表示] メニューに移動し、[ソース] を選択して、ブラウザーで受信した HTML を表示します。 1 つのウィンドウに 2 つの異なる Web ページを表示するためのフレームやその他の特殊な手法がないことに注意してください。

マスターページを既存の ASP.NET ページにバインドする

この手順で見たように、ASP.NET Web アプリケーションに新しいコンテンツページを追加することは、[マスターページの選択] チェックボックスをオンにしてマスターページを選択するのと同じくらい簡単です。残念ながら、既存の ASP.NET ページをマスターページに変換するのは簡単ではありません。

マスターページを既存の ASP.NET ページにバインドするには、次の手順を実行する必要があります。

属性を MasterPageFile ASP.NET ページの @Page ディレクティブに追加し、適切なマスターページを指します。
マスターページの ContentPlaceHolders ごとにコンテンツコントロールを追加します。
ASP.NET ページの既存のコンテンツを選択して切り取り、適切なコンテンツコントロールに貼り付けます。 ASP.NET ページには、マスターページで既に表されているマークアップ (、要素、Web フォームなどDOCTYPE<html>) が含まれている可能性が高いため、ここでは "選択的に" と言います。

スクリーンショットと共にこのプロセスの詳細な手順については、Scott Guthrie のマスターページとサイトナビゲーションの使用に関するチュートリアルをチェック。「マスターページの更新 Default.aspx と DataSample.aspx 使用」セクションでは、これらの手順について詳しく説明します。

既存の ASP.NET ページをコンテンツページに変換するよりも、新しいコンテンツページを作成する方がはるかに簡単であるため、新しい ASP.NET Web サイトを作成するたびに、マスターページをサイトに追加することをお勧めします。すべての新しい ASP.NET ページをこのマスターページにバインドします。最初のマスターページが非常にシンプルでもプレーンでも心配ありません。後でマスターページを更新できます。

注意

新しい ASP.NET アプリケーションを作成するときに、Visual Web Developer はマスターページにバインドされていないページを追加 Default.aspx します。既存の ASP.NET ページをコンテンツページに変換する練習をする場合は、を使用 Default.aspxして行います。または、削除 Default.aspx してから再追加することもできますが、今回は [マスターページの選択] チェックボックスをオンにします。

手順 3: マスターページのマークアップを更新する

マスターページの主な利点の 1 つは、1 つのマスターページを使用して、サイト上の多数のページの全体的なレイアウトを定義できる点です。そのため、サイトの外観を更新するには、単一のファイル (マスターページ) を更新する必要があります。

この動作を説明するために、マスターページを更新して、左側の列の先頭に現在の日付を含めます。という名前 DateDisplay のラベルをに追加します leftContent<div>。

<div id="leftContent">
 <p>
 <asp:Label ID="DateDisplay" runat="server"></asp:Label>
 </p>
 
 <h3>Lessons</h3>    
 <ul>
 <li>TODO</li>
 </ul>
 <h3>News</h3>    
 <ul>
 <li>TODO</li>
 </ul>
</div>

次に、マスターページの Page_Load イベントハンドラーを作成し、次のコードを追加します。

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
 DateDisplay.Text = DateTime.Now.ToString("dddd, MMMM dd")
End Sub

上のコードは、Label の Text プロパティを、曜日、月の名前、2 桁の日として書式設定された現在の日付と時刻に設定します (図 11 を参照)。この変更により、コンテンツページの 1 つをもう一度確認します。図 11 に示すように、結果のマークアップはすぐに更新され、マスターページへの変更が含まれます。

図 11: コンテンツページを表示するときにマスターページへの変更が反映される (フルサイズの画像を表示するをクリックします)

注意

この例に示すように、マスターページにはサーバー側の Web コントロール、コード、およびイベントハンドラーが含まれている場合があります。

まとめ

マスターページを使用すると、ASP.NET 開発者は、簡単に更新可能な一貫したサイト全体のレイアウトを設計できます。マスターページとそれに関連付けられたコンテンツページの作成は、Visual Web Developer が豊富なデザイン時サポートを提供するように、標準の ASP.NET ページを作成するのと同じくらい簡単です。

このチュートリアルで作成したマスターページの例には、head と MainContent の 2 つの ContentPlaceHolder コントロールがありました。ただし、コンテンツページで MainContent ContentPlaceHolder コントロールのマークアップのみを指定しました。次のチュートリアルでは、コンテンツページで複数のコンテンツコントロールを使用する方法について説明します。また、マスターページ内のコンテンツコントロールの既定のマークアップを定義する方法と、マスターページで定義されている既定のマークアップの使用とコンテンツページからのカスタムマークアップの提供を切り替える方法についても説明します。

幸せなプログラミング!

もっと読む

このチュートリアルで説明するトピックの詳細については、次のリソースを参照してください。

著者について

複数の ASP/ASP.NET 書籍の著者であり、4GuysFromRolla.com の創設者である Scott Mitchell は、1998 年から Microsoft Web テクノロジと協力しています。 Scott は独立したコンサルタント、トレーナー、ライターとして働いています。彼の最新の本は サムズ・ティーチ・イン・ヒア ASP.NET 24時間で3.5です。 Scott は、または mitchell@4GuysFromRolla.com のブログを http://ScottOnWriting.NET介してアクセスできます。

特別な感謝

今後の MSDN 記事の確認に関心がありますか? その場合は、に行 mitchell@4GuysFromRolla.comをドロップしてください。

前へ次へ

次の方法で共有

マスターページを利用してサイト全体レイアウトを作成する (VB)

はじめに

マスターページのしくみについて

手順 1: マスターページを作成する

シンプルなサイトレイアウトの作成

既存のデザインテンプレートを使用したマスターページの作成

手順 2: 関連するコンテンツページを作成する

コンテンツページへのマークアップコントロールと Web コントロールの追加

マスターページを既存の ASP.NET ページにバインドする

手順 3: マスターページのマークアップを更新する

まとめ

もっと読む

著者について

特別な感謝

フィードバック

フィードバック

その他のリソース

次の方法で共有

マスター ページを利用してサイト全体レイアウトを作成する (VB)

はじめに

マスター ページのしくみについて

手順 1: マスター ページを作成する

シンプルなサイト レイアウトの作成

既存のデザイン テンプレートを使用したマスター ページの作成

手順 2: 関連するコンテンツ ページを作成する

コンテンツ ページへのマークアップコントロールと Web コントロールの追加

マスター ページを既存の ASP.NET ページにバインドする

手順 3: マスター ページのマークアップを更新する

まとめ

もっと読む

著者について

特別な感謝

フィードバック

フィードバック

その他のリソース

マスターページを利用してサイト全体レイアウトを作成する (VB)

マスターページのしくみについて

手順 1: マスターページを作成する

シンプルなサイトレイアウトの作成

既存のデザインテンプレートを使用したマスターページの作成

手順 2: 関連するコンテンツページを作成する

コンテンツページへのマークアップコントロールと Web コントロールの追加

マスターページを既存の ASP.NET ページにバインドする

手順 3: マスターページのマークアップを更新する