Blazor With NES.css

皆様のBlazorアプリケーションを彩るBlazor With シリーズ:sparkles:
今回は、スタイルシートだけでファミコン風スタイルを実現する[NES.css](https://nostalgic-css.github.io/NES.css/)をBlazorに組み込んでみたいと思います:video_game:

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110304/06b68155-a87b-4364-4c08-905041f9b427.png" width=80%>

**[デモ](https://blazorappwithnescss.web.app/)**

https://blazorappwithnescss.web.app/

#概要
[NES.css](https://nostalgic-css.github.io/NES.css/)はファミコン風なスタイルを実現するCSSフレームワークです。CSSファイルを組み込むだけで使用できるので簡単に導入することができます:v:

https://nostalgic-css.github.io/NES.css/

https://github.com/nostalgic-css/NES.css

#実装
ここでは、BlazorのデフォルトテンプレートにNES.cssを使って、ファミコン風に変えてみましょう:scissors:

##wwwroot/index.html
今回はアプリケーション全体にNES.cssを適用したいので、`wwwroot/index.html`にCSSへのパスを追加します。なお、NES.cssは使用するフォントにGoogleFontsの[Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P?selection.family=Press+Start+2P)を推奨していて、NES.cssと[Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P?selection.family=Press+Start+2P)を同時に組み入れるだけである程度見栄えは完成してしまいます:sweat_smile:
今回は、NES.cssの作者が公開している[NES.icons](https://github.com/nostalgic-css/NES.icons)を使用するので、一緒に追加します。

```html:index.html
<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](https://fonts.google.com/specimen/Press+Start+2P?selection.family=Press+Start+2P)のスタイル設定がされているため、ありとあらゆるフォントが8Bit風に!
![mario2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110304/f856dbb6-cf1f-2dbf-08f1-8af049ec910b.png)


##Pages/Counter.razor
Counter.razorは`button`に`nes-btn`を指定してをファミコン風に変更します。

```html:Pages/Counter.razor
//👇 nes-btn に変更
<button class="nes-btn is-primary" @onclick="IncrementCount">Click me</button>
```

##Pages/FetchData.razor
FetchData.razorは、`table`要素を`nes-table`に変更します。

```html:Pages/FetchData.razor
<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)の背景色を設定している箇所があるので、滑らかなグラデーションから単色に並ぶように変更します。

```css:Shared/MainLayout.razor.css
.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のものに変更します。

```html:Shared/NavMenu.razor

<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っぽいキャラクターを配置して、いい感じにします:relaxed:

```html:Shared/SurveyPrompt.razor
//👇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`はブラウザの幅によっては表示がくずれてしまいますね、、:frowning2:

##Shared/NavMenu.razor.css
サイドバー(NavMenu.razor)の選択された要素の、角を丸くする効果をコメントアウトし、8bit風に変更します:writing_hand:

```css:Shared/NavMenu.razor.css
.nav-item ::deep a {
    color: #d7d7d7;
    //👇 角を丸くするスタイルをコメントアウトする
    /*border-radius: 4px;*/
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
}
```

これでファミコン風のスタイルにページが変わったのではないでしょうか！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110304/e2cbd4c6-8635-d6ee-e068-2a87b241b8b0.gif" width=80%>

#おわりに
今回はスタイルシートだけでファミコン風にスタイルを変更できるNES.cssをご紹介しました:thumbsup:
Blazorアプリケーションのデザインを作る際に、面白い選択肢のひとつになりえるのではないでしょうか:information_desk_person:
スタイルシートを組み入れるだけで使用できるので、ぜひ使ってみてください:v:

小ネタではございましたが、何かの参考になれましたら幸いです:slight_smile: