PythonのWebフレームワークDjangoでファイルの関係性を解説しながら、BMI計算アプリを作ってみる 〜その7〜

目次

Django

前回、BMI計算アプリでBMI値から肥満度の結果を表示するように変更を加えました。

今回は全体的な見栄えを整えていきたいと思います。

ブラウザ上への表示を制御しているのは、/testapp2/bmiapp/templates/bmiapp/index.html です。

元々はこんな感じでした。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
</head>
<body>
    <h1>{{ title }}</h1>
    <form action="{% url 'index' %}" method="post">
        {% csrf_token %}
        {{ forms.height.label }} {{ forms.height }} cm
        {{ forms.weight.label }} {{ forms.weight }} kg
        <input type='submit' value="click">
    </form>
    <p>{{bmi}}  {{optimal}}</p>
    <p>{{ result }}</p>
</body>
</html>

これを改変していきましょう。

まずは最終的なデザインを紹介

とりあえず最終的にどんなプログラム、そしてデザインになるかから紹介します。

ということで最終的なindex.htmlはこちら。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
</head>
<body>
    <h1>{{ title }}</h1>
    <table>
    <form action="{% url 'index' %}" method="post">
        {% csrf_token %}
        <tr>
        <td style="text-align: right;">{{ forms.height.label }}</td><td>{{ forms.height }}</td><td>cm</td>
        </tr>
        <tr>
        <td style="text-align: right;">{{ forms.weight.label }}</td><td>{{ forms.weight }}</td><td>kg</td>
        </tr>
        <tr>
        <td></td><td style="text-align: right;"><input type='submit' value="click"></td><td></td>
        </tr>
    </form>
    <tr><td><br></td><td></td><td></td></tr>
    <tr><td style="text-align: right;">BMI値:</td><td style="text-align: center;">{{ bmi }}</td><td></td></tr>
    <tr><td style="text-align: right;">適正体重:</td><td style="text-align: center;">{{ optimal }}</td><td>kg</td></tr>
    </table>
    <p>{{ result }}</p>
</body>
</html>

そして表示されるデザインはこちら。

かなりすっきりとした感じではないでしょうか。

ということで順番に解説していきましょう。

変更部分の解説

それでは変更部分の解説を進めていきましょう。

今回大きく変更したのはbodyタグ(<body>から</body>まで)の中です。

<table>
    <form action="{% url 'index' %}" method="post">
        {% csrf_token %}
        <tr>
        <td style="text-align: right;">{{ forms.height.label }}</td><td>{{ forms.height }}</td><td>cm</td>
        </tr>
        <tr>
        <td style="text-align: right;">{{ forms.weight.label }}</td><td>{{ forms.weight }}</td><td>kg</td>
        </tr>
        <tr>
        <td></td><td style="text-align: right;"><input type='submit' value="click"></td><td></td>
        </tr>
    </form>
    <tr><td><br></td><td></td><td></td></tr>
    <tr><td style="text-align: right;">BMI値:</td><td style="text-align: center;">{{ bmi }}</td><td></td></tr>
    <tr><td style="text-align: right;">適正体重:</td><td style="text-align: center;">{{ optimal }}</td><td>kg</td></tr>
    </table>
    <p>{{ result }}</p>
</body>

それぞれのタグごとに解説していきましょう。

Tableタグ

今回は全体を整列させるためテーブル(表)を使っています。

その表を作っているタグがTableタグです。

HTMLは基本的にタグの始まりは<タグ名>、タグの終わりは</タグ名>となっています。

ということで<table>から</table>までが表として設定されている領域になります。

ただ気をつけなければいけないのは、Tableタグに限らず、HTMLで行を変えても表示上は行は変わりません。

つまりこの二つは同じ表示になるということです。

<table>テーブルの中身</table>

<table>
テーブルの中身
</table>

この性質を頭に入れながら、プログラムの中身を見ていきましょう。

まずこんな感じの記述をよく見かけます。

<tr>
<td style="text-align: right;">{{ forms.height.label }}</td><td>{{ forms.height }}</td><td>cm</td>
</tr>

つまり<tr></tr>で括られた領域と<td></td>で括られた領域がある記述です。

これらを簡単な図で表すとこうなります。

つまりTableは表の範囲を示し、trは行を、tdは列を示しています。

ということは先ほどのTableタグの中身はこう表示されるように記述されているわけです。

{{ forms.height.label }}{{ forms.height }}cm
{{ forms.weight.label }}{{ forms.weight }}kg
<input type=’submit’ value=”click”>
BMI値:{{ bmi }}
適正体重:{{ optimal }}kg

style=”text-align: XXXXX”

そしてTableタグ以外にもう一つ目立つ記述があります。

それは「style=””text-align: XXXXX」という記述です。

そしてXXXXXの部分には「right」や「center」と書かれています。

この記述は左寄せ(left)、中央寄せ(center)、右寄せ(right)の時に用いる記述です。

それに合わせて先ほどの表を書いてみるとこうなります。

{{ forms.height.label }}{{ forms.height }}cm
{{ forms.weight.label }}{{ forms.weight }}kg
<input type=’submit’ value=”click”>
BMI値:{{ bmi }}
適正体重:{{ optimal }}kg

これで全体のデザインを合わせることができました。

pタグ

最後は<p></p>で囲まれた部分です。

<p>{{ result }}</p>

このpタグはパラグラフ(paragraph)タグと言われ、段落を示しています。

単に文章を書いたりしたい時に用います。

ということで全体のデザインを揃えてみました。

揃えるのに便利なのがやはりTableタグ。

色々アプリを作っていくのに何度もお世話になることでしょう。

次回からは、このBMIアプリをサーバーにアップして動かす準備を整えていきましょう。

ではでは今回はこんな感じで。

よかったらシェアしてね!

コメント

コメントする

目次
閉じる