サンプル コードのダウンロード (aspnettips_Theme1.msi, 234 KB)

※このサンプルをお使いいただくためには、 Visual Studio 2005が必要です。

ASP.NET 2.0 では、「テーマ」機能を使うことで、Web サイト内にあるコンテンツの表示色や表示形式を簡単に統一できます。あるページのテキストボックスの色が灰色なのに、別のページでは白色になっていたりすると、ユーザーが混乱してしまいます。そうした混乱を防ぐために、Web サイト内のページデザインは、一貫性を持つ必要があります。「テーマ」機能を使えば、後からまとめてデザインを変更することもできるので便利です。

今回、二つのテーマ、blue と red を作成してみます。それぞれのテーマを同じページに反映すると図1 のようになります。

今回は、次の手順でページを作成します。

1. テーマを保存するフォルダを作成

2. スキンの作成

3. スタイルシートの作成

4. テーマの反映

5. 実行

(1) テーマを保存するフォルダを作成

テーマを作成するためには、Web サイトの仮想フォルダ内に App_Themes というフォルダを用意し、その中にさらにテーマ名ごとにフォルダを作成します。

Visual Studio 2005 のソリューション エクスプローラ内で、仮想フォルダを右クリックし、ポップアップメニューから [フォルダの追加] - [テーマ フォルダ] を選択します。App_Themes\テーマ1 というフォルダが作成されるので、フォルダ名「テーマ1」を「blue」に変更します（図2）。

同じ方法で、もう一つ App_Themes\red というフォルダも作成します。

(2) スキンの作成

作成したテーマ フォルダの中には、「スキン」と「スタイルシート」の 2 種類の定義ファイルを置くことができます。スキンは、サーバーコントロールの見た目のプロパティを定義するためのファイルです。スタイルシートは、いわゆる CSS (Cascading Style Sheet) のことです。スキンとスタイルシートは、テーマとして同時に反映させることもできます。

まず、blue テーマと red テーマについて、それぞれスキンを作成します。blue フォルダで、[新しい項目の追加] を選択し、ダイアログボックスで「スキン ファイル」を選んでください。ファイル名は、デフォルト (SkinFile.skin) のままでかまいません（図3）。

同様に、red フォルダの下にもスキンファイル (red\SkinFile.skin) を作成します。

スキンファイルには、各サーバーコントロールのスタイル プロパティを普通の aspx ファイルと同じように定義できます。今回は、次リストのように TextBox コントロールと Calendar コントロールの色を定義しています。

asp:TextBox runat="server" BackColor="#87cefa" />
<asp:Calendar runat="server" ForeColor="#0000C0" />

リスト1 blue\SkinFile.skin

asp:TextBox runat="server" BackColor="#f08080" />
<asp:Calendar runat="server" ForeColor="#da0b00" />

リスト2 red\SkinFile.skin

TextBox コントロールと Calendar コントロールを、blue\SkinFile.skin では青系色に、red\SkinFile.skin では赤系色にしています。

(3) スタイルシートの作成

次に、スタイルシートを作成します。blue フォルダで、[新しい項目の追加] を選択し、ダイアログボックスで「スタイル シート」を選んでください。ファイル名は、デフォルト (StyleSheet.css) のままでかまいません。

同様に、red フォルダの下にもスタイルシート (red\StyleSheet.css) を作成します。

スタイルシートの書き方は、一般的な CSS の書き方と同じです。今回は、次リストのようにページの背景色を定義しています。

body {background-color:#eeeeff;
}

リスト3 blue\StyleSheet.css

body {background-color:#ffeeee;
}

リスト4 red\StyleSheet.css

ページの背景色を、blue\StyleSheet.css では青系色に、red\StyleSheet.css では赤系色にしています。

(4) テーマの反映

作成したテーマを Web サイト全体に反映させるには、Web.config ファイルに pages 要素を追加します。blue テーマを反映する場合は、次の 1 行を追加します。

<pages theme="blue" />

リスト5 Web.config

テーマの動作を確認するため、Default.aspx に Calendar コントロールと TextBox コントロールを貼り付けておきます。

(5) 実行

実行してみます。青系色のページが表示されます。

Web.config ファイルの中身を書き換えてテーマを red に変更してから、ページを再度表示すると次のように赤系色にのページが表示されます。

ページのトップへ