BlazorでのWebアプリケーション開発手法１【C#】D05_入力エリアの横幅の調整

今回は、Home.razorに配置した入力エリア（inputタグ）の横幅を調整する方法を扱います。Bootstrapのform-controlクラスを使うと入力欄は既定で横幅いっぱいに表示されますが、style属性のwidthプロパティを使うことでピクセル指定・パーセント指定のどちらでも横幅を自由に調整できます。

図1　現在のHome.razor。inputタグにclass=”form-control”が指定されている

図2　form-controlクラスにより、入力エリアが横幅いっぱいに表示されている

form-controlクラスを外してみる

現在の横幅いっぱいの表示は、class=”form-control”を指定しているためです。試しにclass=”form-control”を削除すると、どのように変わるかを確認します。

<input type="text"
       @bind="_areaName"
       @bind:event="oninput"
       placeholder="エリアを入力してください"
/>

コード1　class=”form-control”を削除した状態

図3　Visual Studio上でclass=”form-control”を削除したところ

図4　form-controlを外すと、ブラウザーの既定の横幅（短い状態）で表示される

style属性でwidthを指定する

横幅を調整したい場合は、style属性にwidth:を指定します。style=”width:”まで入力すると、IntelliSenseの候補一覧にauto・contain・fit-content・inherit・initialなど、widthに指定できる値の候補が表示されます。ここではピクセル数（例：300px）を直接入力します。

図5　style=”width:”まで入力すると、指定可能な値のIntelliSense候補が表示される

<input type="text"
       @bind="_areaName"
       @bind:event="oninput"
       placeholder="エリアを入力してください"
       style="width:300px"
/>

コード2　style=”width:300px”を指定した状態

図6　width:300pxと入力しているところ

図7　300pxを指定すると、入力エリアが少し大きく表示される

続けて400pxに変更すると、その分だけ入力エリアがさらに大きくなります。

図8　width:400pxに変更したところ

パーセント指定で横幅いっぱいにする

横幅いっぱいに表示したい場合は、ピクセルの代わりに%（パーセント）を指定することもできます。width:100%とすると、親要素の横幅いっぱいまで広がります。

<input type="text"
       @bind="_areaName"
       @bind:event="oninput"
       placeholder="エリアを入力してください"
       style="width:100%"
/>

コード3　style=”width:100%”を指定した状態

図9　width:100%に変更したところ

図10　100%を指定すると、横幅いっぱいに広がって表示される

同様に、50%とすればその半分の横幅になります。

<input type="text"
       @bind="_areaName"
       @bind:event="oninput"
       placeholder="エリアを入力してください"
       style="width:50%"
/>

コード4　style=”width:50%”を指定した状態

図11　width:50%に変更したところ

図12　50%を指定すると、横幅の半分だけ広がって表示される

form-controlクラスと組み合わせる

最後に、最初に外していたclass=”form-control”を書き戻します。form-controlは既定では横幅いっぱいに広がりますが、style属性でwidthを指定している場合はそちらが優先され、今回は50%指定のままなので、Bootstrapの見た目のまま横幅の半分で表示されます。

<input type="text"
       @bind="_areaName"
       @bind:event="oninput"
       placeholder="エリアを入力してください"
       style="width:50%"
       class="form-control"
/>

コード5　style=”width:50%”とclass=”form-control”を両方指定した状態

図13　class=”form-control”を書き戻したところ（style指定はwidth:50%のまま）

図14　Bootstrapの見た目のまま、横幅は50%で表示される

なお、form-controlを使う場合、style属性で何も指定しなければ既定の横幅いっぱいの表示に戻ります。試しにstyle属性の中身を削除すると、class=”form-control”だけが残り、横幅いっぱいの表示に戻ることが確認できます。

図15　style属性を削除し、class=”form-control”だけを残した状態

まとめ

form-controlクラスを使う場合、横幅を調整したいときはstyle属性でwidthを指定します。たとえばwidth:300pxのように指定すれば、Bootstrapの見た目を保ったまま横幅だけを変更できます。

<input type="text"
       @bind="_areaName"
       @bind:event="oninput"
       placeholder="エリアを入力してください"
       style="width:300px"
       class="form-control"
/>

コード6　最終的なコード：style=”width:300px”とclass=”form-control”を併用

図16　最終的にstyle=”width:300px”とclass=”form-control”を併用した状態

図17　Bootstrapの見た目のまま、横幅300pxで表示された最終結果