Webアプリ

Bootstrapでフォームのレイアウトを整える

毎月資産を積み立てる金額と、その資産の期待利回りを入力すると、将来いくらになるか計算するとてもシンプルなアプリを作っていました。

CSSの指定をせずに、フォームを作ると、以下のようにラベルと入力欄の位置が揃っていないため、とても見づらいです。

Before : CSS指定なし

そこで、すっきり見えるようにBootstrapのHorizontal formを使って、ラベルと入力欄を整列させることにしました。

After : BoostrapでCSSを指定した結果

位置を揃えただけで、だいぶ見やすくなりました。

まあ、これなら使ってみてもいいかな、というレベルだと思います。

 Bootstrapでの記述

公式ドキュメント

BootstrapのHorizontal formに関する、公式ドキュメントはこちらから。

https://getbootstrap.jp/docs/4.5/components/forms/

考え方

全体を括る
  • 整列させたいフォームを<form class="form-horizontal"></form>で括る
行ごとに括る
  • 1行にまとめる内容を<div class='form-group row"></div>で括る。
  • 今回の例では、ラベル、入力欄の2つ。3つ以上でもできる。
横に並べる際のサイズを指定する
  • 横に並べる要素（テーブルで言うところの各列に相当する要素）ごとに"col-3"などのようにサイズを指定。3の箇所は任意のサイズで、合計が12になるように設定するのは、Gridの考え方と同じ。
その他（一般的な注意点）
  • Bootstrapのformクラスの記法として、ラベルならcontrol-form、入力欄ならform-controlなどとclass指定しておく。

サンプルコード

<form class="form-horizontal" action="/" method="POST" name="assumption">
    <div class="form-group row my-3">
        <label class="col-sm-5 control-label" for="asset">積立する資産の名前</label>
        <div class="col-sm-6">
            <input type="text" placeholder="日本株" name="asset_name" class="form-control">
        </div>
    </div>

    <div class="form-group row my-3">
        <label class="col-sm-5 control-label" for="initial_amount">現在の資産額（円）</label>
        <div class="col-sm-6">
            <input class="form-control" type="float" inputmode="numeric" value="0" name="initial_amount">
        </div>
    </div>

    <div class="form-group row my-3">
        <label class="col-sm-5 control-label" for="top_up_amount">毎月積立する金額（円）</label>
        <div class="col-sm-6">
            <input class="form-control" type="float" name="top_up_amount">
        </div>
    </div>

    <div class="form-group row my-3">
        <label class="col-sm-5 control-label" for="return_ratio">想定する資産の利回り（年率, %）</label>
        <div class="col-sm-6">
            <input class="form-control" type="float" name="return_ratio">
        </div>
    </div>

    <div class="form-group row my-3">
        <label class="col-sm-5 control-label" for="duration_m">積立期間（月）</label>
        <div class="col-sm-6">
            <input class="form-control" type="number" name="duration_m">
        </div>
    </div>

    <div class="text-center my-5">
        <input type="submit" formaction="result" value="将来の金額を計算する"  class="btn btn-primary" onClick="return validation();">
    </div>

</form>

GitHubにもコード載せています。

https://github.com/datascience-lab-xyz/wealth-calculator

 

 

© 2025 Data Science Lab