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

Size: px

Start display at page:

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

ありあふしはら
5 years ago
Views:

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

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

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

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 回で作成した予約ページと同様の名前や年齢カレンダーを使った入力フォームを作成します

$"C:\Data\AspNet11\" ) を右クリックしてメニューから [ASP.$

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) を右クリックし [ 新しい項目の追加 ] を選択しますそして [ スタルシート ] の項目を追加します

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

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: em; 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"> <DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" /> <NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" /> <OtherMonthDayStyle ForeColor="#CC9966" /> <SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" /> <SelectorStyle BackColor="#FFCC66" /> <TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt" ForeColor="#FFFFCC" /> <TodayDayStyle BackColor="#FFCC66" ForeColor="White" /> </asp:calendar> スキン ID を使って個別にスキンを指定するスキンはスキン ID 属性 (SkinID) を指定することで同じ種類のコントロールに対して複数のデザンを用意できます以下は TextBox 用の 2 種類のスキンを記述した例です <asp:textbox SkinID="Thick" runat="server" Font-Names=" メリオ " BackColor="#FFFFCC" BorderColor="#6666FF" BorderStyle="Solid" BorderWidth="2px">

</asp:textbox> <asp:textbox SkinID="Normal" runat="server" Font-Names=" メリオ " BackColor="#FFFFCC" BorderColor="#6666FF" BorderStyle="Solid" BorderWidth="1px"> </asp:textbox> Web フォームでこのようなスキン ID

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 サトプロジェクト全体で 1 つのテーマを指定したい場合はゕプリケーションの構成フゔル (Web.config) の <system.web> 要素に次のような <pages> 要素を追加します <system.web> <pages theme="bright" /> </system.web> こうすることで Web サト ( ゕプリケーション ) に含まれるすべてのページに Bright テーマが適用される

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

著作権このドキュメントに記載されている情報はこのドキュメントの発行時点におけるマクロソフトの見解を反映したものですマクロソフトは市場の変化に対応する必要があるためこのドキュメントの内容に関する責任を問われないものとしますまた発行日以降に発表される情報の正確性を保証できませんこのホワトペ

著作権このドキュメントに記載されている情報はこのドキュメントの発行時点におけるマクロソフトの見解を反映したものですマクロソフトは市場の変化に対応する必要があるためこのドキュメントの内容に関する責任を問われないものとしますまた発行日以降に発表される情報の正確性を保証できませんこのホワトペ Visual Studio Do-It-Yourself シリーズ第 19 回 Web アプリケーション配置著作権このドキュメントに記載されている情報はこのドキュメントの発行時点におけるマクロソフトの見解を反映したものですマクロソフトは市場の変化に対応する必要があるためこのドキュメントの内容に関する責任を問われないものとしますまた発行日以降に発表される情報の正確性を保証できませんこのホワトペーパーは情報提供のみを目的としています

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

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