その④：BootstrapをDjangoに取り込んでモダンなUIにする
このマガジンは期間限定で無料公開とします！！
前回までで、Djangoで環境を構築して、UI上にHello Worldを表示するという所まで完了しました。まだの方は以下を前回のNoteをご確認ください。
今回は、前回までに作成したtemplatesフォルダにフォーカスし、Bootstrapを用いて前回作った画面をよりモダンな形にしていきます。Bootstrapを導入するに際しては以下の公式サイトから部品をもってきてスクラップアンドビルドのアプローチが重要だと感じます。
以下の公式サイトを参照しながら進めていきます。（Bootstrapのドキュメントに飛びます）
では、さっそく始めていきましょう。
DjangoにおけるHTMLの構造
まずDjangoにおけるtemplatesフォルダ内において、HTMLファイルがどのように動くかをご紹介します。
上記が全体像になりますが、１つずつ解説します。階層としては2つ例として記載していますが、階層１と階層２があるとしています。その中で階層１が担うものは、Bootstrapのベースとなるものをここで定義します。
階層１：base.htmlで記載する事項
では、具体的にbase.htmlに書いていく内容を見ていきます。templatesフォルダにbase.htmlを新たにファイルとして作成し、bootstrapのスターターテンプレートの部分のCopyから貼り付けます。
青の〇を囲ったところをクリックして、以下のように張り付けてください。
できましたでしょうか？これで完了というわけではないのですが、これで第１階層におけるBootstrapの基本的な導入はできたことになります。
ここからさらに変更を加えていきます。具体的にはbodyタグの中にあるh1で記載されているHello worldを消して、以下のように記載してください。
<div class="container">
{% block content %}
{% endblock %}
</div>Djangoの独特の書き方として{}を用いて記載することが必要になります。関数を使うときには{% 関数を記載 %}にしますし、変数を使うときには{{ 変数を記載 }}という{}を１個か２個重ねることで、関数か変数を区別するようなロジックになっていることに特徴があります。この点注意して覚えておくとよいかと思います。
具体的には以下
を以下のようにします。titleのHello world!を変えても今回は目標にしている変更は反映されないので、ご注意ください。
さて、これで第１階層で想定している作業は終了です。この時点でDjangoのサーバーを起動しても反映はされていないです。以下の第２階層の作業が必要になります。
階層２：home.htmlで記載する事項
では次に第２階層のhome.htmlを作成していきます。home.htmlを開いて、以下を入力します。
{% extends "base.html" %}
{% block content %}
Hello World home.htmlから
{% endblock %}どのようなコードになっているかの仕組みですが、最初のextendsでbase.htmlとのリンクができるため、ここで宣言することで第１階層で入力したBootstrapとの連携が可能になります。
入力完了したら、python manage.py runserverで起動してみましょう。
すると、以前のHello Worldに比較して、左からスペースが取られた状態で文字が表示されているのと、home.htmlのHello Worldであることを認識できるように記載したhome.htmlからという文言が出ていることがわかります。
BootstrapのComponentを使ってみよう
では、最後にBootstrapのComponentを使って、ウェブアプリケーションの最初に表示される部分を作っていきます。BoostrapのSearchの部分にJumbotronと打ち、検索をします。すると、以下のような画面が出てきます。
最初に出てくる以下をbase.htmlでコピーした時と同じように青●の部分をクリックして、
base.htmlの<body>の下に貼り付けます。
Hello Worldをclass=display-4の後に記載がある箇所を自分の好きなサイトの名前に変えておきます。ここでは仮想通貨のまとめサイトになるのでValueable Crypto Informationとでもしておき、その下のleadの部分も自分の好きな文言に変更します。ここではThis is developed by Django with Rest API としておきます。
ほかの部品は要らないため、今回は削除しておきます。ご自身のウェブサイトで何か必要な部品があればそのまま残しておくので大丈夫です。ここまでできたら、Chrome等のブラウザを更新し（サーバーが止まっていたら起動を忘れずに）、以下が表示されたら完了です。
サイトのような見た目になりました！！！
以上、今回はtemplatesに絞って、構造を理解し、その構造の中でどういった書き方でどのようにコードを組み合わせれば、どういうものができるかを解説しました。では今日はこの辺で。
この記事が気に入ったらサポートをしてみませんか？