【Django】コンテンツの体裁を整える（フォームのレスポンシブ化と細かな修正）［Python］

2022年1月10日2022年12月9日

URLをコピーしました！

Django

前回、MathJaxを使って、HTML上に数式を表示する方法を解説しました。

フォームのレスポンシブ化

ということでフォームのレスポンシブ化を行います。

Bootstrapのグリッドシステムに関しては前にこちらの記事で紹介しています。

あわせて読みたい

【Bootstrap】Webアプリのページを作成：全体のデザインを構築［Python］【Bootstrap】前回はBootstrapでウェブサイトを作る準備として、全体のデザインを決め、Djangoで新規のプロジェクトとアプリを作成しました。今回は前回作成したデザ…

今、作成しているWebサイトでも全体のデザインに使っていますが、フォームの部分にも使っていこうと言うわけです。

例として、一次関数表示アプリをレスポンシブ化していきましょう。

まず一次関数表示アプリのフォームの部分はこんな感じでした。

<form action="{% url 'index' %}" method="post">
    {% csrf_token %}
    <table style="margin-left:auto; margin-right:auto;">
        <tr><td style="text-align: right;">{{ forms.a.label}}:</td><td>{{ forms.a }}</td><td style="text-align: right;">{{ forms.b.label }}:</td><td>{{ forms.b }}</td></tr>
        <tr><td style="text-align: right;">{{ forms.xmax.label }}:</td><td>{{ forms.xmax }}</td><td style="text-align: right;">{{ forms.xmin.label }}:</td><td>{{ forms.xmin }}</td></tr>
        <tr><td style="text-align: right;">{{ forms.ymax.label }}:</td><td>{{ forms.ymax }}</td><td style="text-align: right;">{{ forms.ymin.label }}:</td><td>{{ forms.ymin }}</td></tr>
        <tr><td></td><td></td><td></td><td style="text-align: right;"><input type='submit' value="click"></td></tr>
    </table>
</form>

このままでは画面が小さくなった時にははみ出てしまいます。

画面が大きい時。

画面が小さい時。

これをグリッドシステムを使って、レスポンシブデザインにするとこうなります。

<form action="/linearfunction/" method="post">
    {% csrf_token %}
    <div class="row">
        <div class="col-md-2 col-lg-3">
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3" style="text-align: center;">
            <font size="5">\(a\):  </font>{{ forms.a }}
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3" style="text-align: center;">
            <font size="5">\(b\):  </font>{{ forms.b }}
        </div>
        <div class="col-md-2 col-lg-3">
        </div>
    </div>
    <p><font size="4"> </font></p>
    <div class="row">
        <div class="col"　style="text-align: center;">
            <p style="text-align: center;"><font size="5">グラフの表示範囲</font></p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-1 col-lg-2">
        </div>
        <div class="col-sm-6 col-md-5 col-lg-4" style="text-align: center;">
            X軸の最小値:  {{ forms.xmin }}
        </div>
        <div class="col-sm-6 col-md-5 col-lg-4" style="text-align: center;">
            X軸の最大値:  {{ forms.xmax }}
        </div>
        <div class="col-md-1 col-lg-2">
        </div>
    </div>
    <div class="row">
        <div class="col-md-1 col-lg-2">
        </div>
        <div class="col-sm-6 col-md-5 col-lg-4" style="text-align: center;">
            Y軸の最小値:  {{ forms.ymin }}
        </div>
        <div class="col-sm-6 col-md-5 col-lg-4" style="text-align: center;">
            Y軸の最大値:  {{ forms.ymax }}
        </div>
        <div class="col-md-1 col-lg-2">
        </div>
    </div>
</form>

フォントサイズを調整していたり（<font size=”4″>）、位置の調整をしていたり（style=”text-align: center;”）しますが、そこは体裁を整えるためにしているので、今回の話とは関係ありません。

重要なのは「<div class=”row”>」や「<div class=”col-md-2 col-lg-3″>」です。

この「row」や「col」、そして実はもっと前にある「container」というクラスは図で示すとこのような関係にあります。

つまり「containerの中にrowがあって、さらにその中にcolがある」というわけです。

そしてこの「col」に対して、どの画面サイズの時に、どれだけの幅を使うのかというのがグリッドシステムです。

例えば「<div class=”col-md-2 col-lg-3″>」であれば、画面サイズが「md（≧ 786 px）」の時に2つのグリッド、「lg（≧ 992 px）」の時には3つのグリッドを使うことを示しています。

もう少し解説すると、例えばこの一次関数の「a」と「b」のフォームを表示している場所です。

<div class="row">
        <div class="col-md-2 col-lg-3">
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3" style="text-align: center;">
            <font size="5">\(a\):  </font>{{ forms.a }}
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3" style="text-align: center;">
            <font size="5">\(b\):  </font>{{ forms.b }}
        </div>
        <div class="col-md-2 col-lg-3">
        </div>
    </div>

ここには4つの「col」が存在しています。

そのうち最初と最後は何も入っていない「col」、中の二つは「aのフォーム」と「bのフォーム」が入っています。

そしてこのように区分してあります。