チュートリアル : ユーザーが選択できるテーマの作成
更新 : 2007 年 11 月
このチュートリアルは、ページのテーマをユーザーが選択できる ASP.NET ページを作成する方法を説明します。この例では 1 つのコントロール スキンと基本のカスケード スタイル シート (CSS: Cascading Style Sheet) ファイルを使用しますが、ここで紹介する基本原則は、グラフィックス、CSS ファイルの異なるレイアウト方法、複雑なサーバー コントロール スキンなど、より複雑なテーマにも適用されます。
このチュートリアルでは、以下のタスクを行います。
Microsoft Visual Web Developer で CSS ファイルやサーバー コントロール スキンなどのテーマを作成します。
テーマを使用する ASP.NET マスタ ページを作成します。
テーマを使用するマスタ ページを適用した ASP.NET ページを作成します。
マスタ ページ要素のスタイル変更など、新しいテーマをページに適用するドロップダウン リストのサーバー コントロールを作成します。
ページを実行して、ページに適用されたそれぞれのテーマを表示します。
前提条件
このチュートリアルを完了するための要件を次に示します。
Visual Web Developer (Visual Studio)
.NET Framework
Web サイトの作成
「チュートリアル : Visual Web Developer での基本的な Web ページの作成」などの手順に従って既に Visual Web Developer を使用して Web サイトを作成済みの場合、その Web サイトを利用できるので、次のセクションの「マスタ ページの作成」にスキップしてもかまいません。それ以外の場合は、次の手順に従って、新しい Web サイトおよびページを作成します。
ファイル システム Web サイトを作成するには
Visual Web Developer を開きます。
[ファイル] メニューの [新しい Web サイト] をクリックします。
[新しい Web サイト] ダイアログ ボックスが表示されます。
[Visual Studio にインストールされたテンプレート] の [ASP.NET Web サイト] をクリックします。
[場所] ボックスに、Web サイトのページを格納するフォルダの名前を入力します。
たとえば、フォルダ名として「C:\WebSites」と入力します。
[言語] ボックスの一覧で、作業に使用するプログラミング言語をクリックします。
[OK] をクリックします。
Visual Web Developer によりフォルダが作成され、Default.aspx という名前の新しいページが作成されます。
テーマの作成
テーマは、ページとコントロールの外観を定義できるプロパティ設定のコレクションです。Web アプリケーションのページに一貫してこの外観を適用できます。テーマは、サーバー コントロール スキン、CSS ファイル、その他のリソースという複数の要素から構成されます。この例では、スキンとスタイル シートを使用してテーマを作成します。
テーマは Web サイト プロジェクトの特殊なディレクトリに定義されます。
テーマを作成するには
ソリューション エクスプローラで、Web サイト プロジェクト名を右クリックし、[ASP.NET フォルダの追加] をクリックし、[テーマ] をクリックします。
App_Themes フォルダは自動的に作成されます。また、Theme1 という新しいテーマ フォルダが追加されます。
新しい Theme1 フォルダを右クリックし、[名前の変更] をクリックします。「Blue」と入力し、Enter キーを押します。
新しい Blue フォルダを右クリックし、[新しい項目の追加] をクリックします。
[新しい項目の追加] ダイアログ ボックスの [スキン ファイル] を選択し、default.skin をクリックします。[追加] をクリックします。
ソリューション エクスプローラで、新しい Blue フォルダをもう一度右クリックし、[新しい項目の追加] をクリックします。
[新しい項目の追加] ダイアログ ボックスにある [スタイル シート] を選択します。スタイル シートに default.css と名前を付けます。[追加] をクリックします。
CSS ファイルとサーバー コントロール スキン ファイルが空の状態の最初のテーマが作成されます。これらのファイルはすぐに編集できますが、まずテーマを適用できるコントロールと HTML を設定したページを作成する必要があります。
マスタ ページの作成
マスタ ページとそのマスタ ページを使用するページの両方にテーマを簡単に適用できることを示すために、単純なマスタ ページを作成し、Web プロジェクトの Default.aspx ページで使用します。
マスタ ページを作成するには
ソリューション エクスプローラで、Web サイトの名前を右クリックし、[新しい項目の追加] をクリックします。
[Visual Studio にインストールされたテンプレート] の [マスタ ページ] をクリックします。
[名前] ボックスに「Master1.master」と入力します。
[言語] ボックスで、使用するプログラミング言語をクリックします。
[別のファイルにコードを書き込む] チェック ボックスをオフにし、[追加] をクリックします。
新しいマスタ ページがソース ビューに表示されます。ページの上部には、通常は ASP.NET ページの上部にある @ Page 宣言の代わりに、@ Master 宣言が表示されます。ページの本文には、asp:contentplaceholder コントロールが含まれます。これは、実行時にコンテンツ ページから置換可能なコンテンツがマージされるマスタ ページの領域を定義します。このコンテンツ プレースホルダの操作方法は、後でこのチュートリアルで説明します。
マスタ ページの配置
マスタ ページはページにマークアップを指定する要素を定義します。マスタ ページには、静的テキストとコントロールの任意の組み合わせを含めることができます。マスタ ページには、ページを表示したときに動的コンテンツが表示される場所を指定する 1 つ以上のコンテンツ プレースホルダを含めることもできます。
このチュートリアルでは、タイトル、数本の水平の境界線、マスタ ページのコンテンツ プレースホルダを Home.aspx ページのレイアウトに使用します。
マスタ ページのテーブルを作成するには
ソース ビューで Master1.master ファイルが選択されている状態で、2 つの form 要素に囲まれるテキストを選択し、次のコンテンツを選択した領域に貼り付けます。このコードは、既定のマスタ レイアウトのように div 要素の間ではなく、テーブルにコンテンツ プレースホルダを配置します。
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="header"> <tr> <td class="title">Switchable Themes Example</td> </tr> <tr> <td><hr /></td> </tr> <tr> <td> <asp:contentplaceholder id="ContentPlaceHolder1" runat="server"> </asp:contentplaceholder> </td> </tr> <tr> <td><hr /></td> </tr> </table><table width="100%" cellspacing="0" cellpadding="0" border="0" class="header"> <tr> <td class="title">Switchable Themes Example</td> </tr> <tr> <td><hr /></td> </tr> <tr> <td> <asp:contentplaceholder id="ContentPlaceHolder1" runat="server"> </asp:contentplaceholder> </td> </tr> <tr> <td><hr /></td> </tr> </table>マスタ ページには、次のセクションで作成するコンテンツ ページ (Home.aspx) に適用できるレイアウトが作成されました。
コンテンツ ページの作成
マスタ ページはコンテンツのテンプレートを提供します。マスタ ページに関連付けられた ASP.NET ページを作成して、マスタ ページのコンテンツを定義します。コンテンツ ページは、マスタ ページとマージされるコンテンツだけを含む専用の ASP.NET ページです。コンテンツ ページで、ユーザーがそのページを要求したときに表示するテキストとコントロールを追加します。
コンテンツ ページでは、作成したマスタ ページと未完成のテーマを使用します。このページはマスタ ページのコンテンツ プレースホルダを使用し、タイトル、サブタイトル、ドロップダウン リストが含まれます。このページではマスタ ページを使用するため、コンテンツ プレースホルダだけでなく、@ Page ディレクティブに MasterPageFile 属性を含める必要があります。
コンテンツ ページを作成するには
ソリューション エクスプローラで、Web サイトの名前を右クリックし、[新しい項目の追加] をクリックします。
[Visual Studio にインストールされたテンプレート] の [Web フォーム] をクリックします。
[名前] ボックスに「Home」と入力します。
[言語] ボックスで、使用するプログラミング言語をクリックします。
[マスタ ページを選択する] チェック ボックスをオンにし、[追加] をクリックします。
[マスタ ページを選択してください] ダイアログ ボックスが表示されます。
Master1.master をクリックし、[OK] をクリックします。
Home.aspx という新規ファイルが作成されます。次のコード例に示すように、このページには、MasterPageFile 属性を持つ選択されたマスタ ページに現在のページを追加する @ Page ディレクティブが含まれます。
<%@ Page Language="VB" MasterPageFile="~/Master1.master" ... %><%@ Page Language="C#" MasterPageFile="~/Master1.master" ... %>このページには、次に使用する <asp:Content> 要素も含まれます。
コンテンツ ページへのコンテンツの追加
コンテンツ ページには、html、body、または form の各要素など、ASP.NET ページを構成する通常の要素はありません。代わりに、マスタ ページで作成したプレースホルダ領域を置換することで、マスタ ページに表示するコンテンツだけを追加します。この例では、見出し 1 要素、見出し 2 要素、段落要素、およびドロップダウン リストを追加できます。ドロップダウン リストを使用してページに適用するテーマを選択します。
ホーム ページにコンテンツを追加するには
asp:Content の開始タグと終了タグの間に次のコードを貼り付けます。次の例では、見出し 1、見出し 2、および段落という 3 つの HTML 要素を作成します。また、ドロップダウン リスト コントロールも追加します。必要に応じて、デザイン ビューのページにコントロールを追加することもできます。
<h1 id="title1">Switchable Themes on a Page</h1><br /> <h2 id="title2">Note how the master page content and the page content are affected</h2> <p>Select a color from the drop-down list below to change the appearance of this page.</p> <br /><br /> <asp:dropdownlist id="ddlThemes" runat="server" autopostback="true" > <asp:listitem value="Blue">I'd like the page to be blue!</asp:listitem> <asp:listitem value="Red">I'd like the page to be red!</asp:listitem> <asp:listitem value="Green">I'd like the page to be green!</asp:listitem> </asp:dropdownlist>ドロップダウン リストからテーマを選択すると、テーマを読み込むコードを実行するスクリプト セクションを追加します。次の例と script タグは、@ Page ディレクティブの後の行にあるコンテンツ ページに追加します。
<script runat="server"> Public Sub Page_PreInit() ' Sets the Theme for the page. Me.Theme = "Blue" If ((Not (Request.Form) Is Nothing) _ AndAlso (Request.Form.Count > 0)) Then Me.Theme = Me.Request.Form(4).Trim End If End Sub </script><script runat="server"> public void Page_PreInit() { // Sets the Theme for the page. this.Theme = "Blue"; if (Request.Form != null && Request.Form.Count > 0) this.Theme = this.Request.Form[4].Trim(); } </script>ページの有効期間の PreInit イベント中に、テーマが読み込まれます。ページの要求フォームには値の配列が含まれます。インデックス 4 の値は、ドロップダウン リストから選択した値です。この値はページのテーマに割り当てられ、ページが読み込まれると、新しいテーマが適用されます。
チュートリアルの次の手順では、異なるテーマが適用されることを示すときに使用できるテーマをいくつか作成します。
Blue テーマの編集
Blue テーマには空のスタイル シートと空のスキンが含まれます。使用する既定のページとマスタ ページに設定するマークアップ要素はわかっているので、テーマ ファイルを編集してページ要素に色を追加できます。
Blue テーマを編集するには
ソース ビューの Blue テーマ フォルダから Default.skin ファイルを開きます。
Blue テーマを選択するときに、次のコードをドロップダウン リストに追加し、ページの色を指定します。
<asp:dropdownlist runat="server" ForeColor="white" BackColor="Blue" />ソース ビューの Blue フォルダから Default.css ファイルを開きます。まず、次のコードを追加し、マスタ ページのテーブルのタイトルに書式を設定します。
td.title { font-size: 1em; text-align: center; font-family: verdana; font-size: x-large; font-weight: bolder; color: Navy; }次に、次のコードを指定して背景色をテーブルに追加します。
table.header { background-color: Blue; }次に、コンテンツ ページの見出し 1 要素と見出し 2 要素のスタイルを設定します。
h1 { font-size: large; color: Navy; } h2 { font-family: Verdana; font-size: medium; margin-top: 30; color: Navy; }最後に、水平の境界線と段落要素のスタイルを設定します。
p { font-family: Verdana; font-size: small; color: Aqua; text-align: left; } hr { border: 0; border-top: 2px solid Aqua; height: 2px; }
テーマのページへの接続
Home.aspx ページに適用したテーマを表示する前に、ページがテーマを使用することを示す @ Page ディレクティブに属性を追加する必要があります。
ページをテーマに接続するには
ソース ビューで Home.aspx を開きます。
StylesheetTheme 属性を @ Page ディレクティブに追加し、Blue テーマと同様に設定します。ページ ディレクティブは、次の例のようになります。
<%@ Page Language="VB" MasterPageFile="~/switchtheme.master" Title="Switchable Themes" StylesheetTheme="Blue" %><%@ Page Language="C#" MasterPageFile="~/switchtheme.master" Title="Switchable Themes" StylesheetTheme="Blue" %>
ページのテスト
他の ASP.NET ページの場合と同じように、ページを実行してテストできます。
ページをテストするには
Home.aspx ページを表示しているときに、Ctrl キーを押しながら F5 キーを押してページを実行できます。
ASP.NET により、Master1.master ページのレイアウトを使用した Home.aspx ページのコンテンツが単一ページにマージされ、Blue テーマが適用されて、結果のページがブラウザに表示されます。Blue テーマは、マスタ ファイルに定義されているタイトルと背景だけでなく、HTML 要素とドロップダウン リストにも適用されます。
新しいテーマの作成
Blue テーマでも十分ですが、このチュートリアルの目的は、ページ ユーザーが複数のテーマを選択できるようにすることです。そのため、スキンとスタイル シート ファイルを新しいテーマ ディレクトリにコピーし、テーマに使用されている色を編集することで新しいテーマの色を反映します。次の手順では、Red と Green という 2 つのテーマを作成します。
新しいテーマを作成するには
ソリューション エクスプローラで、App_Themes フォルダを右クリックし、[ASP.NET フォルダの追加] をクリックして、[テーマ] をクリックします。フォルダ タイトル Theme1 を選択した状態で、「Red」と入力し、Enter キーを押します。
Blue フォルダを開き、Default.skin ファイルと Default.css ファイルを選択します。2 つの選択したファイルを右クリックし、[コピー] をクリックします。
Red フォルダを右クリックし、[貼り付け] をクリックします。
手順 1 を繰り返し、Green という新しいテーマ フォルダを作成します。Green フォルダを右クリックし、[貼り付け] をクリックして Default.skin ファイルと Default.css ファイルを Green フォルダに配置します。
スキン ファイルの色属性を編集し、テーマの色を反映します。たとえば、Red テーマのスキン ファイルは次の例のようになります。
<asp:dropdownlist runat="server" ForeColor="white" BackColor="Red" />各テーマのスタイル シートを編集し、テーマの名前を反映します。背景に対してさまざまな HTML 要素とテキストを目立たせるには、緑の影を使用します。Green テーマのスタイル シートは次の例のようになります。
p { font-family: Verdana; font-size: small; color: Teal; text-align: left; } hr { border: 0; border-top: 2px solid Teal; height: 2px; } h1 { font-size: large; color: Green; } h2 { font-family: Verdana; font-size: medium; margin-top: 30; color: Green; } table.header { background-color: Lime; } td.title { font-size: 1em; text-align: center; font-family: verdana; font-size: x-large; font-weight: bolder; color: Teal; }
テーマ選択のテスト
ドロップダウン リストを使用してページの 3 つのテーマから選択できるようになりました。
異なるテーマを選択するには
Home.aspx ページに切り替えて、Ctrl キーを押しながら F5 キーを押します。
ドロップダウン リストの [Green] または [Red] を選択します。
スタイル シートがページの HTML 要素に適用され、スキンがドロップダウン リスト コントロールに適用されます。
次の手順
マスタ ページの使用方法の詳細については、「チュートリアル : Visual Web Developer での ASP.NET マスタ ページの作成と使用」を参照してください。