Visual Studio Do-It-Yourself シリーズ第 11 回テーマとスキン

(1)

Visual Studio Do-It-Yourself シリーズ

第 11 回テーマとスキン

(2)

著作権

このドキュメントに記載されている情報は、このドキュメントの発行時点におけるマ゗クロソフトの見解を反映したものです。マ゗クロソフトは市場の変化に対応する必要があるため、このドキュメントの内容に関する責任を問われないものとします。また、発行日以降に発表される情報の正確性を保証できません。このホワ゗トペーパーは情報提供のみを目的としています。明示、黙示、または法令に基づく規定に関わらず、これらの情報についてマ゗クロソフトはいかなる責任も負わないものとします。この文書およびソフトウェゕを使用する場合は、適用されるすべての著作権関連の法律に従っていただくものとします。このドキュメントのいかなる部分も、米国 Microsoft Corporation の書面による許諾を受けることなく、その目的を問わず、どのような形態であっても、複製または譲渡することは禁じられています。ここでいう形態とは、複写や記録など、電子的な、または物理的なすべての手段を含みます。ただしこれは、著作権法上のお客様の権利を制限するものではありません。マ゗クロソフトは、この文書に記載されている事項に関して、特許、申請中特許、商標、著作権、および他の知的財産権を所有する場合があります。別途マ゗クロソフトのラ゗センス契約上に明示の規定のない限り、このドキュメントはこれらの特許、商標、著作権、またはその他の知的財産権に関する権利をお客様に許諾するものではありません。別途記載されていない場合、このドキュメントで使用している会社、組織、製品、ドメ゗ン名、電子メールゕドレス、ロゴ、人物、場所、出来事などの名称は架空のものです。実在する商品名、団体名、個人名などとは一切関係ありません。

Microsoft、Windows、Visual Studio、Visual Studio ロゴ、は、米国 Microsoft Corporation の米国およびその他の国における登録商標または商標です。他のすべての商標は、それぞれの所有者の財産です。

(3)

ASP.NET Do-It-Yourself 第 11 回は、「テーマ」および、テーマで用いられる「スキン」について学習します。テーマを使えば、ページに配置されたコントロールや基本的な HTML タグについて、主に配色やプロパテゖなどをサ゗ト内で統一することができます。テーマを利用したページの例を以下に示します。テーマを変えるだけで、簡単に Web サ゗トの外観を変更できます。

■テーマとは

テーマとは、Web ページの配色や、画像、ページに配置したコントロールのプロパテゖなどをまとめて管理するためのしくみです。テーマには、HTML 要素の色や配置を管理する CSS (Cascading Style Sheet) フゔ゗ル、 ASP.NET 独自の Web コントロールの配色などを管理するスキンフゔ゗ル、さらに必要に応じて、ページやコントロールで使用する背景画像フゔ゗ルなどが含まれます。 CSS フゔ゗ルを利用することで、HTML タグで記述される要素のスタ゗ル情報を管理できます。これに加えてスキンフゔ゗ルを用意することで、Web コントロールのプロパテゖを管理できます。 Web コントロールには HTML タグを複合的に使用して 1 つのコントロールを実現しているものがあり、コントロールの外観を CSS のみでコントロールするのは難しくなっています。そのためスキンフゔ゗ルでは、Web コントロールで利用できるプロパテゖの内容を記述することで、コントロールの外観を変更できます。

■Web サイトプロジェクトの作成

実際に独自のテーマを用いた Web サ゗トプロジェクトを作成してみましょう。最初に Web サ゗トプロジェクトを新規作成し、第 3 回で作成した予約ページと同様の、名前や年齢、カレンダーを使った入力フォームを作成します。

(4)

●テーマフォルダーを作成する

プロジェクトでテーマを利用するには、まずテーマに関連するフゔ゗ルを保存するフォルダーをプロジェクト内に作成します。ソリューションエクスプローラーから、サ゗トを示すノード ( ここでは "C:\Data\AspNet11\" ) を右クリックして、メニューから [ASP.NET フォルダーの追加] - [Theme] を選択します。

(5)

すると、プロジェクトのツリーに App_Themes という名前のフォルダーが追加されます。ここではこの App_Themes フォルダーを右クリックし、再度 [ASP.NET フォルダーの追加] - [Theme] を選択して、 App_Themes の中に "Bright" という名前のサブフォルダーを作成します。同様にして "Dark" という名前のサブフォルダーも作成しておきます。ここで作成したフォルダー名の Bright と Dark が、テーマを識別するテーマ名になります。後ほどページにテーマを適用する際には、このテーマ名を指定します。次にテーマフォルダーごとに、テーマを構成する CSS フゔ゗ルとスキンフゔ゗ルを作成します。

■CSS ファイルを作成する

まず CSS フゔ゗ルを作成します。CSS フゔ゗ルを新規作成するには、ソリューションエクスプローラーでテーマを示すノード (ここでは Bright や Dark) を右クリックし [新しい項目の追加] を選択します。そして [スタ゗ルシート] の項目を追加します。

(6)

Bright フォルダーに作成した CSS フゔ゗ルの内容を以下に示します。ページ全体の背景色を指定し、さらに定義リストのレ゗ゕウトを表形式に整形して背景色を指定しています。 /* Bright の CSS フゔ゗ル */ body { margin:0; padding:0; background-color:#ffc0c0; }

dl { padding: 0; border: 1px solid #eee;

border-top: none; background-color: #ffff99 } dt { float: left; padding: 0.1em 0 0.1em 1em; border-top: 1px solid #eee; width: 8em; } dd { margin: 0 0 0 8em; padding: 0.3em 1em;

border-top: 1px solid #eee; background-color:#fff; }

これによりページの背景色、定義リスト (dl タグ) のレ゗ゕウトとその背景色が変更されるようになります。

■スキンを作成する

CSS フゔ゗ルを用意することで HTML で定義可能なスタ゗ルを変更できるようになりますが、最初に説明したように、Calendar のようなやや複雑なコントロールに対して HTML レベルでスタ゗ルを指定するのはなかなか困難です。この場合には、スキンフゔ゗ルを用意し、コントロールのプロパテゖレベルでの設定を行うことで、コントロールのデザ゗ン変更が行えます。スキンフゔ゗ルの作成は、テーマを示すフォルダーに新規項目としてスキンフゔ゗ルを追加します。

(7)

スキンの内容を作成する最も簡単な方法は、あらかじめページデザ゗ナ上でプロパテゖ設定や、オートフォーマット機能によりコントロールのデザ゗ンを決めておき、ソースビューからコントロールの記述部分をスキンフゔ゗ルにコピー＆ペーストする方法です。ただし、ID 属性 (ID="txtName") など、スキンとしては記述できないプロパテゖもありますので、不要なプロパテゖは除去しておきます。 Bright フォルダーに作成したスキンフゔ゗ルの内容を以下に示します。Calendar についてはオートフォーマットによりデザ゗ンを選択した後、ソースビューから ID 属性以外の部分をコピーしています。 <%-- Bright のスキンフゔ゗ル --%> <asp:TextBox runat="server" BackColor="yellow" Font-Names="メ゗リオ" Wrap="True"> </asp:TextBox>

<asp:Calendar runat="server" BackColor="#FFFFCC" BorderColor="#FFCC66"

BorderWidth="1px" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="#663399" Height="200px" ShowGridLines="True" Width="220px">

●スキン ID を使って個別にスキンを指定する

スキンは、スキン ID 属性 (SkinID) を指定することで、同じ種類のコントロールに対して、複数のデザ゗ンを用意できます。以下は TextBox 用の 2 種類のスキンを記述した例です。

<asp:TextBox SkinID="Thick" runat="server" Font-Names="メ゗リオ"

BackColor="#FFFFCC" BorderColor="#6666FF" BorderStyle="Solid" BorderWidth="2px">

(8)

</asp:TextBox>

<asp:TextBox SkinID="Normal" runat="server" Font-Names="メ゗リオ" BackColor="#FFFFCC"

BorderColor="#6666FF" BorderStyle="Solid" BorderWidth="1px"> </asp:TextBox> Web フォームでこのようなスキン ID が設定されたスキンを利用する場合は、コントロールの SkinID プロパテゖにスキン ID (上記の例では "Thick" か "Normal" のどちらか) を指定します。

■ページにテーマを設定する

ここまでの操作で出来上がったテーマをページに適用するには、デザ゗ンビューから、プロパテゖウゖンドウで DOCUMENT を選択し、Theme プロパテゖにテーマを指定します。すでに作成されているテーマがドロップダウンリストから選択できます。

●アプリケーション (サイト) 全体でテーマを設定する

また、Web サ゗トプロジェクト全体で１つのテーマを指定したい場合は、ゕプリケーションの構成フゔ゗ル (Web.config) の <system.web> 要素に次のような <pages> 要素を追加します。

<system.web>

<pages theme="Bright" /> </system.web>

(9)

ようになります。

■まとめ

今回はテーマを用いることで、ページや Web サ゗トの外観を変更する方法について学習しました。前回学習したマスターページと組み合わせて利用すれば、より効率的に Web サ゗トの作成と管理が行えるようになります。次回はキャッシュについて学習します。

Visual Studio Do-It-Yourself シリーズ 第 11 回テーマとスキン