皆様のBlazorアプリケーションを彩るBlazor With シリーズ
今回は、スタイルシートだけでファミコン風スタイルを実現するNES.cssをBlazorに組み込んでみたいと思います
#概要
NES.cssはファミコン風なスタイルを実現するCSSフレームワークです。CSSファイルを組み込むだけで使用できるので簡単に導入することができます
#実装
ここでは、BlazorのデフォルトテンプレートにNES.cssを使って、ファミコン風に変えてみましょう
##wwwroot/index.html
今回はアプリケーション全体にNES.cssを適用したいので、wwwroot/index.htmlにCSSへのパスを追加します。なお、NES.cssは使用するフォントにGoogleFontsのPress Start 2Pを推奨していて、NES.cssとPress Start 2Pを同時に組み入れるだけである程度見栄えは完成してしまいます
今回は、NES.cssの作者が公開しているNES.iconsを使用するので、一緒に追加します。
<head>
～
//👇 nes.css の追加
<link href="https://unpkg.com/nes.css@2.3.0/css/nes.min.css" rel="stylesheet" />
//👇 nes-icons.cssの追加
<link href="https://unpkg.com/nes.icons@3.0.0-beta.3/css/nes-icons.min.css" rel="stylesheet">
//👇GoogleFontsの追加
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
</head>
NES.css内にPress Start 2Pのスタイル設定がされているため、ありとあらゆるフォントが8Bit風に!
##Pages/Counter.razor
Counter.razorはbuttonにnes-btnを指定してをファミコン風に変更します。
//👇 nes-btn に変更
<button class="nes-btn is-primary" @onclick="IncrementCount">Click me</button>
##Pages/FetchData.razor
FetchData.razorは、table要素をnes-tableに変更します。
<div class="nes-table-responsive">
// 👇tableを nes- に変更
<table class="nes-table is-bordered is-centered">
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
@foreach (var forecast in forecasts)
{
<tr>
<td>@forecast.Date.ToShortDateString()</td>
<td>@forecast.TemperatureC</td>
<td>@forecast.TemperatureF</td>
<td>@forecast.Summary</td>
</tr>
}
</tbody>
</table>
</div>
##Shared/MainLayout.razor.css
Shared/MainLayout.razor.cssには、サイドバー(NavMenu.razor)の背景色を設定している箇所があるので、滑らかなグラデーションから単色に並ぶように変更します。
.sidebar {
/*background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);*/
// 👇上から20%ずつ単色が並ぶように変更
background-image: linear-gradient(to bottom, rgba(5, 39, 103) 20%, #141E5E 20% 40%, #201556 40% 60%, #2B0F50 60% 80%,#34094A 80% 100%);
}
##Shared/NavMenu.razor
サイドバーの項目のアイコンをNES.iconsのものに変更します。
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
<nav class="flex-column">
<div class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
//👇nes-iocon bars に変更
<span class="nes-icon bars" aria-hidden="true"></span> Home
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="counter">
//👇nes-iocon thumbs-up に変更
<span class="nes-icon thumbs-up" aria-hidden="true"></span> Counter
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="fetchdata">
//👇nes-iocon cloud に変更
<span class="nes-icon cloud" aria-hidden="true"></span> Fetch data
</NavLink>
</div>
</nav>
</div>
##Shared/SurveyPrompt.razor
ホーム画面(Index.razor)で使用されているコンポーネントは吹き出しのスタイルに変更しましょう。Marioっぽいキャラクターを配置して、いい感じにします
//👇nes-balloon に変更
<div class="nes-balloon from-left nes-pointer">
//👇nes-jp-logo に変更
<span class="nes-jp-logo" aria-hidden="true"></span>
<strong>@Title</strong>
<span class="text-nowrap">
Please take our
<a target="_blank" class="font-weight-bold link-dark" href="https://go.microsoft.com/fwlink/?linkid=2148851">brief survey</a>
</span>
and tell us what you think.
</div>
//👇nes-mario を配置
<a target="_blank" class="nes-mario" href="https://nostalgic-css.github.io/NES.css/"></a>
nes-balloonはブラウザの幅によっては表示がくずれてしまいますね、、
##Shared/NavMenu.razor.css
サイドバー(NavMenu.razor)の選択された要素の、角を丸くする効果をコメントアウトし、8bit風に変更します
.nav-item ::deep a {
color: #d7d7d7;
//👇 角を丸くするスタイルをコメントアウトする
/*border-radius: 4px;*/
height: 3rem;
display: flex;
align-items: center;
line-height: 3rem;
}
これでファミコン風のスタイルにページが変わったのではないでしょうか！
#おわりに
今回はスタイルシートだけでファミコン風にスタイルを変更できるNES.cssをご紹介しました
Blazorアプリケーションのデザインを作る際に、面白い選択肢のひとつになりえるのではないでしょうか
スタイルシートを組み入れるだけで使用できるので、ぜひ使ってみてください
小ネタではございましたが、何かの参考になれましたら幸いです