.NET開発者のためのブログメディア

ASP.NETでWebアプリケーションを開発するうえで、よく利用される手法のひとつがマスターページの活用です。
マスターページはWebサイトの土台となる部分でもありますので、理解を改めて深めてみましょう。

SE: マスターページって呼ばれるくらいですから、なんだかすごく重要な役割を担ってそうですね。簡単に作成できるものなのでしょうか？

PM: 作成自体は簡単にできますよ。しかし、マスターページはとても大事なページです。システムやプログラミングに詳しい方が主に作成するところでもありますね。

実行環境
・Visual Studio 2019（.NET Framework 4.8）

ASP.NETにおけるマスターページの役割

ASP.NETでWebアプリケーションを開発するのに重要な役割を担うのが、マスターページです。マスターページを言い換えますと、「Webサイトのテンプレートを定義するページ」になります。

一般的なWebサイトでは、サイトロゴ、タイトル、サイドメニューなど、どのページでも共通する固定ページが存在します。
これらの共通する部分は、コピー&ペーストで個別のページ（.aspx）にそれぞれ実装することも可能ですが、共通部分に変更が発生した場合に、すべてのページを修正しなければならず非効率です。

ASP.NETのマスターページを利用すると、共通部分の情報を1枚のページとして管理できます。ASP.NETを活用して開発が行われる現場では、よく利用されるアイテムのひとつだといえるでしょう。
マスターページをはじめに開発することによって、どのWebページでも固定で表示させたい領域や、Webページ単位で出力させたい領域などのカスタマイズにも柔軟に対応することが可能となります。

マスターページの作成方法と簡単なサンプルソース

まずは、Visual Studioにてマスターページを作成しましょう。今回の開発言語はVisual Basic（以下VB）とします。

ソリューションエクスプローラーにて、プロジェクトのプロパティ項目で右クリックします。「追加」をクリックし、「新しい項目」を選択してください。次に、Webフォームタブにて、Webフォームのマスターページを選択します。ファイル名の拡張子が「.master」であることが確認できたら、「追加」ボタンを押下し、マスターページを作成します。

マスターページ追加

ここからマスターページのサンプルソースを一緒に見てみましょう。
マスターページでは、ContentPlaceHolderコントロールが必須です。通常は自動生成されていますので、削除しないように注意しましょう。それ以外は、概ねaspxファイルと同じように作りこむことができます。

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site1.master.vb" Inherits="WebApplication1.Site1" %>

<!DOCTYPE html>

<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" runat="server" Text="master"></asp:TextBox>
        </div>
        <div>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </form>
</body>
</html>

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site1.master.vb" Inherits="WebApplication1.Site1" %>

<!DOCTYPE html>

<html>

<asp:ContentPlaceHolder ID="head" runat="server">

</asp:ContentPlaceHolder>

</head>

<body>

<div>

<asp:TextBox ID="TextBox1" runat="server" Text="master"></asp:TextBox>

</div>

<div>

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>

</div>

</form>

</body>

</html>

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site1.Master" CodeBehind="WebForm2.aspx.vb" Inherits="WebApplication1.WebForm2" %>
<%@ MasterType VirtualPath="~/Site1.master" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div>
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    </div>
    <div>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
    </div>
</asp:Content>

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site1.Master" CodeBehind="WebForm2.aspx.vb" Inherits="WebApplication1.WebForm2" %>

<%@ MasterType VirtualPath="~/Site1.master" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<div>

<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

</div>

<div>

<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />

</div>

</asp:Content>

Public Class WebForm2
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        TextBox2.Text = "Webform"
    End Sub

End Class

Public Class WebForm2

Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

End Sub

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)

TextBox2.Text = "Webform"

End Sub

End Class

実行画面
ボタンを押下します。結果としてWebページに設定したテキストボックスに値が設定されます。

実行画面

ボタン押下

実行画面（ボタン押下）

サイトレイアウトの作成

マスターページを作成する方法を確認したところで、次に、すべてのページで共通するヘッダー、サイドメニューを表示するマスターページを作成します。

今回は、次のイメージのようなサイトレイアウトで、マスターページを作成するサンプルコードを紹介します。

マスターページのレイアウト

前の手順で作成したマスターページ（.master）に、共通のヘッダー、サイドメニュー、フッターの定義を追加しましょう。

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication3.SiteMaster" %>

<!DOCTYPE html>

<html lang="ja">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%: Page.Title %> - マイ ASP.NET アプリケーション</title>
    <webopt:bundlereference runat="server" path="~/Content/css" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
    <form runat="server">
    <!--共通ヘッダー-->
    <header>
      <a href="/">サイトタイトル</a>
    </header>
 
    <!--サイドメニュー-->
    <nav id="left-content">  
      <ul>  
        <li><a href="/">Home</a></li>  
        <li><a href="#">About</a></li>  
        <li><a href="#">Contact</a></li>  
      </ul>  
    </nav>
 
    <!--メインコンテンツー-->
    <main>
       <asp:ContentPlaceHolder id="MainContent" runat="server">
       </asp:ContentPlaceHolder>
    </main>
 
    <!--共通フッター-->
    <footer>
      フッター
    </footer>
    </form>
</body>
</html>

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication3.SiteMaster" %>

<!DOCTYPE html>

<title><%: Page.Title %> - マイ ASP.NET アプリケーション</title>

<webopt:bundlereference runat="server" path="~/Content/css" />

</head>

<body>

<a href="/">サイトタイトル</a>

</header>

<ul>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

<main>

<asp:ContentPlaceHolder id="MainContent" runat="server">

</asp:ContentPlaceHolder>

</main>

フッター

</footer>

</form>

</body>

</html>

スタイルシート（Site.css）には、次のように記述します。

body {
    margin: 0;
}

header {
    top: 0;
    left: 0;
    position: fixed;
    text-align: center;
    font-size: 20px;
    height: 50px;
    background: #333;
    width: 100%;
}

header a {
    color: #fff;
}

#left-content {
    position: fixed;
    top: 50px;
    left: 0px;
    width: 200px;
    background: #f2f2f2;
    height: 100vh;
}

ul {
    list-style-type: none;
}

li a {
    color: #333;
    font-size: 30px;
}

a {
    text-decoration: none;
}

main {
    background-color: #fff;
    padding: 2vh;
    margin-top: 50px;
    margin-left: 200px;
    min-height: calc(96vh - 100px);
}

footer {
    background-color: #ddd;
    font-size: 15px;
    height: 50px;
    margin-left: 200px;
}

body {

margin: 0;

}

header {

top: 0;

left: 0;

position: fixed;

text-align: center;

font-size: 20px;

height: 50px;

background: #333;

width: 100%;

}

header a {

color: #fff;

}

#left-content {

position: fixed;

top: 50px;

left: 0px;

width: 200px;

background: #f2f2f2;

height: 100vh;

}

ul {

list-style-type: none;

}

li a {

color: #333;

font-size: 30px;

}

a {

text-decoration: none;

}

main {

background-color: #fff;

padding: 2vh;

margin-top: 50px;

margin-left: 200px;

min-height: calc(96vh - 100px);

}

footer {

background-color: #ddd;

font-size: 15px;

height: 50px;

margin-left: 200px;

}

これでヘッダー、サイドメニュー、フッターを一元管理することが可能になりました。
後から変更があった場合でもマスターページだけ修正すれば、すべてのページに反映させることができます。

SE: 作成自体は本当に簡単にできますね。ここからWebサイトのテンプレートとなる大事な箇所をコーディングしていくわけですね。まずは自分でやってみます！

PM: そうですね。マスターページの入れ子などの技法を使うと、よりマスターページがどれほど重要になってくるのか、分かるかもしれませんよ。

マスターページの作成は初めに行いましょう

マスターページはWebアプリケーションを開発するための土台となる部分だと言えます。まずは、マスターページを作成してWebサイトの基盤を準備してから、他のWebページを作成していくことをおすすめします。

>>>Visual BasicやASP.NETの案件を探すならFEnet .NET Navi

.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー（応募フォーム）

Visual BasicとASP.NETでマスターページを作成する方法

ASP.NETにおけるマスターページの役割

マスターページの作成方法と簡単なサンプルソース

サイトレイアウトの作成

マスターページの作成は初めに行いましょう