次の方法で共有


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

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


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

最終更新日 2005 年 11 月 17 日

目標 ASP.NET 2.0 による一貫性と柔軟性に優れたサイト デザイン
使用技術
  • ASP.NET 2.0
  • Visual Basic 2005
取り上げるトピックス
  • ASP.NET 2.0 テーマ, スキン, マスタ ページ
前提知識
目次
備考  

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

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

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

Professional テーマの新規作成 

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

Professional スキンの新規作成 

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

Professionalスキンの新規作成 

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」 という名前のをスタイル シートを新規作成します。

PageCatalogPart コントロールの配置 

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

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

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

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 テーマにスキンとスタイルシートが配置されました。

Colorful テーマが完成
 

 

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

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

 

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

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

マスタ ページの新規作成 

 

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

 ユーザー コントロールの配置

次に、『コンテンツページの作成』について説明します。

 

ページのトップへ