ASP.NET 2.0 テーマとスキンの活用

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

ASP.NET 2.0では、コントロールに対してサイト内で統一したビジュアル属性を持たせるための「テーマ」機能がサポートされています。

テーマ・スキンの概要
特別な理由がない限り、ひとつの Web サイト内でデザインや色調は統一するのが普通です。たとえばハイパーリンクの色がページごとに違っていた場合、そのサイトを訪問したユーザーは戸惑ってし まいます。デザインの一貫性はユーザーの利便性と直結した重要な課題であると言えます。
従来の ASP.NET 1.0 や 1.1 では、通常の Web サイトと同じくスタイルシートはサポートされていましたが、コントロールに関するビジュアル属性を統一的に管理する機能は用意されていませんでした。その ため個々のコントロールに属性を設定しなければならないことが多く、複数メンバーによる開発や、デザイン面での修正に多くのコストがかかるという弱点を抱 えていました。

しかし ASP.NET 2.0 では、「テーマ」によって 1 つの Web アプリケーション内での共通デザインの適用が簡単にできるようになり、デザインや開発の効率的な分業が可能になります。

テーマを利用する場合、Web サイト内にテーマ フォルダを追加してから、その中に設けたテーマ別のサブフォルダ内にスキン ファイルもしくはスタイルシート ファイルを配置します。スキン ファイルにはサーバ・コントロールに対するビジュアル属性を、スタイルシートには通常の HTML と同様に一般的なデザイン属性を記述することになります。
テーマは 1 つのサイト（アプリケーション）に対し複数定義することができ、ページごと、あるいはサブフォルダごとに指定することも可能です。たとえば、ページ内のテーマ属性を編集するだけで、ページの印象を大きく変えることも可能です（図１～３）。

図１. テーマを適用する前のページ

図２. 青色を基調としたテーマを適用した例

図３. 赤色を基調としたテーマを適用した例

デモ（ストリーミング配信）
デモでは、「Blue」「Red」という 2 つのテーマを作成し、あらかじめコンテンツを作成してあるページにそれらを順に適用させます。

Visual Studio .NET 2005 β2 を使った開発デモ	02 分 44 秒
動作確認デモ	02 分 43 秒

ページのトップへ