ASP.NET 2.0 では、組み込みの MasterPage サポートが追加されており、非常に便利です。しかし、しばらく使ってみると、MasterPage はそれほど完璧ではないことがわかりました。ネストされた MasterPage はデザイン時のインターフェイスをサポートできず、コンテンツ ページに CSS を追加する際の問題については後述します。
通常、2.0 より前では、CSS 参照をページに追加するための構文は次のとおりでした:
<link rel="stylesheet" href="css/test.css" />
もともとそれは一般的な習慣でした。しかし、MasterPage のサブページでは、非常に恥ずかしい状況が発生します。上記のコードをどこに配置すればよいでしょうか?
MasterPage の特定のコンテンツ ページでは、各 <asp:Content /> タグのコンテンツのみを定義できるためです。通常の慣例によれば、aspx でページの <header/> コンテンツを制御することはできません。そして、この <link/> タグは <header/> 内に配置する必要があります。このコード行を <asp:Content /> 内に追加しようとしましたが、エラーが表示されます。
同時に、将来の CSS リファレンス コードのために、MasterPage の <header/> 内に ContentPlaceHolder を配置することはできません。
そこで私がやったのは、次のようにヘルパー クラスを定義することでした。
static public class ControlHelper
{
static public void AddStyleSheet(ページ page, string cssPath)
{
HtmlLink リンク = new HtmlLink();
link.Href = cssPath;
link.Attributes["rel"] = "スタイルシート";
link.Attributes["type"] = "テキスト/CSS";
page.Header.Controls.Add(リンク);
}
}
このようにして、特定のページで、次のコードを通じて CSS 参照を追加できます。
protected void Page_Load(object sender, EventArgs e)
{
ControlHelper.AddStyleSheet(this.Page, "css/projectPage.css");
}
さらに、このコードは、特定のコンテンツ ページまたはネストされたマスター ページでの使用をサポートしています。
ここで、なぜこのように CSS を分離して読み込む必要があるのかと疑問に思う人もいるかもしれません。それは必要ですか？すべてのページの CSS をいくつかの共通 CSS ファイルに定義できたら便利だと思いませんか?
実際、Web 標準の HTML 制作に精通している友人なら、比較的完璧な状態では、ページの HTML とプレゼンテーションに使用される CSS が完全に分離されている必要があることを知っているはずです。 Web 標準に基づいたデザインでは、通常、最初にマスター ページの各フレーム div の位置コードと、ヘッダー部分とフッター部分の変更コードを作成します。これらはすべてのコンテンツ ページで使用され、統一された CSS に配置されます。他の特定のコンテンツ ページの場合、各ページには独自の異なるコンテンツ レイアウトと変更スタイルがあるため、特定の各ページの特定の部分を独自の CSS に配置します。これにより、マスター ページの実装レベル (ネスト可能) に従ってレイヤーごとにマージされた CSS モデルが形成されます。利点は、各 CSS ファイルの責任の分離が実現され、理解と保守が容易になることです。
私は ASP.NET 2.0 に長い間触れていないため、上記はほんの個人的な経験にすぎません。より便利な解決策があれば、アドバイスをお願いします。
http://rchen.cnblogs.com/archive/2006/05/23/masterpage_with_css.html