【Blazor】初期のサイドバーをヘッダーメニューに変更する方法

クライアント側の処理もjavascriptを使用しないでC#で書けるようになった「Blazor」(ブレイザー)を必要に迫られて、学習を始めました。

初期段階で作成される画面構成を確認して、ASP.NET MVC5の見た目になれた者としては、
サイドバーだとコンテンツの部分が狭くて見づらい。。
そこで今回は、Blazorの初期のサイドバーをASP.NET MVC5のようなヘッダーメニューに変更する方法をまとめました。

事前準備

環境

・Visual Studio Community 2019
・.NET Core SDK 3.0.1

使用ツール

・Visual Studio Community 2019
こちらでダウンロード可能です。(無料)

プロジェクト作成

(1) Visual Studioを起動後、「新しいプロジェクトの作成」を選択する。

(2) 新しいプロジェクトの作成画面で、「Blazorアプリ」を選択後、「次へ」ボタンをクリックする。

(3) プロジェクト名などを設定後、「作成」ボタンをクリックする。

(4) 「Blazorサーバーアプリ」を選択後、「作成」ボタンをクリックする。

ソース修正

MainLayout.razorの修正

まずは初期のBlazorのレイアウトの構造を見てみましょう。

(1) 全体のレイアウトのソースは、[Shared] →「MainLayout.razor」になります。

コードを確認すると、以下の構造になっているようです。
※コード上のclass名を画像内に記載しています。

現状、top-rowのdiv要素がヘッダーメニューになっているので、ここを削除後、sidebarのdiv要素をmain内に移動します。
※この記事では分かりやすいように削除はコメントアウトにしています。

site.cssの修正

(1) [wwwroot] → [css] → [site.css]を選択する。

(2) 以下の部分を修正します。
※ソースで背景色が変更になっている部分

 

動作確認

それでは、動作確認をしていきましょう!
まずはパソコン版での表示です。

MVCの時みたいに、背景色が黒のヘッダーメニューが表示されました。
続いて、ブラウザのサイズを小さくして、スマフォでの表示を確認します。

こちらも無事に、ハンバーガーメニューが表示され、「三」をクリックすることでメニュー表示ができました!

まとめ

ということで、今回はBlazorの初期で表示されるサイドバーをヘッダーメニューに変更する方法をまとめました。
必要な作業は以下、2点になります。

1.MainLayout.razorのコードを修正する
2.cssを修正して、デザインを修正する。(今回は初期から入っているsite.cssを修正)

 

ハンバーガーメニューのデザインなど細かいデザインまでは再現できていませんが、
黒背景でヘッダーメニューにすることはできました!
僕みたいにヘッダーメニューにしたいと思われた方は、マネしてみてください(^^)

それでは、今回も最後までお読みいただきありがとうございました!

この記事を書いた人

石井 よしまさ
石井 よしまさフリーエンジニア / Webデザイナー / LPコーディング講師 / シンガーソングライター
歌うプログラマーとして
IT業界、プログラミングの"あるある"を歌にしている。プログラミングもデザインも音楽も色々とやるパラレルキャリアな人。

フリーランスエンジニア歴10年のセールスデザインができるWeb制作者 石井よしまさのメルマガ

常駐型のフリーランスエンジニアとして10年。
10年で関わった現場は13社。
その中で4社から正社員オファーを頂くことができた私が
主にフリーランス初心者向けに、

以下のような内容を配信していきます。

「常駐型のフリーランスで評価される為に大切な5つのマインド」
「10年で13社の案件に関わり、なぜ4社から正社員オファーがあったのか?」
「セールスデザイナーが依頼すべき良いコーダーとは?」..

などについて学べます。

是非、フリーランスとしてやっていきたい!
という方は、ご登録ください(^^)

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA