テーマ・CSS研究

WEBページのデザインを設定する

CSSで設定

1. CSSファイルを作成（場所はどこでも良いと思う）
2. プロパティ→DOCUMENT→StyleSheet でCSSファイルを指定

テーマ機能を使って設定

1. 仮想ディレクトリ直下に App_Themes フォルダを作成（ASP.NETフォルダ）
2. さらにその配下にテーマごとのサブフォルダを作成（ex.「Red」「Green」 ）
   サブフォルダの配下には、以下のファイルを置く
   ・スキンファイル（.skin） → サーバーコントロールに対してのデザイン
   ・CSSファイル（.css）
   ・上の２つから参照する画像ファイル
3. ページに指定 ： プロパティ→DOCUMENT→Theme（またはStyleSheetTheme） で上で作ったサブフォルダを指定
   アプリケーション全体に指定 ： web.configに <pages theme="サブフォルダ名"> と書く

ThemeとStyleSheetThemeの違い

・Theme ― 常にスキンファイルの内容が優先
・StyleSheetTheme ― 個々のコントロールの指定内容が優先

テーマをアプリケーション全体に指定後、特定のページだけそのテーマを適用しない

該当ページの@PageディレクティブのEnableThemeing を Falseにする
※skinは適用されなくなるが、CSSは適用されたままになる

優先順位

1. 個々のページのTheme で指定したデザイン
2. web.config で指定したデザイン
3. 個々のページのStyleSheetTheme で指定したデザイン
4. 従来のスタイルシート指定

※例外もあるかも？　web.config の指定よりも、個々のページの<span> で指定したスタイルが優先

マスターページがある場合

• web.config での指定は
  マスタ・子ページにも同じものが適用される。
  マスタの@Master に EnableThemingはOK
• マスタページにはTheme、StyleSheetTheme を設定できない
  StyleSheetの設定はできる
  StyleSheetの設定をすると、子ページにも適用される
• 子ページはTheme、StyleSheetTheme の設定ができる（DOCUMENT）
  StyleSheetの設定はできない

例１

・マスターページ ： StyleSheet
・子ページ ： Theme
→ページ全体が子ページのスタイルになる

例２

・マスターページ ： StyleSheet
・子ページ ： StyleSheetTheme
→CSSはマスターページのスタイル、サーバーコントロールは子ページのスタイル

 MSDNより

テーマをマスタページに直接適用することはできない

但し、次の状況ではテーマはマスターページに適用される

• テーマがコンテンツページ（子ページ）で適用された時
• テーマ定義をpages要素に含める。（web.config）で設定

MSDNの参照元 ：ASP.NET マスター ページの概要

---