チュートリアル : Visual Studio でのテーマを使用した Web サイトのカスタマイズ
更新 : 2007 年 11 月
このチュートリアルでは、テーマを使用して、Web サイトのページおよびコントロールに一貫した表示形式を適用する方法について説明します。テーマには、個々のコントロールの共通の表示形式を定義したスキン ファイル、1 つ以上のスタイル シート、それに TreeView などのコントロールで使用する共通グラフィックスを含めることができます。このチュートリアルでは、Web サイトでの ASP.NET テーマの操作方法について説明します。
このチュートリアルでは、以下のタスクを行います。
定義済みの ASP.NET テーマを個々のページおよびサイト全体に適用します。
個々のコントロールの表示形式を定義するために使用するスキンを含む、独自のテーマを作成します。
前提条件
このチュートリアルを実行するための要件は次のとおりです。
Microsoft 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 という名前の新しいページが作成されます。
このチュートリアルでテーマを操作する手始めとして、Button、Calendar、および Label の各コントロールを設定して、これらのコントロールにテーマがどのような効果を及ぼすかを確認します。
コントロールをページに配置するには
デザイン ビューに切り替えます。
ツールボックスの [標準] グループから [Calendar]、[Button]、および [ラベル] の各コントロールをページにドラッグします。ページの正確なレイアウトは重要ではありません。
.gif "メモ")
メモ :いずれのコントロールにも書式指定は一切適用しないでください。たとえば、AutoFormat コマンドを使用して [Calendar] コントロールの表示形式を変更したりしないでください。
ソース ビューに切り替えます。
ページの <head> 要素に、runat="server" 属性が次のように設定されていることを確認します。
<head runat="server"></head>このページを保存します。
ページをテストするには、まずテーマを適用する前の状態を確認し、次にいくつかのテーマを適用するのが良い方法です。
テーマの作成とページへの適用
ASP.NET では、定義済みのテーマをページに適用したり、固有のテーマを作成したりする作業を簡単に行うことができます。ここでは、コントロールの外観を定義するいくつかの簡単なスキンを持ったテーマを作成します。
新規テーマを作成するには
Visual Web Developer で、Web サイト名を右クリックし、[ASP.NET フォルダの追加] をクリックし、次に [テーマ] をクリックします。
[App_Themes] というフォルダと [テーマ1] というサブフォルダが作成されます。
[テーマ1] フォルダの名前を「sampleTheme」に変更します。
このフォルダ名が、作成するテーマの名前として使われます (ここでは「sampleTheme」)。この名前は重要ではありませんが、カスタム テーマを適用するときに必要となるので覚えておいてください。
[sampleTheme] フォルダを右クリックし、[新しい項目の追加] をクリックして新しいテキスト ファイルを追加し、そのファイルに「sampleTheme.skin」という名前を付けます。
sampleTheme.skin ファイルで、次のコード例に示したようにスキン定義を追加します。
<asp:Label runat="server" ForeColor="red" Font-Size="14pt" Font-Names="Verdana" /> <asp:button runat="server" Borderstyle="Solid" Borderwidth="2px" Bordercolor="Blue" Backcolor="yellow"/>メモ :どのような特性を定義するかは、重要ではありません。上で示した値は、後でテーマをテストするときに、わかりやすいように示したものです。
スキン定義は、コントロールを作成するための構文に似ていますが、スキン定義にはコントロールの外観を決定する設定値のみが記述される点が異なります。たとえば、スキン定義には ID プロパティの設定値は含まれません。
スキン ファイルを保存して閉じます。
これで、テーマの適用前にページをテストする準備ができました。
| メモ : |
|---|
カスケード スタイル シート (CSS) ファイルを [sampleTheme] フォルダに追加すると、テーマを使用するすべてのページに適用されます。 |
テーマをテストするには
Ctrl キーを押しながら F5 キーを押してページを実行します。
コントロールが既定の外観で表示されます。
ブラウザを閉じて Visual Web Developer に戻ります。
ソース ビューで、次の属性を @ Page ディレクティブに追加します。
<%@ Page Theme="sampleTheme" ... %>メモ :属性値に、必ず実際のテーマ名を指定します (この例では、上で定義した sampleTheme.skin ファイル)。
Ctrl キーを押しながら F5 キーを押して再度ページを実行します。
今度は、テーマに定義された配色でコントロールが表示されます。
[ラベル] コントロールと [Button] コントロールが sampleTheme.skin ファイルでの設定に従って表示されます。sampleTheme.skin ファイルにはまだ [Calendar] コントロールに関するエントリを指定していないので、スキン ファイルは既定の外観で表示されます。
Visual Web Developer で、テーマを、可能であれば別のテーマの名前に設定します。
Ctrl キーを押しながら F5 キーを押して再度ページを実行します。
コントロールにより、再度、外観が変更されました。
スタイル シート テーマとカスタマイズ テーマ
新しいテーマを作成したら、テーマをカスタマイズ テーマ (前のセクションで行ったように) またはスタイル シート テーマとしてページに関連付けることにより、アプリケーションでの使用目的に合わせて調整できます。スタイル シート テーマではカスタマイズ テーマと同じテーマ ファイルが使用されますが、ページのコントロールとプロパティでの優先順位が下がり、CSS ファイルと同等の扱いとなります。ASP.NET での優先順位は次のとおりです。
テーマ設定値 (Web.config ファイルで設定されたテーマを含む)。
ローカル ページの設定値。
スタイル シート テーマの設定値。
したがって、スタイル シート テーマを選択した場合は、テーマのプロパティがページ内でローカルに宣言された設定値によりオーバーライドされます。同様に、カスタマイズ テーマを使用したときは、テーマのプロパティによって、ローカル ページ内の設定値と使用中のスタイル シート テーマ内の設定値がオーバーライドされます。
スタイル シート テーマを使用して優先順位を確認するには
ソース ビューに切り替えます。
次のページ宣言
<%@ Page theme="sampleTheme" %>を、次のスタイル シート テーマ宣言に変更します。
<%@ Page StyleSheetTheme="sampleTheme" %>Ctrl キーを押しながら F5 キーを押してページを実行します。
[ラベル 1] コントロールの ForeColor プロパティが赤い字で記述されていることに注意してください。
デザイン ビューに切り替えます。
[ラベル 1] をクリックし、[プロパティ] の [ForeColor] を「blue」に設定します。
Ctrl キーを押しながら F5 キーを押してページを実行します。
[ラベル 1] の ForeColor プロパティが青に変わりました。
ソース ビューに切り替えます。
次のページ宣言を変更して、スタイル シート テーマではなく、テーマを宣言します。
<%@ Page StyleSheetTheme="sampleTheme" %>を次のように戻します。
<%@ Page Theme="sampleTheme" %>Ctrl キーを押しながら F5 キーを押してページを実行します。
[ラベル 1] の ForeColor プロパティが再び赤になりました。
既存のコントロールに基づくカスタム テーマ
デザイナを使用して外観のプロパティを設定し、次にコントロール定義をスキン ファイルにコピーすると、簡単にスキン定義を作成できます。
既存のコントロールに基づいたカスタム テーマを作成するには
デザイン ビューで、[Calendar] コントロールのプロパティを独特の外観に変更します。次の設定値をお勧めします。
BackColor Cyan
BorderColor Red
BorderWidth 4
CellSpacing 8
Font-Name Arial
Font-Size Large
SelectedDayStyle-BackColor Red
SelectedDayStyle-ForeColor Yellow
TodayDayStyle-BackColor Pink
メモ :どのような特性を定義するかは、重要ではありません。上で示した値は、後でテーマをテストするときに、わかりやすいように示したものです。
ソース ビューに切り替えて、<asp:calendar> 要素とその属性をコピーします。
sampleTheme.skin ファイルに切り替えるか開きます。
Calendar コントロール定義を sampleTheme.skin ファイルに貼り付けます。
sampleTheme.skin ファイルの定義から ID プロパティを削除します。
sampleTheme.skin ファイルを保存します。
Default.aspx ページに切り替え、2 番目の [Calendar] コントロールをページにドラッグします。このプロパティについては何も設定しないでください。
Default.aspx ページを実行します。
2 つの [Calendar] コントロールが同じように表示されます。最初の [Calendar] コントロールには、明示的に設定したプロパティ値が反映されています。2 番目の [Calendar] コントロールには、sampleTheme.skin ファイルで行ったスキン定義の外観プロパティが継承されています。
Web サイトへのテーマの適用
テーマは、Web サイト全体に適用できます。これにより、テーマを個々のページに適用する必要がなくなります。ただし、必要に応じて、特定のページのテーマ設定値をオーバーライドできます。
Web サイトのテーマを設定するには
Web サイトに自動的に Web.config ファイルが作成されていない場合は、次の手順に従って作成します。
ソリューション エクスプローラで、Web サイトの名前を右クリックし、[新しい項目の追加] をクリックします。
[テンプレート] の下の [Web 構成ファイル] をクリックし、[追加] をクリックします。
メモ このファイルは必ず Web.config と名付けられるので、ファイル名を入力する必要はありません。
<pages> 要素がまだ存在していない場合は、追加します。<pages> 要素は <system.web> 要素の中に存在する必要があります。
<pages> 要素に次の属性を追加します。
<pages theme="sampleTheme" />メモ :Web.config では、大文字と小文字が区別され、値は Camel 形式です。たとえば、theme と styleSheetTheme のようになります。
Web.config ファイルを保存して閉じます。
Default.aspx に切り替え、次にソース ビューに切り替えます。
ページ宣言から theme="themeName" 属性を削除します。
Ctrl キーを押しながら F5 キーを押して Default.aspx を実行します。
ページが Web.config ファイルで指定したテーマに従って表示されます。
ページ宣言でテーマ名を指定した場合は、そのテーマによって Web.config ファイルで指定したテーマがオーバーライドされます。
次の手順
ASP.NET でサポートされているテーマを使用すると、豊富なオプションを使用してアプリケーション全体の表示と操作方法を調整できます。このチュートリアルでは、いくつかの基本的操作についてのみ説明しましたが、もっと詳しい操作を学ぶこともできます。たとえば、次のような操作を学ぶことができます。
全般的なテーマの使い方。詳細については、「ASP.NET のテーマとスキンの概要」を参照してください。
コードによるテーマの使用。詳細については、「方法 : ASP.NET テーマをプログラムによって適用する」を参照してください。