ASP.NET Core CSS 分離

はじめに

ASP.NET Core 6 (.NET 6)から、CSS 分離が利用できるようになっています。CSS 分離を使うことで、ページ単位での CSS の定義ができます。

ページ単位での CSS ファイルの作成

対象ページと同一のディレクトリに、ファイル名 + .css の形式で、css ファイルを作成します。作成後、Visual Studio のソリューション エクスプローラーからは、ページの入れ子項目として表示されます。

CSS ファイルへのスタイルの定義

作成した CSS ファイルにスタイルを定義します。
例として、ファイル Index.cshtml.css を作成し、h1 要素のフォントを白、背景色を赤に設定しています。

Index.cshtml.css

h1 {
    color: white;
    background-color: red;
}

比較のために別のページとして、ファイル Privacy.cshtml.css を作成し、h1 要素のフォントを灰色、背景色を青に設定します。

Privacy.cshtml.css

h1 {
    color: gray;
    background-color: blue;
}

CSS ファイルへのリンクの設定

"<アセンブリ名>.styles.css" の書式で、CSS ファイルが生成されるので、ページへ CSS ファイルへのリンクを設定します。ページ毎に設定しても良いですが、_Layout.cshtml 等のレイアウト ページに設定しておくと、一度で済みます。

_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 文字の文字列>" の書式で、属性が付与されていることが分かります。

Index

<h1 b-x1wxtdv58m class="display-4">Welcome</h1>

ページ毎に異なる属性値が設定されています。

Privacy

 <h1 b-w0r7xftrir>Privacy Policy</h1>

実行後の CSS ファイルをみると、ページ毎に作成した CSS ファイル内のスタイル定義が統合されて、要素の指定が、属性セレクターを使用するように変更されています。ページ毎の h1 要素に付与された属性に一致します。

<アセンブリ名>.styles.css

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 スタイルをページ単位で容易に管理できるようになります。