方法 : ASP.NET ページ テーマを定義する

  • [アーティクル]

更新 : 2007 年 11 月

Visual Web Developer では、ページ テーマを定義して、アプリケーションの 1 つ以上のページに適用できます。また、マシン レベルでテーマを作成すると、サーバー上の複数のアプリケーションに適用できます。

テーマは、いくつかのサポート ファイルで構成され、サポート ファイルには、ページの外観を決めるスタイル シート、サーバー コントロールの外観を定義するコントロール スキン、その他のイメージやファイルが含まれます。テーマの内容は、ページ テーマでもグローバル テーマでも同じです。

テーマを適用するためには、@ Page ディレクティブの Theme 属性または StyleSheetTheme 属性を使用するか、アプリケーション構成ファイルに pages 要素 (ASP.NET 設定スキーマ) を設定します。Visual Web Developer では、StyleSheetTheme 属性を使用して適用されたテーマをビジュアルに表示するだけです。

ページ テーマを作成するには

  1. ソリューション エクスプローラで、ページ テーマを作成する Web サイトの名前を右クリックし、[ASP.NET フォルダの追加] をクリックします。

  2. [テーマ] をクリックします。

    App_Themes フォルダが存在しない場合は、Visual Web Developer によって作成されます。次に、App_Themes フォルダの子フォルダとして、そのテーマの新しいフォルダが作成されます。

  3. 新しいフォルダに名前を指定します。

    このフォルダ名は、ページ テーマ名としても使用されます。たとえば、\App_Themes\FirstTheme という名前のフォルダを作成すると、テーマ名が FirstTheme となります。

  4. 新しいフォルダに、テーマを構成するコントロール スキン、スタイル シート、およびイメージ用のファイルを追加します。

スキン ファイルとスキンをページ テーマに追加するには

  1. ソリューション エクスプローラで、テーマ名を右クリックし、[新しい項目の追加] をクリックします。

  2. [新しい項目の追加] ダイアログ ボックスで、[スキン ファイル] をクリックします。

  3. [名前] ボックスに .skin ファイルの名前を入力し、[追加] をクリックします。

    通常は、1 つのコントロールに対して 1 つの .skin ファイル (Button.skin、Calendar.skin など) が作成されますが、必要に応じて任意の数の .skin ファイルを作成できます。

  4. .skin ファイルでは、宣言構文を使用して通常のコントロール定義を追加しますが、この定義にはテーマに設定しようとするプロパティのみを含めます。このコントロール定義には、必ず runat="server" 属性を含める必要があり、ID="" 属性を含めることはできません。

    次のコード例は、Button コントロールの既定のコントロール スキンを示したもので、テーマの中のすべての Button コントロール用に色とフォントが定義されています。

    <asp:Button runat="server" 
  BackColor="Red" 
  ForeColor="White" 
  Font-Name="Arial" 
  Font-Size="9px" />

    この Button コントロール スキンには、skinID 属性は含まれていません。このコントロール スキンは、テーマが適用されるアプリケーション内の、skinID 属性が指定されていない、すべての Button コントロールに適用されます。

    ms247256.alert_note(ja-jp,VS.90).gifメモ :

    コントロール スキンは、ページにコントロールを追加し、それに希望する外観を持たせるように構成すると、簡単に作成できます。たとえば、ページに Calendar コントロールを追加し、曜日ヘッダー、選択した日付、その他のプロパティを設定します。次に、コントロール定義をページからスキン ファイルにコピーします。ただし、ID 属性は除きます。

  5. 作成するコントロール スキン ファイルのそれぞれに対して、手順 2 と 3 を繰り返します。

    ms247256.alert_note(ja-jp,VS.90).gifメモ :

    各コントロールには、既定のスキンを 1 つだけ定義できます。同じ種類のコントロールに名前指定スキンを作成するには、スキンのコントロール宣言で SkinID 属性を使用します。

ページ テーマにカスケード スタイル シート ファイルを追加するには

  1. ソリューション エクスプローラで、テーマ名を右クリックし、[新しい項目の追加] をクリックします。

  2. [新しい項目の追加] ダイアログ ボックスにある [スタイル シート] をクリックします。

  3. [名前] ボックスに .css ファイルの名前を入力し、[追加] をクリックします。

    テーマをページに適用すると、ASP.NET によりページの head 要素に、このスタイル シートへの参照が追加されます。詳細については、「方法 : ASP.NET のテーマを適用する」を参照してください。

グローバル テーマの作成

グローバル テーマは、サーバー上のすべての Web サイトに適用されます。グローバル テーマのフォルダを作成する場所は、Web サイトをインターネット インフォメーション サービス (IIS: Internet Information Services) を使用して実行しているときと、ASP.NET 開発サーバーでテストしているときでは異なります。

ms247256.alert_note(ja-jp,VS.90).gifメモ :

ファイル システム Web サイトを操作しているときは、既定で、Visual Web Developer により ASP.NET 開発サーバーが起動されて Web サイトのテストが行われます。それ以外の種類の Web サイトでは、Visual Web Developer は IIS でページのテストを行います。

グローバル テーマを作成するには

  1. 次のパスを使用して、Themes フォルダを作成します。

    %windows%\Microsoft.NET\Framework\version\ASP.NETClientFiles\Themes
    ms247256.alert_note(ja-jp,VS.90).gifメモ :

    グローバル テーマのフォルダ名は Themes となります。App_Themes はページ テーマ用です。

    Themes フォルダに、グローバル テーマ ファイルを格納するためのサブフォルダを作成します。

    サブフォルダ名は、テーマ名と同じです。たとえば、\Themes\FirstTheme という名前のフォルダを作成すると、テーマ名が FirstTheme となります。

  2. 新しいフォルダに、グローバル テーマを構成するコントロール スキン、スタイル シート、およびイメージ用のファイルを追加します。

    ms247256.alert_note(ja-jp,VS.90).gifメモ :

    グローバル テーマを定義するときには、Visual Web Developer を使用してスキン ファイルとスタイル シート ファイルを直接追加できません。テーマをページ テーマとして定義し、テストを終えたら、Web サーバー上でグローバル テーマに使用するフォルダにコピーする方が簡単です。

  3. ファイル システム Web サイトを ASP.NET 開発サーバーでテストしているときには、テーマをそのままテストできます。

  4. ローカルの IIS Web サイトで Web サイトのテストを行っている場合は、コマンド ウィンドウを開き、aspnet_regiis -c を実行して、IIS を実行しているサーバーにテーマをインストールします。

  5. テーマをリモート Web サイト、または FTP Web サイトでテストしている場合は、次のパスを使用して Themes フォルダを手動で作成する必要があります。

    IISRootWeb\aspnet_client\system_web\version\Themes

参照

概念

ASP.NET のテーマとスキンの概要