はじめに
ASP.NET Core 6 (.NET 6)から、CSS 分離が利用できるようになっています。CSS 分離を使うことで、ページ単位での CSS の定義ができます。
ページ単位での CSS ファイルの作成
対象ページと同一のディレクトリに、ファイル名 + .css の形式で、css ファイルを作成します。作成後、Visual Studio のソリューション エクスプローラーからは、ページの入れ子項目として表示されます。
CSS ファイルへのスタイルの定義
作成した CSS ファイルにスタイルを定義します。
例として、ファイル Index.cshtml.css を作成し、h1 要素のフォントを白、背景色を赤に設定しています。
h1 {
color: white;
background-color: red;
}
比較のために別のページとして、ファイル Privacy.cshtml.css を作成し、h1 要素のフォントを灰色、背景色を青に設定します。
h1 {
color: gray;
background-color: blue;
}
CSS ファイルへのリンクの設定
"<アセンブリ名>.styles.css" の書式で、CSS ファイルが生成されるので、ページへ CSS ファイルへのリンクを設定します。ページ毎に設定しても良いですが、_Layout.cshtml 等のレイアウト ページに設定しておくと、一度で済みます。
<link rel="stylesheet" href="~/<アセンブリ名>.styles.css" asp-append-version="true" />
実行結果の確認
Index.cshtml を見ると、Index.cshtml.css ファイルで定義したスタイルが適用されています。
同様に、 Privacy.cshtml.css ファイルで定義したスタイルが適用されています。
実行後の HTML ソースをみると、CSS で指定した h1 要素に、"b-<10 文字の文字列>" の書式で、属性が付与されていることが分かります。
<h1 b-x1wxtdv58m class="display-4">Welcome</h1>
ページ毎に異なる属性値が設定されています。
<h1 b-w0r7xftrir>Privacy Policy</h1>
実行後の CSS ファイルをみると、ページ毎に作成した CSS ファイル内のスタイル定義が統合されて、要素の指定が、属性セレクターを使用するように変更されています。ページ毎の h1 要素に付与された属性に一致します。
h1[b-x1wxtdv58m] {
color: white;
background-color: red;
}
h1[b-w0r7xftrir] {
color: gray;
background-color: blue;
}
CSS 属性セレクターについては、以下を参照。
注意点
Razor ファイルの実行時コンパイルを有効にすると、CSS 分離が機能しなくなることがあります。 機能しなくなります。
実行時コンパイルについては、以下を参照。
.NET 6 + Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation 6.0.16 の環境では、CSS 分離が機能しませんでした。Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation 5.0.17 にダウングレードしたところ機能するようになりました。
以下に、この問題についての話があります。
しかしながら、この方法では、CSS 分離は機能するようになりますが、実行時コンパイルが機能しません。
RuntimeCompilation をダウングレードすることで、実行時コンパイルが機能しなくなったことで、CSS 分離が機能するようになったように見えます。
実行時コンパイルを有効にすることで、CSS 分離が機能しなくなる問題は、以下にもあがっていました。
.NET 7 では、確認していませんが、現状では、この問題は改善されていないようです。
そこで、実行時コンパイルに替わる方法として、ホットリロードを使用します。
Visual Studio でコードを実行し、ホット リロードを実行すると、コードの変更が反映されます。
[ファイルの保存時のホット リロード] を選択しておくと、コードを変更時に、変更が反映されるので便利です。
まとめ
各ページのスタイルを一つの CSS ファイルで管理すると、各ページで同一の要素のスタイルの管理が煩雑になります。ファイルを分割すると、リンクの設定忘れもあります。ASP.NET Core の CSS 分離を活用し、レイアウト ページに CSS ファイルの参照を設定しておくことで、ページ毎の CSS スタイルをページ単位で容易に管理できるようになります。