CSS の設定と CSS フレームワークの適用⚓︎

AlesInfiny Maris OSS Edition は、特定の CSS フレームワークやコンポーネントライブラリーに依存していません。サンプルアプリケーションでは Fluent UI Blazor を使用していますが、プロジェクトの特性に応じた技術を選定してください。

Fluent UI Blazor⚓︎

Fluent UI Blazor は、 Microsoft が開発・提供する Fluent Design System（ Fluent UI ）に準拠した Blazor 向け UI コンポーネントライブラリです。これらのコンポーネントは Razor コンポーネントとして提供されるため、 HTML や CSS の記述量を抑えて画面を構築できます。

プロジェクトの作成において、 Fluent Blazor Web アプリのテンプレートを使用して作成したプロジェクトには、既定で Fluent UI Blazor を使用するための設定が組み込まれています。

そのため、追加で設定することなく Fluent UI Blazor の UI コンポーネントを使用できます。使用できるコンポーネントの一覧については、デモおよびドキュメントを参照してください。

CSS のバンドルと参照

Blazor Web アプリケーションでは、 CSS の分離により、各コンポーネントに分離された CSS が、ビルド時には 1 つの CSS ファイルとしてバンドルされて出力されます。たとえばプロジェクト名を AaaSubSystem にしてプロジェクトを作成し、 Debug 構成でビルドした場合、バンドル後の CSS ファイルは AaaSubSystem\obj\Debug\netxx.x\scopedcss\bundle\AaaSubSystem.styles.css に出力されます。 Fluent Blazor Web アプリのテンプレートでは、この CSS ファイルを読み込むように App.razor に設定が追加されています。

プロジェクト名を AaaSubSystem に設定した App.razor のテンプレート
<link rel="stylesheet" href="@Assets["AaaSubSystem.styles.css"]" />

CSS の分離⚓︎

Razor コンポーネントごとに CSS ファイルを紐づけて、その CSS ファイルで定義したスタイルが紐づけたコンポーネントのレンダリング結果にだけ影響するように構成できます。これを CSS の分離（ CSS isolation ）と呼びます。

たとえば、 Error.razor コンポーネントに対して適用する場合、同じフォルダーに Error.razor.css という名称のスコープ付き CSS ファイルを作成することで、 CSS の分離が有効になります。設定例を下記に示します。

Razor コンポーネントとスコープ付き CSS ファイルの配置例

<プロジェクト>
└─ Components/
   └─ Pages/
      ├─ Home.razor
      ├─ Error.razor
      └─ Error.razor.css

この例の場合、 Razor コンポーネントと紐づくスコープ付き CSS ファイルは、 Visual Studio では以下の画像のようにセットで表示されます。

Visual Studio 上でのスコープ付き CSS ファイルの表示

スコープ付き CSS ファイルは、ビルド時に CSS セレクターが書き換えられ、コンポーネントの HTML 要素に b-xxxxxxxxxx のようなスコープ属性名が自動付与されます。そして、それに一致する形で CSS も b-xxxxxxxxxx 付きのセレクターに変更されます。この仕組みにより、スコープ付き CSS ファイルの実装時に同じ名称のセレクターを使用しても、スタイルの衝突を気にする必要がありません。

詳細については ASP.NET Core Blazor の CSS の分離を参照してください。