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

  • [アーティクル]

更新 : 2007 年 11 月

テーマは、ページとコントロールの外観を定義し、統一した外観を、Web アプリケーション内の複数のページ、Web アプリケーション全体、またはサーバー上のすべての Web アプリケーションに対して適用できるプロパティ設定のコレクションです。

テーマとコントロール スキン

テーマは、スキン、カスケード スタイル シート (CSS: Cascading Style Sheets)、イメージ、またはその他のリソースの各要素のセットで構成されます。テーマには、少なくともスキンが含まれます。テーマは、Web サイトまたは Web サーバーの特別なディレクトリで定義されます。

スキン

スキン ファイルの拡張子は .skin です。スキン ファイルには、Button、Label、TextBox、Calendar などの各コントロールのプロパティ設定が含まれます。コントロール スキンの設定はコントロール マークアップ自体とよく似ていますが、テーマの一部として設定するプロパティだけを含みます。Button コントロールのコントロール スキンの例を以下に示します。

<asp:button runat="server" BackColor="lightblue" ForeColor="black" />

.skin ファイルはテーマ フォルダの中に作成します。.skin ファイルには、1 つ以上のコントロールの種類に対する 1 つ以上のコントロール スキンを含むことができます。コントロールごとに別個のスキン ファイルを定義することも、1 つのテーマのすべてのスキンを 1 つのファイルに定義することもできます。

コントロール スキンには、既定のスキンと名前指定スキンの 2 つの種類のスキンがあります。

  • 既定のスキンは、テーマがページに適用されるときに、同じ種類のすべてのコントロールに自動的に適用されます。コントロール スキンに SkinID 属性が存在しない場合、そのスキンは既定のスキンです。たとえば、Calendar コントロールの既定のスキンを作成した場合、このコントロール スキンは、テーマを使用するページのすべての Calendar コントロールに適用されます。既定のスキンはコントロールの種類に正確に対応するので、Button コントロール スキンはすべての Button コントロールに適用されますが、LinkButton コントロールや Button オブジェクトから派生したコントロールには適用されません。

  • 名前指定スキンは、SkinID プロパティが設定されたコントロール スキンです。名前指定スキンは、種類に基づいてコントロールに自動的に適用されるわけではなく、適用先のコントロールの SkinID プロパティを設定して明示的に適用します。名前指定スキンを作成すると、アプリケーション内の同じコントロールのインスタンスごとに異なるスキンを設定できます。

カスケード スタイル シート

テーマには、カスケード スタイル シート (.css ファイル) も含めることができます。.css ファイルをテーマ フォルダに配置すると、そのスタイル シートがテーマの一部として自動的に適用されます。テーマ フォルダ内のファイル拡張子 .css を使用して、スタイル シートを定義します。

テーマのグラフィックスとその他のリソース

テーマには、グラフィックス、およびスクリプト ファイルやサウンド ファイルなどその他のリソースも含めることができます。たとえば、ページ テーマには、TreeView コントロールのスキンを含めることができます。テーマの一部として、展開ボタンと折りたたみボタンを表すグラフィックスを含めることができます。

通常、あるテーマのリソース ファイルはそのテーマのスキン ファイルと同じフォルダに置かれますが、たとえば、テーマ フォルダのサブフォルダなど、Web アプリケーション内のどこにでも配置できます。テーマ フォルダのサブフォルダ内のリソース ファイルを参照するには、この Image コントロール スキンで示されているようなパスを使用します。

<asp:Image runat="server" ImageUrl="ThemeSubfolder/filename.ext" />

また、テーマ フォルダの外部にリソース ファイルを格納することもできます。ティルダ (~) 構文を使用してリソース ファイルを参照すると、Web アプリケーションは自動的にイメージを検出します。たとえば、アプリケーションのサブフォルダにテーマのリソースを格納している場合、次の例のように、~/SubFolder/filename.ext 形式のパスを使用してリソース ファイルを参照できます。

<asp:Image runat="server" ImageUrl="~/AppSubfolder/filename.ext" />

テーマのスコープの設定

テーマは、単一の Web アプリケーションに対して定義することもできますし、Web サーバー上のすべてのアプリケーションが使用するグローバルなテーマとして定義することもできます。テーマを定義した後、@ Page ディレクティブの Theme 属性または StyleSheetTheme 属性を使用して個々のページにテーマを適用することもできますし、アプリケーション構成ファイルに <pages> 要素を設定することにより、アプリケーション内のすべてのページに適用することもできます。<pages> 要素が Machine.config ファイルに定義されている場合、そのテーマはそのサーバー上の Web アプリケーション内のすべてのページに適用されます。

ページ テーマ

ページ テーマは 1 つのテーマ フォルダです。このフォルダでは、コントロール スキン、スタイル シート、グラフィックス ファイル、およびその他のリソースが Web サイトの \App_Themes フォルダのサブフォルダとして作成されます。各テーマは、\App_Themes フォルダのそれぞれ別個のサブフォルダになります。BlueTheme と PinkTheme という名前の 2 つのテーマを定義する一般的なページ テーマの例を次に示します。

MyWebSite
  App_Themes
    BlueTheme
      Controls.skin
      BlueTheme.css
    PinkTheme
      Controls.skin
      PinkTheme.css

グローバル テーマ

グローバル テーマとは、1 つのサーバー上のすべての Web サイトに適用できるテーマです。グローバル テーマを使用すると、同じサーバーに複数の Web サイトを保持しているときにドメインの全体的な外観を定義できます。

グローバル テーマは、プロパティ設定、スタイル シート設定、およびグラフィックスを含む点ではページ テーマと同じですが、グローバル テーマは、Web サーバーに対してグローバルな \Themes フォルダに格納されます。サーバー上のどの Web サイトも、Web サイト内のどのページもグローバル テーマを参照できます。

テーマ設定の優先順位

テーマをどのように適用するかを指定することで、ローカルのコントロール設定に対するテーマ設定の優先順位を指定できます。

ページの Theme プロパティを設定すると、テーマとページのコントロール設定はマージされ、そのコントロールに対する最終的な設定となります。コントロールとテーマの両方でコントロール設定が定義されている場合、テーマのコントロール設定が、そのコントロールに対するあらゆるページ設定より優先されます。この方法により、ページのコントロールの各プロパティが既に設定されている場合でも、各ページにまたがって一貫した外観を作成できます。たとえば、ASP.NET の以前のバージョンで作成したページにテーマを適用できます。

また、ページの StyleSheetTheme プロパティを設定すると、テーマをスタイル シート テーマとして適用することもできます。この場合、ローカルのページ設定は、テーマで定義されている設定がある場合でも、それより優先されます。これは、カスケード スタイル シートによって使用されるモデルです。ページ上の各コントロールのプロパティを設定し、同時に全体的な外観としてテーマを適用できるようにする場合は、テーマをスタイル シート テーマとして適用できます。

グローバル テーマ要素は、アプリケーションレベルのテーマの要素で部分的に置換することはできません。グローバル テーマと同じ名前のアプリケーションレベルのテーマを作成する場合、アプリケーションレベル テーマのテーマ要素は、グローバル テーマ要素をオーバーライドしません。

テーマを使用して定義できるプロパティ

一般に、テーマは、ページやコントロールの外観または静的コンテンツに関連するプロパティを設定する際に使用できます。コントロール クラスで ThemeableAttribute 属性が true になっているプロパティのみ設定できます。

外観ではなくコントロールの動作を明示的に指定するプロパティには、テーマの値を使用できません。たとえば、Button コントロールの CommandName プロパティは、テーマを使用して設定できません。また、GridView コントロールの AllowPaging プロパティや DataSource プロパティもテーマを使用して設定できません。

式ビルダは使用できません。式ビルダは、テーマまたはスキンで、コンパイル時にページに割り当てるためのコード式を生成します。

テーマとカスケード スタイル シート

テーマとカスケード スタイル シートは、両方共、任意のページに適用できる共通の属性セットを定義する点においては似ています。テーマは次の点でスタイル シートと異なります。

  • テーマは、スタイル プロパティだけでなく、コントロールやページのさまざまなプロパティを定義できます。たとえば、テーマを使用すると、TreeView コントロールのグラフィックスや GridView コントロールのテンプレート レイアウトなどを指定できます。

  • テーマには、グラフィックスを含めることができます。

  • テーマは、スタイル シートのように優先順位が処理されません。StyleSheetTheme プロパティを使用してテーマを明示的に適用していない場合、既定で、ページの Theme プロパティで参照されるテーマに定義されるプロパティ値は、宣言によってコントロールに設定されるプロパティ値をオーバーライドします。詳細については、前述の「テーマ設定の優先順位」セクションを参照してください。

  • 各ページに適用できるテーマは 1 つだけです。複数のスタイル シートを 1 つのページに適用することはできますが、複数のテーマを 1 つのページに適用することはできません。

セキュリティの考慮事項

テーマを Web サイトで使用する場合、セキュリティの問題が発生する可能性があります。また、次の処理に悪意のあるテーマが使用される可能性があります。

  • 目的どおりに動作しないようにコントロールの動作を変更します。

  • クライアント側スクリプトを挿入し、それによってクロスサイト スクリプティングのリスクが発生します。

  • 妥当性検査の内容を変更します。

  • 重要情報を公開します。

  • このような一般的な脅威を緩和する方法を次に示します。

  • グローバル テーマおよびアプリケーション テーマのディレクトリを適切なアクセス制御設定で保護します。信頼できるユーザーのみがファイルをテーマ ディレクトリに書き込むことができるようにします。

  • 信頼できないソースのテーマは使用しません。自分の組織外のテーマは、Web サイトに使用する前に、必ず悪意のあるコードかどうかを確認します。

  • クエリ データにテーマ名を公開しないようにします。悪意のあるユーザーが、開発者の知らないテーマを使用して重要情報を公開するために、その情報を利用する可能性があります。

参照

処理手順

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

方法 : ASP.NET のテーマを適用する