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

[アーティクル]
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 コントロールは、マスターページのコントロール階層内で、コンテンツページによってカスタムコンテンツを挿入できる位置を示すだけです。

Note

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

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

マスターページでは、コンテンツページごとにサイト全体のレイアウトと編集可能な領域を定義します。

図 02: マスターページは、コンテンツページ単位を基本として編集可能なサイト全体のレイアウトとリージョンを定義します。

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

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

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

Note

可能な限り幅広い対象ユーザーにご利用いただくために、このチュートリアルシリーズ全体を通して構築する ASP.NET Web サイトは、 ASP.NET 3.5 と Microsoft の無料バージョンの Visual Studio 2008 である Visual Web Developer 2008 を使用して作成されます。 ASP.NET 3.5 にまだアップグレードしていない場合もご安心ください。これらのチュートリアルで説明されている概念は、ASP.NET 2.0 と Visual Studio 2005 でも同様に機能します。ただし、一部のデモアプリケーションでは、.NET Framework バージョン 3.5 の新機能を使用しているものもあります。3.5 固有の機能を使用する場合は、バージョン 2.0 で同様の機能を実装する方法について説明するメモが含まれています。各チュートリアルからダウンロードできるデモアプリケーションは .NET Framework バージョン 3.5 を対象としており、その結果として Web.config ファイルには 3.5 固有の構成要素が含まれ、ASP.NET ページの分離コードクラスの using ステートメントには 3.5 固有の名前空間への参照が含まれることに注意してください。簡単に言うと、コンピューターに .NET 3.5 をまだインストールしていない場合、このダウンロード可能な Web アプリケーションは、先に Web.config から 3.5 固有のマークアップを削除しないと機能しません。このトピックの詳細については、Web.config ファイルに関する記事を参照してください。また、3.5 固有の名前空間を参照する using ステートメントも削除する必要があります。

手順 1: マスターページの作成

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

Note

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

図 04: 新しいファイルシステムベースの Web サイトを作成する (クリックするとフルサイズの画像が表示されます)

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

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

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

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" 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 ディレクティブに似ています。これは、サーバー側言語 (C#) と、マスターページの分離コードクラスの場所と継承に関する情報を定義します。

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 を追加したりすることは自由にできます。

Note

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

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

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

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

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

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" 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、leftContent、およびfooterContent <div>は、ページのコンテンツ、左側の列、および "Power by Microsoft ASP.NET" アイコンをそれぞれ表示するために使用されます。これらの <div> 要素を追加することに加えて、プライマリ ContentPlaceHolder コントロールの ID プロパティの名前を ContentPlaceHolder1 から MainContent に変更しました。

これら各種の <div> 要素の書式設定とレイアウトのルールは、カスケードスタイルシート (CSS) ファイルである Styles.css 内に記述され、これはマスターページの <head> 要素内の <link> 要素を介して指定されます。これらのさまざまな規則によって、上記の各 <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" アイコンをプロジェクトにコピーする必要もあります。

Note

CSS と Web ページの書式設定に関する説明については、この記事の範囲外です。 CSS の詳細については、W3Schools.com の CSS チュートリアルを参照してください。また、このチュートリアルの付属コードをダウンロードし、さまざまな書式設定規則の効果を確認するために Styles.css の CSS 設定を操作することをお勧めします。

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

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

幸運にも、無料の HTML デザインテンプレートを提供する Web サイトは無数にあります。Google は、"無料の Web サイトテンプレート" という検索語で 600 万件以上の結果を返しました。私のお気に入りの 1 つは OpenDesigns.org です。お気に入りの Web サイトテンプレートが見つかったら、CSS ファイルとイメージを Web サイトプロジェクトに追加し、テンプレートの HTML をマスターページに統合します。

Note

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

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

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

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

Note

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

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

図 08: Site.master マスターページの選択 (クリックするとフルサイズの画像が表示されます)

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

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="About.aspx.cs" 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>

Note

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

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

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

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

図 09: コンテンツページのデザインビューに表示された、ページ固有のコンテンツとマスターページのコンテンツ (クリックするとフルサイズの画像が表示されます)

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

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

図 10: ブラウザー経由の About.aspx ページへのアクセス (クリックするとフルサイズの画像が表示されます)

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

既存の ASP.NET ページへのマスターページのバインド

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

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

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

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

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

Note

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 void Page_Load(object sender, EventArgs e)
{
    DateDisplay.Text = DateTime.Now.ToString("dddd, MMMM dd");
}

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

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

Note

この例が示すように、マスターページにはサーバー側の 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 は、独立したコンサルタント、トレーナー、ライターとして働いています。彼の最新の著書は、「Sams Teach Yourself ASP.NET 3.5 in 24 Hours」です。 Mitchell 氏には、mitchell@4GuysFromRolla.com から、または http://ScottOnWriting.NET で彼のブログを介して連絡できます。

特別な感謝

今後の MSDN の記事を確認することに関心がありますか? ご希望の場合は、mitchell@4GuysFromRolla.com までメッセージをお送りください。

次の方法で共有

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

はじめに

マスターページのしくみの理解

手順 1: マスターページの作成

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

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

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

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

既存の ASP.NET ページへのマスターページのバインド

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

まとめ

もっと読む

作成者について

特別な感謝

フィードバック

その他のリソース

次の方法で共有

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

はじめに

マスター ページのしくみの理解

手順 1: マスター ページの作成

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

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

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

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

既存の ASP.NET ページへのマスター ページのバインド

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

まとめ

もっと読む

作成者について

特別な感謝

フィードバック

その他のリソース

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

マスターページのしくみの理解

手順 1: マスターページの作成

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

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

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

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

既存の ASP.NET ページへのマスターページのバインド

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