BlazorでのWebアプリケーション開発手法１【C#】B09_画面遷移_aタグの見た目をボタンにする

前回のレクチャーでは、aタグを使ってページ遷移を行いました。今回は同じaタグを使いつつ、見た目をボタンに変える方法を解説します。

既存のaタグを確認する

Home.razorには、前回作成した次のようなaタグがあります。href属性に”measure”を指定し、クリックすると計測画面（MeasurePage.razor、URL /measure）に遷移する、ごく普通のリンクです。

<a href="measure">計測画面を開く</a>

図1　前回作成したaタグ（Home.razor 11行目）

このままでも遷移はできますが、文字だけのリンクではなく「ボタンらしい見た目」にしたい、という場合の対応が今回のテーマです。比較のために、既存のaタグの下に空行を2つ追加しておきます。

図2　既存のaタグの下に空行を2つ追加

aタグをコピーしてclass属性を追加する

空けておいた行に、先ほどのaタグをコピー＆ペーストします。文字リンク版とボタン版を両方残しておき、見比べられるようにするためです。

図3　aタグをコピーして貼り付けた状態

貼り付けたほうのaタグに、a と href の間へ半角スペースを空けてclass属性を追加します。class=” と入力してダブルクォートの中にカーソルを置き、btn btn と入力すると、IntelliSenseの候補一覧（btn、btn-check、btn-closeなど）が表示されます。これはBootstrapが提供するCSSクラスの一覧です。

図4　class属性を入力中に表示されるIntelliSenseの候補一覧

最終的に次のように、class=”btn btn-primary” を追加します。

<a class="btn btn-primary" href="measure">計測画面を開く</a>

図5　class=”btn btn-primary” を追加した状態

この btn btn-primary という指定は、Counter.razorのボタン要素（class=”btn btn-primary” @onclick=”IncrementCount”）ですでに使われているものと同じです。つまり「Bootstrapという部品群を使って、標準的で綺麗な見た目のボタンにする」という指定になります。

図6　Counter.razorのボタンでも同じ btn btn-primary クラスが使われている

実行して確認する

実行してHome画面を確認すると、1つ目は従来どおりの文字リンク「計測画面を開く」、2つ目はBootstrapのプライマリボタンとして表示され、見た目が青いボタンに変わっていることが確認できます。

図7　文字リンク（上）とボタン化したaタグ（下）を並べて表示

ボタンをクリックすると、通常のaタグと同様にURLが /measure に変わり、計測画面へ正しく遷移します。見た目がボタンに変わっただけで、リンクとしての機能はそのままです。

図8　ボタンをクリックして計測画面へ遷移した状態

文字リンクのままでよい場合はaタグをそのまま使い、ボタンらしい見た目にしたい場合はこのようにBootstrapのクラスを指定する、という使い分けになります。

ボタンの色（バリエーション）を変える

ボタンの色については、以前のレクチャーでも触れたとおりBootstrapにはいくつかのバリエーションが用意されています。Google検索で「bootstrap ボタン」と調べると、Bootstrap公式サイト（getbootstrap.jp）のボタンのドキュメントページが見つかります。

図9　Bootstrap公式サイトのボタンのバリエーション一覧（Primary/Secondary/Success/Danger/Warning/Info/Light/Dark）

気に入った色があれば、そのクラス名に書き換えるだけで見た目を変更できます。たとえば secondary が良ければ、次のように btn-primary を btn-secondary に書き換えます。

<a class="btn btn-secondary" href="measure">計測画面を開く</a>

図10　class を btn-secondary に書き換え

実行すると、ボタンの色が青からグレーに変わります。このように、この辺りは好みに応じて調整してみてください。

図11　btn-secondary に変更後のボタン（グレー表示）