ステップ 7 ハンズオン : ASP.NET 2.0 による一貫性と柔軟性に優れたサイト デザイン その 2

テーマとマスタ ページの作成

グローバル ナレッジ ネットワーク株式会社
ナレッジ ソリューション本部 鈴木和久

最終更新日 2005 年 11 月 17 日

テーマとマスタ ページの作成

ここでは、2 つのテーマを作成し、その 1 で作成した共通 UI 部品をマスタ ページに配置します。

ソリューション エクスプローラでプロジェクトを右クリックし、[ASP.NET フォルダの追加] - [Theme] を選択し、App_Themes フォルダを新規作成します。

App_Themes フォルダを右クリックし、[ASP.NET フォルダの追加] - [Theme] を選択し、テーマ フォルダを新規作成します。作成されたフォルダ名は「Professional」 に変更します。

Professional フォルダを右クリックし、[新しい項目の追加] を選択し、「Professional.skin」 という名前のをスキンを新規作成します。

Professional.skin に、GridView コントロールと Calendar コントロールのスキンを定義します。この 2 つのスキンは、各コントロールのタスクメニューからオート フォーマットをクリックし、プロフェッショナルを選択した場合のスタイルと同一のものです。

<asp:GridView runat="server" ForeColor="#333333" GridLines="None">
  <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
  <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
  <EditRowStyle BackColor="#999999" />
  <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
  <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
  <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
  <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:GridView>

<asp:Calendar runat="server" BackColor="White" BorderColor="Black" BorderStyle="Solid" CellSpacing="1" Font-Names="Verdana" Font-Size="XX-Small" ForeColor="Black" Height="104px" NextPrevFormat="ShortMonth" Width="183px">
  <SelectedDayStyle BackColor="#333399" ForeColor="White" />
  <TodayDayStyle BackColor="#999999" ForeColor="White" />
  <DayStyle BackColor="#CCCCCC" />
  <OtherMonthDayStyle ForeColor="#999999" />
  <NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="White" />
  <DayHeaderStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333" Height="8pt" />
  <TitleStyle BackColor="#333399" BorderStyle="Solid" Font-Bold="True" Font-Size="12pt" 
     ForeColor="White" Height="12pt" />
</asp:Calendar>

Professional フォルダを右クリックし、[新しい項目の追加] を選択し、「Professional.css」 という名前のをスタイル シートを新規作成します。

Professional.css に、ハイパー リンク要素のスタイルを定義します。これにより、ハイパー リンク文字要素にマウスがポイントされると文字色が赤色に変化します。

A:link { color : #0000FF; text-decoration : none}
A:visited { color : #800080; text-decoration : none}
A:hover { color: #FF0000; text-decoration : none}

ここまでの作業で、Professional テーマにスキンとスタイルシートが配置されました。

App_Themes フォルダを右クリックし、[ASP.NET フォルダの追加] - [Theme] を選択し、2 つ目のテーマ フォルダを新規作成します。作成されたフォルダ名は「Colorful」 に変更します。 

Colorful フォルダを右クリックし、[新しい項目の追加] を選択し、「Colorful.skin」 という名前のをスキンを新規作成します。

Colorful.skin に、GridView コントロールと Calendar コントロールのスキンを定義します。この 2 つのスキンは、各コントロールのタスクメニューからオート フォーマットをクリックし、カラフルを選択した場合のスタイルと同一のものです。

<asp:GridView runat="server" ForeColor="#333333" GridLines="None">
 <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
 <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
 <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
 <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
 <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
 <AlternatingRowStyle BackColor="White" />
</asp:GridView>

<asp:Calendar runat="server" BackColor="#FFFFCC" BorderColor="#FFCC66" BorderWidth="1px" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="#663399" Height="163px" ShowGridLines="True" Width="187px">
 <SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
 <TodayDayStyle BackColor="#FFCC66" ForeColor="White" />
 <SelectorStyle BackColor="#FFCC66" />
 <OtherMonthDayStyle ForeColor="#CC9966" />
 <NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />
 <DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" />
 <TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt" ForeColor="#FFFFCC" />
</asp:Calendar>

Colorful フォルダを右クリックし、[新しい項目の追加] を選択し、「Colorful.css」 という名前のをスタイル シートを新規作成します。

Colorful.css に、ハイパー リンク要素のスタイルを定義します。これにより、ハイパー リンク文字要素にマウスがポイントされると文字色がオレンジ色に変化します。

A:link { color : #0000FF; text-decoration : none}
A:visited { color : #800080; text-decoration : none}
A:hover { color: #FFA500; text-decoration : none}

ここまでの作業で、Colorful テーマと Professional テーマにスキンとスタイルシートが配置されました。

Web.config ファイルで、アプリケーション レベルで適用される既定のテーマを Professional テーマに指定します。

<system.web> 
  <compilation debug="true" strict="false" explicit="true"/>
  <pages theme="Professional">
    <namespaces>
      <clear/>

マスタ ページを新規作成します。

マスタ ページの詳細については 「ステップ 7 ハンズオン : ASP.NET 2.0 マスタ ページによるページテンプレートの実装」を参考にしてください。

マスタ ページを新規作成し、その 1 で作成したユーザー コントロール群を配置します。

ページのトップへ