BlazorでのWebアプリケーション開発手法１【C#】D08_プルダウンのBootstrap

前回のレクチャーでは、計測設定画面（MeasureSettingPage.razor）に素朴な<select>要素でプルダウンを作成しました。表示はできていますが、見た目はブラウザ標準のそっけないものです。今回はBootstrapのクラスを使って、このプルダウンをおしゃれに整えていきます。

図1　Bootstrap適用前のプルダウン（標準の見た目）

やり方はとてもシンプルです。select要素にclass属性を追加し、値を入力していく途中でIntelliSenseの候補を表示させます。すると、col-form-labelやform-check系など、フォーム関連のBootstrapクラスがずらりと候補に並びます。

図2　class属性のIntelliSense候補一覧

この中からform-selectを選択します。確定すると、select要素は次のようになります。

<select class="form-select">
    <option value="1">毎日</option>
    <option value="2">毎週</option>
    <option value="3">毎月</option>
</select>

図3　class=”form-select”を追加してビルド実行

この状態で実行すると、プルダウンが綺麗に整った見た目で表示されます。クリックして開くと、選択肢もBootstrapらしいスタイルで表示されることが確認できます。

図4　form-select適用後のプルダウン（開いた状態）

このform-selectというクラス名がどこから来ているのか、Bootstrap公式サイトで確認してみましょう。Googleで「bootstrap select」と検索します。

図5　Googleで「bootstrap select」を検索

検索結果からBootstrap公式ドキュメントの「セレクト」ページを開くと、サンプルコードが掲載されています。見てみると、今回使ったclass=”form-select”がそのまま使われていることが分かります。このように、Bootstrapの使い方に迷ったら公式ドキュメントのサンプルを見て、そのままコピーしてくるという使い方もできます。

<select class="form-select" aria-label="Default select example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

図6　Bootstrap公式ドキュメント「セレクト」ページのサンプルコード

このドキュメントページをよく見ると、form-selectの他にform-select-lgやform-select-smというクラスも用意されています。LargeとSmallでサイズを変えられるようです。せっかくなので、3つ並べて見た目を比較してみましょう。class属性を入力する際のIntelliSense候補にも、form-select・form-select-lg・form-select-smの3つが並んで表示されます。

図7　form-select / form-select-lg / form-select-smのIntelliSense候補

同じプルダウンをbrタグで改行しながら3つ用意し、それぞれにform-select・form-select-lg・form-select-smを指定します。

<select class="form-select">
    <option value="1">毎日</option>
    <option value="2">毎週</option>
    <option value="3">毎月</option>
</select>
 
<br />
<select class="form-select-lg">
    <option value="1">毎日</option>
    <option value="2">毎週</option>
    <option value="3">毎月</option>
</select>
 
<br />
<select class="form-select-sm">
    <option value="1">毎日</option>
    <option value="2">毎週</option>
    <option value="3">毎月</option>
</select>

図8　form-select・form-select-lg・form-select-smを並べたコード

実行すると、何も指定していない（form-selectのみの）プルダウンは横幅いっぱいに広がって表示され、lgとsmは選択肢の文字がちょうど収まるサイズで表示されます。

図9　3つのプルダウンの横幅比較（通常／lg／sm）

サイズの違いをもっと分かりやすくするため、少し長めの選択肢「計測しない（任意計測）」をoptionとして3つのselectすべての先頭に追加してみます。

図10　長めのoptionをコードに追加

実行すると、lgとsmのプルダウンは追加した長い文字列がちょうど収まる横幅に自動的に広がることが確認できます。何も指定していない方は、変わらず横幅いっぱいのままです。

図11　長めoption追加後の横幅の自動調整（赤枠部分がlg・sm）

通常はこれでほぼ問題ありませんが、一番大きい選択肢に合わせたい場合はlgやsmを使うとよいでしょう。また、横幅を任意の値に固定したい場合は、以前input要素の回で使ったstyle属性のwidth指定と同じやり方が使えます。

図12　Home.razorのinput要素で使ったstyle=”width:300px”を参照

lgのselectにstyle=”width:300px”を追加してみます。IntelliSenseのツールチップにも、widthプロパティが要素の横幅を指定するものであることが表示されます。

図13　lgのselectにstyle=”width:300px”を追加

同様に、smのselectにはstyle=”width:50%”を追加します。パーセント指定では、表示領域に対する割合で横幅が決まります。

図14　smのselectにstyle=”width:50%”を追加

最終的なコードは次のようになります。

<select class="form-select">
    <option value="0">計測しない（任意計測）</option>
    <option value="1">毎日</option>
    <option value="2">毎週</option>
    <option value="3">毎月</option>
</select>
 
<br />
<select class="form-select-lg" style="width:300px">
    <option value="0">計測しない（任意計測）</option>
    <option value="1">毎日</option>
    <option value="2">毎週</option>
    <option value="3">毎月</option>
</select>
 
<br />
<select class="form-select-sm" style="width:50%">
    <option value="0">計測しない（任意計測）</option>
    <option value="1">毎日</option>
    <option value="2">毎週</option>
    <option value="3">毎月</option>
</select>

実行すると、3つのプルダウンがそれぞれ異なる横幅（通常は横幅いっぱい、lgは300px固定、smは表示領域の50%）で表示されることが確認できます。お好みに応じて、これらの指定方法を使い分けてください。

図15　3つのプルダウンがそれぞれ異なる横幅で表示された最終結果