stR1Ng
← Back to Strings

Djangoチュートリアル2

Djangoチュートリアル2

Djangoチュートリアル2

この記事は部内での講習会用に作成された記事です。
前回のチュートリアルでは、Djangoのプロジェクトの作成やルーティング、ページの表示について学びました。

前回学んだ内容がWebアプリの超基本であり、根幹なので前回の内容が完璧になってしまえばもうWebアプリ開発は怖くありません！
今回は前回の内容を復習しつつ、さらえなかった内容についても紹介しながらハンズオン形式で自己紹介ページなどを作成していきます。

本記事では以下の記事で作成したDjangoプロジェクトを使用します。読んでいない人は合わせて進めてください！

Djangoチュートリアル

Djangoによるアプリの立ち上げやページの表示方法について

ここで勉強すること

  • Djangoでのページ移動のやりかた
  • HTMLの基礎
  • Bootstrapの使い方

動作環境

ここで使うDJangoプロジェクトの現在のフォルダー構成はこちらです。
(まだ静的ファイルの設定は行っていません。)

testproject(プロジェクト全体を格納するフォルダ)
├─ app(アプリディレクトリ)
│   ├─ migrations
│   │   └─ __init__.py
    ├─ templates
    │   └─ app
    │       └─ index.html
│   ├─ __init.py
│   ├─ admin.py
│   ├─ apps.py
│   ├─ models.py
│   ├─ test.py
│   └─ views.py
├─ testproject(プロジェクトディレクトリ)
│   ├─ __init__.py
│   ├─ asgi.py
│   ├─ settings.py
│   ├─ urls.py
│   └─ wsgi.py
└─ manage.py

ルーティング設定は

  • "/" => ホームページ(app/views.pyのindex関数が紐づけ)

となっています。

新しいページを用意する。

新しいページも用意してみましょう！

今回はユーザーのマイページを作成してみます！

まずはマイページを表示するためにviews.pyとapp/urls.pyの設定をしましょう！

ページを追加する。

Djangoで新しくページを追加したくなったらやることは

  • 新しくHTMLファイルをテンプレートとして用意する。
  • アプリのviews.pyに新しいページ用の関数を用意する
  • アプリのurls.pyでURLとページの紐づけをする。

この流れは最初のページを追加したときと全く同じです(関数名などが違うだけ) なので復習ついでに前回のチュートリアルを見ながらやってみましょう！

Djangoチュートリアル

Djangoによるアプリの立ち上げやページの表示方法について

関数名、結びつけるURL、HTMLファイル名は以下のように設定してみましょう！(違うのを設定しても大丈夫ですがこの記事ではこれを設定した前提で進めていきます！)

  • 関数名(ページ名)‥mypage
  • URL‥"mypage/"
  • HTML‥mypage.html

http://127.0.0.1:8000/mypage/でhtmlを表示できていたら成功です🚀

ページ追加のコード

実際にページを追加する時にはこのようにして追加していきます！
いろんなファイルをいじりますが慣れてしまえば割とサクッとできます。

views.py‥追加するページの機能を書くところ

from django.shortcuts import render
from django.http import HttpResponse
 
def index(request):
    username = "R1N"
 
    context = {"username": username}
    return render(request, "app/index.html", context=context)
 
def mypage(request):
  return render(request, "app/mypage.html")  ←mypage関数を追加！

app/urls.py‥URLとページの紐づけをするところ
プロジェクトディレクトリ(includeが書いている方)ではないので注意！

from django.urls import path
 
from . import views
 
urlpatterns = [
    path("", views.index, name="index"),
    path("mypage/", views.mypage, name="mypage") ← mypage用のURLを追加！
]

app/templates/app/mypage.html‥HTMLファイルを追加！
HTMLファイルはindex.htmlと同じところに作ります！

マイページに移動できるようにする。

URLでページが移動できることが確認できたと思います。

ですが実際のWebアプリではもちろんこの方法ではページ移動はしません(ユーザーがどのURLにどんなページがあるかも知らないし、、)

たいていはボタン等を押すことでページが遷移する設計になっています。
よって新しいページが出来たらそのページに移動できるようにしましょう！

ここでDjangoではWebアプリ内のページに移動する際には特殊な命令をHTML内に組み込みます。

通常のようにページのURLをべた書きで指定してもいいのですが、それだとURLが変わった場合にすべてのリンクを修正する必要が出てしまいます。

なのでURLで指定するのではなくページの名前を指定することでもし仮にURLが変わっても自動でDJangoがページ名からリンクを作成してくれるため修正する必要がありません。

これをDjangoでは逆引きURLと言います。(名前からURLを動的に取得する。)

ここでいうページ名とはpath関数のname=""の部分のことです！

今回はname="mypage"としましょう！

これで設定はOKです！ あとはHTMLのaタグに以下のように記述することでリンクを生成できます。

<a href="{% url 'mypage' %}">マイページへ</a>

{% url 'ページ名' %}というDjango特有の命令をHTMLに書くことでURLを作れます！

indexのページからmypageのページに移動できるようにしてみます。

app/templates/app/index.htmlのbodyタグの中に以下の記述を書いてください。

<nav class="navbar bg-body-tertiary">
        <div class="container">
            <a class="navbar-brand" href="/">ブログサイト</a>
            <a class="nav-link" href="{% url 'mypage' %}">マイページへ</a>
        </div>
</nav>
これはBootstrapのナビゲーションバーを使っています。今はBootstrapを読み込んでいないのでデザインが適用されません。後ほどBootstrapの設定をします。今はリンクで移動できることだけを確認してみてください。

これでページに移動できます！

Bootstrapとは

ページを作っていく前にBootstrapについて簡単に説明します！

BootstrapはCSSを簡単に記述できるように用意されたフレームワークです。
フレームワークなのですでにある程度のデザインが用意されています！

また、CSSを統一的に記述できるのでデザインの調節も簡単になっています。

Bootstrapの設定

Bootstrapを使用するためにindex.htmlに以下の記述を追加します。
この設定は前回もやっているのでやっていない人だけやってください！

↓headタグの中に追加
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
 
↓bodyタグの中に追加
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

これでBootstrapの設定は完了です！

Bootstrapの書き方

BootstrapではすでにCSSのデザインが用意されています。
なのでその用意されたデザインを呼び出すことでHTMLに適用することができます。

呼び出すにはタグのclass属性にBootstrapで用意されたクラス名を記述することでできます。

例えば以下のように記述することで文字が中央ぞろえになります。

  <h1 class="text-center">こんにちは！</h1>

h1タグにtext-centerというBootstrapのクラス名を追加して中央ぞろえのデザインを追加してます。

上の例のようにデザインの調節(文字の配置や余白など)をするクラス名をユーティリティクラスといいます。

ユーティリティクラス以外にもBootstrapではUIコンポーネントというのが用意されています。 これはHTMLのデザインをひとまとまりにして設定されているものです。

例えばBootstrapにはButtonコンポーネントというのがあります。 HTMLのButtonタグのclass属性に追加してみてください。

<button　class="btn btn-primary">ボタン</button>

このようにすることでボタンに用意されたデザインがまとめて適用されます。

UIコンポーネントのいいところはBootstrap公式が用意してくれたHTMLタグをコピペするだけで使える点です。

例えばボタンならこんな感じで公式がコンポーネントや使い方を用意してくれてます。 Bootstrapは日本語での公式ドキュメントがあるのでどんどん公式ドキュメントを見て使っていきましょう！

ボタン · Bootstrap v5.3

ボタンはフォームやダイアログなどのアクションにカスタムボタンスタイルを利用できます。 サイズや状態管理に対応しています。ボタンの使い方の例を示します。

あとはそのHTMLタグをユーティリティクラスで位置調節などをしてデザインを完成させていくのが主なBootstrapの流れです！

Bootstrapの拡張機能を入れよう

ここまでの説明でBootstrapのユーティリティクラスとかを覚える必要があるの？と感じた人がいると思います。

そんな人のために、おすすめのVSCodeの拡張機能があります。

それがBootstrap IntelliSenseという拡張機能です。
Bootstrapのクラス名の予測変換を出してくれて便利です。

Bootstrap IntelliSense

bootstrap_intellisense

またどんなクラス名があるのかを知りたいという人は公式のチートシートを見てみましょう！

たくさんありありますが「ほえ～こんなものあるんだ～」くらいの気持ちで全然大丈夫です！

Bootstrap 5 CheatSheet By ThemeSelection | Classes

An interactive list of Bootstrap 5 classes, variables, and mixins. The only Bootstrap 5 CheatSheet you will ever need.

HTML,CSSの基礎とよく使うユーティリティクラス

ここでユーティリティクラスを使う上で知っておきたいHTML,CSSの基礎について紹介します。

親要素と子要素

あるタグ(要素)に囲まれたタグのことを子要素、囲っているタグを親要素といいます。

<div id="parent">
  <div id="child">
  </div>
</div>

divタグ

上の例でさらっと出てきたdivタグってなに？となったと思います。
divタグはそれ自体には特別な機能はありません。

なのでdivタグで要素を囲ってもデザインが変化することはありません。

では**どういった時に使うの？**となると思います。

主な使い方は

  • あるコンポーネント自体にデザインを追加したいとき
  • 複数の要素をグループ化したいとき

などです。(他にも使い方などはありますが一旦はこれだけ覚えておけば大丈夫です！)

具体的な使い方を見ていきましょう！

ボタンを画面の中央に置きたいときに以下のコードだと中央になりません。

<button class="btn btn-primary text-center">ボタン</button>

これの原因はtext-centerはそのタグの中の要素に適用されるのでButton自体には適用されません。
これはボタンの中の文字に適用されてしまっています。

よって全体のデザインは変えずにButtonにデザインを適用したいときにdivタグを使います。

<div class = "text-center">
  <button class="btn btn-primary text-center">ボタン</button>
</div>

このようにdivで囲うことでdivの子要素にデザインを適用することができます！

また、divタグで囲うことでそれぞれをグループ化し、グループごとにデザインを変えることができます！

<body>
    <div class="p-3 mb-3 bg-light border rounded">
      <h2>お知らせ</h2>
      <p>本日15時からメンテナンスを行います。</p>
    </div>
    
    <div class="p-3 bg-info text-white rounded">
      <h2>イベント情報</h2>
      <p>今週末は夏祭りがあります！</p>
    </div>
</body>

このようにdivタグは子要素にデザインを付与するために使われます。
最初はどう使うか慣れないと思いますが、Bootstrapで使っていくうちに感覚がつかめていけると思います。

marginとpadding

Webアプリのデザインを作っていくうえで欠かせない存在が余白です。
CSSでは要素間の位置調整や要素内の位置調整のために余白の設定をします。

余白にも種類があり、それがmarginとpaddingです。

margin
適用した要素の外側の余白を調節します。
外側の余白なので並んでいる要素間の距離調節に使用されます。
Bootstrapではclass = "m-2"のようにして設定できます(0～5まである)。

padding
適用した要素の内側の余白を調節します。
内側の余白なので外枠線との距離や読みやすくするために使用されます。
Bootstrapではclass = "p-2"のようにして設定できます(0～5まである)。


イメージしやすいように要素との関係を図にするとこのようになります。
borderとは要素の枠線のことです。(要素の境界的なイメージで大丈夫です。)

画像

これでも正直イメージがしづらいと思います。(違いもわかりずらい)
なので具体例でイメージを固めていきましょう！

marginの例

例えば2つのボタンあったとします。

<div class = "text-center">
        <button class="btn btn-primary">ボタン1</button>
        <button class="btn btn-secondary">ボタン2</button>
</div>

このままだとボタン同士の距離が近すぎて押し間違いなどが発生しそうになります。
デザイン的にも余裕がない感じであまりいいデザインには見えないですよね。

よってこんな時はmarginを設定して間の距離を調節しましょう！
m-3というユーティリティクラスをbuttonに追加してください。

<div class = "text-center">
        <button class="btn btn-primary m-3">ボタン1</button>
        <button class="btn btn-secondary m-3">ボタン2</button>
</div>

ページをリロードしてみると2つの距離が離れたと思います。
これはそれぞれの外側に余白(margin)が追加されたことで隣接する要素との距離が生まれたためです。

これがmarginです！！

以下にBootstrapでのmarginの書き方を紹介しておきます。

  • m-1‥marginを設定します(0～5)
  • mx-1‥左右のmarginを設定します。
  • my-1‥上下のmarginを設定します。
  • mt-1, mb-1, ml-1, mr-1‥それぞれ上(top)、下(bottom)、左(left)、右(right)のmarginを設定します。
  • mx-auto‥ちょっとしたテクニック。左右のmarginをいい感じに調整して左右の要素との中央に配置してくれます。

mx-autoを使えばそのグループ自体を中央ぞろえにまとめてできます。
以下にBootstrapのcardコンポーネントで使用した例を置いておきます！

<div class="card w-25 mx-auto">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

このようにmx-autoを使えばdivでまとまったグループ全体を中央ぞろえにできます！

mx-autoはブロック要素にしか効きません。Buttonはインラインブロックなのでmx-autoは効きません。また、text-centerは要素中のインライン要素や文章を中央ぞろえにするので、その要素自体を中央ぞろえにするわけではありません。この点がmx-autoとの違いです。div内のButton自体がtext-centerで中央になったのはがインラインブロック要素として親の中央揃えに従っているからです

paddingの例

例えば以下のようなカードがあったとします。

  • w-25要素自体の横幅(width)を設定。今回は画面の25%のサイズ
  • border外枠線の設定
  • rounded要素の角の丸みの調節 
<div class="w-25 border border-black rounded-1 mx-auto">
  <h3>記事のタイトル</h3>
  <p class="text-muted">この記事は○○について解説をする記事になっています。</p>
  <a href="">記事を見る</a>
</div>

今は外枠線の中の要素の距離が近すぎて詰め詰めな状態です。
このままだと中の要素(子要素)が見づらく、デザイン的にも良くないです。

こんな時に外枠線との距離を調節し、読みやすいようにするために設定するのがpaddingです！ divタグにp-3というユーティリティクラスを追加してください。

<div class="w-25 border border-black rounded-1 mx-auto p-3">
  <h3>記事のタイトル</h3>
  <p class="text-muted">この記事は○○について解説をする記事になっています。</p>
  <a href="">記事を見る</a>
</div>

これでdivタグ内の余白が設定されて、子要素と外枠との距離が開きました。

これがpaddingです！！

Bootstrapでのpaddingの書き方の基本はmarginと同じです。

以下にBootstrapでのpaddingの書き方を紹介しておきます。

  • p-1‥paddingを設定します(0～5)
  • px-1‥左右のpaddingを設定します。
  • py-1‥上下のpaddingを設定します。
  • pt-1, pb-1, pl-1, pr-1‥それぞれ上(top)、下(bottom)、左(left)、右(right)のpaddingを設定します。

flexとgrid

Webアプリのデザインを考えるとき、まずレイアウトを大まかに考えながら作っていくと思います。

各要素を配置していくうえでmarginやpaddingだけでは良いレイアウトを実現することは難しいですし、労力も大きくかかります。

そんな要素を綺麗にレイアウト通りに配置するときに使用されるのがflexやgridです。

特にこれらはBootstrapでは感覚的に使えるように用意されています。

flexもgridもどちらも要素を均等に綺麗に配置するために使用されるユーティリティクラスです。


例えば記事の一覧表示をするページを実現する場合を考えます。

各記事をBootstrapのcardコンポーネントで実装するとします。
このコードは公式のサンプルから直接コピペしているだけです。

カード

カードは柔軟で拡張ができるコンテナです。headersやfootersのオプション、多様なコンテンツ、背景色、表示オプションが含まれています。

 
<div class="card w-25 mx-auto">
  <div class="card-body">
    <h5 class="card-title">記事1</h5>
    <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>
 
<div class="card w-25 mx-auto">
  <div class="card-body">
    <h5 class="card-title">記事2</h5>
    <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>
 
<div class="card w-25 mx-auto">
  <div class="card-body">
    <h5 class="card-title">記事3</h5>
    <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

通常では、divタグなど、文章のようなものではない要素は並べるとブロックのように積み重なっていく挙動をします。(これがブロック要素の意味の1つ)

しかしこれでは一覧表示がとても長くなってしまいます。
それにブロック要素が横に置けない挙動の性質上、例えばサイドメニューなどを横に配置したくてもできません。

このような各要素を一列に並ばせたいときにflexの出番です。

flexは指定した方向に子要素を一列に並べてくれます。
また、並べたときの配置の仕方も指定できます。

使い方は一列に並べたい要素たちをflexを付与したdivタグで囲えば使えます。

Bootstrapでは以下のように書きます。

<div class="d-flex"></div>

囲んだ結果がこちらです。

<div class="d-flex">
    <div class="card w-25 mx-auto">
      <div class="card-body">
        <h5 class="card-title">記事1</h5>
        <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="card-link">Card link</a>
        <a href="#" class="card-link">Another link</a>
      </div>
    </div>
    <div class="card w-25 mx-auto">
      <div class="card-body">
        <h5 class="card-title">記事2</h5>
        <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="card-link">Card link</a>
        <a href="#" class="card-link">Another link</a>
      </div>
    </div>
    <div class="card w-25 mx-auto">
      <div class="card-body">
        <h5 class="card-title">記事3</h5>
        <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="card-link">Card link</a>
        <a href="#" class="card-link">Another link</a>
      </div>
    </div>
</div>

こうすることで中の要素(card)が横一列に並びます。

この並ばせ方もユーティリティクラスを追加することで色々と指定できます。

  • flex-column‥縦一列に並ばせます。
  • flex-row‥横一列に並ばせます。
  • justify-content‥囲ったdivタグ内でどのように配置するかを決めれます。(startとかbetweenとかcenterとか)
  • align-items‥並ばせた方向と垂直になる方向の配置の仕方を決めます。(justify-contentと垂直になる方向)

詳しい使い方などは公式ドキュメントが図を用いて説明しているので見てみてください！

フレックス · Bootstrap v5.3

レスポンシブなフレックスユーティリティを使って、グリッドカラム、ナビゲーション、コンポーネントなどをレイアウト、整列、サイズ調整をすばやく設定できます。

flexが要素の一方向への配置に対してgridは要素をマス目上に配置します。　　

一応使い分けとしては

  • flex‥要素の配置(1方向)
  • grid‥全体のレイアウト(マス目上)

みたいなイメージです。

gridでは1行(横並び)内要素の数を決めることができます。
Bootstrapではrowとcolが使用されます。

<div class="container">
  <div class="row g-2">
    <div class="col-6 mb-3">趣味1</div>
    <div class="col-6 mb-3">趣味2</div>
    <div class="col-6 mb-3">趣味3</div>
    <div class="col-6 mb-3">趣味4</div>
  </div>
</div>
  • row‥girdの大枠を作成する。
  • col-6‥行の中でどのくらいのスペースを使うか(1行につき12個ある→6なら半分を使っている)

colで各列がどのくらい使うかを指定するのがポイントです。
この例だとそれぞれ半分を使っているので2×2になります。

colの使う幅を調節することで各行ごとに列数を変えたりできます。

さらっと出てきましたがg-2はflexやgridなどでめちゃくちゃ使います。これを使うことでmarginをいちいち各要素ごとに余白を指定せずに統一された余白を設定できるからです。flexの時はgap-2を使いましょう

rowとcolはBootstrap独自の使用で最初は戸惑うと思います。 公式ドキュメントが図を用いて説明してくれているので一度見てみてください！

グリッドシステム · Bootstrap v5.3

グリッドシステムは、12カラムのシステムと5段階のレスポンシブ、Sassとmixin、いくつかの定義されたクラスですべての図形とサイズのレイアウトを作成可能です。

container

最後にBootstrapを使う上でめちゃくちゃ使うユーティリティクラスcontainerについて紹介します

これは各要素の大枠を作ってくれる役割をします。　　 なので例えばまとめたいグループの一番外側にこのcontainerを適用させるイメージです。

containerは大枠の横幅と余白をいい感じに調節してくれます。
自動でmx-autoが効くので両端からいい感じの余白を常につけてくれます。

こんな感じで各まとまりごとにとりあえずcontainerを使うのがまずはおすすめです。

<!-- ヘッダーグループ -->
<div class="container bg-light py-3">
  <h1>サイトタイトル</h1>
  <p>ここはヘッダーの説明など</p>
</div>
 
<!-- メイングループ -->
<div class="container py-4">
  <h2>メインコンテンツ</h2>
  <p>ここがブログ記事の本文になります。</p>
</div>
 
<!-- サイドグループ -->
<div class="container bg-secondary text-white py-3">
  <h2>サイドバー</h2>
  <p>ここに補足情報などを置けます。</p>
</div>
 
<!-- フッターグループ -->
<div class="container bg-dark text-white py-2">
  <p>© 2025 サイト名</p>
</div>

ここではcontainerの範囲がわかりやすいように背景に色をつけています。

上の例のようにcontainerは横幅を自動で調節した後に中央ぞろえになるので左右に余白があります。
しかしヘッダーのように画面の両端全体に伸ばしたい場合があります。

そんな時はcontainer-fluidを使うと横幅が両端まで伸びるようになります。

ここまで色々なものがいっきに出てきましたが一度ですべてを覚える必要はありません！！

特にCSSのようなデザイン周りは慣れの要素が大きいのでこれからいろんなWebアプリを作っていく中で慣れていきましょう！

ホームページを用意する。

実際にBootstrapを使ってWebアプリのデザインを作っていきましょう！

まずは前回作ったindex.htmlが表示されているページのデザインを作っていきます。

このページはURLの一番トップということで最初にアクセスされるページになります。
よってここはアプリのホームページにします。

まずはレイアウトから作っていきます。
ホームページのレイアウトなのでシンプルな構成です。

画像

上にはナビゲーションバーでページの移動などをできるようにします。
中央にはページの説明やタイトルなどを表示させるメインコンテンツを配置しています。

ではこのレイアウトを基にHTMLを書いてみましょう。
ポイントは各要素ごとにdivを使ってグループ化することです。

<body>
 
    <div class="container-fluid">
        ナビゲーションバー
    </div>
 
    <div class="container">
        メインコンテンツ
    </div>
 
</body>

簡単に表せばこのような構成になります。各まとまりに対してcontainerで大枠を作っています。

そうしたら1つずつ実装していきましょう。

まずはナビゲーションバーです。

先ほどのURLの設定でナビゲーションバーは一度作りましたがここでもう一度説明します。
すでに作っている人はここは読むだけでOKです！

ナビゲーションバーはBootstrapのUIコンポーネントを利用しています！

ナビゲーションバー

v5.2.0の新機能: ナビゲーションバーは .navbar ベースクラスにスコープされるCSS変数でテーマを設定できます。 .navbar-light は非推奨となり、 .navbar-dark はスタイル ...

公式ドキュメントを見てみるといろんなナビゲーションバーのデザインが用意されていますが今回は最もシンプルなものを使用します。

index.htmlのナビゲーションバーのdivを消して新しくナビゲーションバーを追加します。

  • navbar-brand‥ナビゲーションバーの見出し的な
  • nav-link‥ナビゲーションバーのリンク用のデザインを適用してくれる 
<body>
 
    <nav class="navbar bg-body-tertiary">
        <div class="container">
            <a class="navbar-brand" href="/">ブログサイト</a>
            <a class="nav-link" href="{% url 'mypage' %}"">マイページへ</div>
        </div>
    </nav>
 
    <div class="container">
        メインコンテンツ
    </div>
 
</body>

これでナビゲーションバーは完成です🚀

次はメインコンテンツの方に行きましょう！

今回メインコンテンツに表示したいものは

  • ページのタイトル
  • ページの説明
  • 一覧ページへの移動するためのボタン

です。

以下が簡単なレイアウトになります。

画像

ここでメインコンテンツ内の各要素の配置はそれぞれ用意して余白の設定などをしてもいいですが
ここでは余白の幅を統一して綺麗に配置するために練習もかねてflexを使っていきます。

containerと同じタグにflexを書いても問題はありませんが今回は見やすさのために分けて書いていきます。

また、メインコンテンツとナビゲーションバーの感覚が近いので要素間の余白を作るためにmarginも使います！

gapで要素間の余白を均等に調節していますが、buttonだけ下げたいので個別でmarginを設定

<div class="container mt-5">
  <div class="d-flex flex-column align-items-center text-center gap-4">
    <h1 class="fw-bold display-3 ">ブログサイトへようこそ</h1>
    <p class="fs-5 text-muted">このブログサイトはDjangoで作られているブログサイトです。
      <br/>ユーザーごとに自分の記事を投稿して全ユーザーに共有することができます。</p>
    <a href="" class="btn btn-secondary mt-4">記事の一覧をみる</a>
  </div>
</div>
  • flex-column‥縦一列に要素を並べる
  • align-items-center‥並んでいる方向と垂直方向に中央ぞろえ(今回なら横に対して中央ぞろえ)
  • text-center‥文字要素の中央ぞろえ
  • fw-bold‥太字
  • text-muted‥文字色の変更(薄い黒)
  • brタグ‥改行改行
画像

これで一旦ホームページは完成です！

次はいよいよ二つ目のページであるマイページを作っていきます。

マイページを作る

ホームページが完成したので次にマイページを作っていきましょう！

今回作っていくマイページはこんな感じの拡張しやすいシンプルなマイページです。

画像

完成したら色々と設定や内容を変えてみてください！
自分で触った方がWebデザインは理解しやすいと思います。

マイページのレイアウトを作る。

まずはレイアウトを確認していきましょう！
全体をまとまりごとに見てみるとホームページと同じレイアウトとしてみれます。

画像

これをHTMLで書いていきましょう！
ここでナビゲーションバーはホームページのものを流用していきます。

まずmypage.htmlのひな形はこのようになります。
Bootstrapの読み込みとナビゲーションバーが追加されているだけです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>自己紹介 - あなたの名前</title>
  <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
    crossorigin="anonymous"
  />
</head>
<body class="bg-white">
 
  <nav class="navbar bg-body-tertiary">
    <div class="container">
      <a class="navbar-brand" href="/">ブログサイト</a>
      <a class="nav-link" href="{% url 'mypage' %}">マイページへ</a>
    </div>
  </nav>
 
  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
    crossorigin="anonymous"
  ></script>
</body>
</html>

ではレイアウトを追加していきます。　　 ナビゲーションバーは追加しているのでメインコンテンツの大枠を配置します。
ナビゲーションバーとの余白もつけておきます。

bodyタグ内はこうなります。

<body class="bg-white">
 
  <nav class="navbar bg-body-tertiary">
    <div class="container">
      <a class="navbar-brand" href="/">ブログサイト</a>
      <a class="nav-link" href="{% url 'mypage' %}">マイページへ</a>
    </div>
  </nav>
 
 
  <!-- メインコンテンツ -->
 
  <div class="container mt-5"></div>
 
  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
    crossorigin="anonymous"
  ></script>
</body>

これで大枠は完成です。
次にメインコンテンツ内の大まかなレイアウトを作っていきます。

簡単に図にするとこのような構成になっています。

画像

4つのまとまりで構成されていることがわかるのでdivで各構成の枠を作っていきます。

また、ここでポイントなのが各構成が縦一列に均等に並んでいます。
よってflexとgapで綺麗に並べていきます！

メインコンテンツのレイアウトはこうなります

<!-- メインコンテンツ -->
 
<div class="container my-5 d-flex flex-column align-items-center gap-4">
 
  <div class="ontainer-fluid"  style="max-width: 720px;></div>
 
  <div class="container-fluid" style="max-width: 720px;"><div/>
 
  <div class="container-fluid" style="max-width: 720px;"><div/>
 
  <div class="container-fluid" style="max-width: 720px;"><div/>
 
</div>
  • style="max-width: 720px;‥container-fluidが広がりすぎないように最大の幅を設定しているだけです。

あとは各レイアウトの中身を作っていくだけです！

ユーザー名の構成を作ろう

ここはユーザーのアイコンとユーザーのプロフィールが並んでいるシンプルな構成です。 flexで綺麗に並べていきましょう！

アイコンは一旦はdiscordのデフォルトアイコンを直接インストールして使用します。

<div class="d-flex flex-column align-items-center container-fluid">
  <img
    src="https://cdn.discordapp.com/embed/avatars/0.png"
    alt="プロフィールアイコン"
    class="rounded-circle shadow mb-3"
    width="96"
    height="96"
  />
  <div class="h3 fw-bold">ユーザ名</div>
  <div class="text-muted">～学部 / ～学科</div>
  <div class="text-muted">ひとこと</div>
</div>

アイコンとの距離だけを調節したいのでmb-3で余白を作っています。

これでユーザー名の部分は完成です。


画像を実際に使いたかったら以下の方法で静的ファイルを読み込んでください！

Djangoでの静的ファイルの設定について

Djangoで画像やCSS、Javascriptを配信するにはいくつかの設定が必要です。ここではその配信方法について紹介します。

自己紹介カードを作ろう

ここはとても単純です。

カードデザインをBootstrapのcardで作ってもいいですが
ここで中に文章のみをいれるのでシンプルにborderでカードデザインを作ります。

カードデザインで文章が読みやすいように外枠と文章の間に**余白(padding)**も入れます。

<div class="container-fluid" style="max-width: 720px;">
  <div class="border rounded-3 p-4 shadow-sm">
    <p class="mb-0">
      はじめまして！私は～です！<br/>
    </p>
  </div>
</div>
  • shadow-sm‥要素の外側に影を追加します。

これだけで完成です！中の文章は自由に変更してみてください！

他のカードデザインも作ってみよう

他のカードデザインも追加してみましょう！

ここでは趣味や好きなことを紹介するカードを作ってみます。

まずカードのデザインは統一感を出すために先ほど作ったカードデザインを流用します。

 <div class="container-fluid" style="max-width: 720px;">
  <div class="border rounded-3 p-4 shadow-sm">
  </div>
</div>

ではここから中の要素を追加していきます！　　

まずは内部のレイアウトを見てみましょう！

画像

ここで特徴的なのコンテンツの配置です。
コンテンツが規則的に2列を維持して並んでいます。

このようにマス目状に要素が並んでいる時はgridを使用します！

この場合2列を作りたいのでcol-6を使いましょう！(6/12を使用する)

タイトル部は今までと同じように作るのでここでサクッと用意しちゃいます。
タイトル部にはgirdとの距離を用意するためにmarginや中央ぞろえの設定もしています。

<div class="container-fluid" style="max-width: 720px;">
  <div class="border rounded-3 p-4 shadow-sm">
    <div class="h5 fw-semibold mb-3 text-center">趣味・好きなこと</div>
      <div class="row g-3">
 
        <div class="col-6">  
        </div>
        
        <div class="col-6">
        </div>
 
        <div class="col-6">
        </div>
        
        <div class="col-6">
        </div>
      </div>
  </div>
</div>
  • g-3‥gridの要素間の余白を調節する。

これでレイアウトは完璧です！

あとは中に内容を詰めるだけとなりました！

Bootstrap Iconsを使ってみる

ここで各要素が文章だけだと寂しいので文章の横にラベル代わりにアイコンを用意してみましょう！

アイコンは画像を用意してもいいですが、今回はBootstrap Iconsを使ってみます。

インストールのためにheadタグの中に以下の記述を追加してください。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

これで読み込みが完了しました！
あとは公式サイトで気に入ったアイコンをクリックし、右側にあるアイコンフォントというコードを置きたい場所にコピペすればアイコンが表示されます。

公式サイトで早速アイコンを見てみましょう！

Bootstrap Icons

Bootstrap Icons. フリー、高品質、オープンソース、そして1,800以上のアイコンを持つアイコンライブラリです。SVGやSVGスプライト、Webフォントなど多様な方法で利用でき ...

気に入ったアイコンを見つけたら、gird内の要素に入れてみましょう！
ここで、要素は文章とアイコンが横並びになるようにしたいのでflexをまた使います。

各要素はこんな感じになります！(flexで横並びにしてひとまとまりに)

<div class="col-6 d-flex align-items-center gap-2">
  <i class="bi bi-music-note-list  text-muted"></i>
  <div>音楽を聴くこと（落ち着いた曲が好きです）</div>
</div>
  • align-items-center横並びになっている要素の高さをそろえている(中央に)

例えば4つの要素を並べた例がこちらです。

<div class="container-fluid" style="max-width: 720px;">
      <div class="border rounded-3 p-4 shadow-sm">
        
        <div class="h5 fw-semibold mb-3 text-center">趣味・好きなこと</div>
        
        <div class="row g-3">
          
          <div class="col-6 d-flex align-items-center gap-2">
            <i class="bi bi-music-note-list text-muted"></i>
            <div>音楽を聴くこと（落ち着いた曲が好きです）</div>
          </div>
          <div class="col-6 d-flex align-items-center gap-2">
            <i class="bi bi-book text-muted"></i>
            <div>読書（小説とかを少し～）</div>
          </div>
          <div class="col-6 d-flex align-items-center gap-2">
            <i class="bi bi-cup-straw  text-muted"></i>
            <div>散歩（知らない道を歩くのが楽しいです</div>
          </div>
          <div class="col-6  d-flex align-items-center gap-2">
            <i class="bi bi-camera text-muted"></i>
            <div>写真を撮ること（風景が中心）</div>
          
          </div> 
        </div>
      
      </div>
</div>

一見複雑に見えますが、要素ごとに見ていけば意外とシンプルな構成になっています。

更に要素を追加したくなったらcol-6を増やすことで形を保ったまま追加できます！

フッダーを作ろう

いよいよ最後のコンテンツです！

個々の構成もシンプルです！
横並びになったボタン群とリンクの文章の2要素があるだけです！

ボタンの所をflexで実装するだけです！！

以下が大まかな構成になります。

<div class="text-center container-fluid">
  
  <div class="d-flex justify-content-center gap-3 mb-3>
  </div>
 
  <div class="text-muted mb-0 small">
  </div>
 
 
<div/>

これまで何回も見てきた構成ですね。
Webアプリのデザインはある程度作り方が決まっているのでコツをつかめばシンプルなデザインならサクサク作れちゃいます！(やっぱり慣れ、、)

まずはボタンを実装してみましょう！！ BootstrapのButtonコンポーネントを使いましょう。

今回のボタンは外部のリンクと結び付けたいのでaタグにbtnというユーティリティクラスを追加してリンクをボタンにしちゃいます。

flexの中はこのようになります！

<div class="d-flex justify-content-center gap-3 mb-3">
        <a
          href="https://github.com"
          class="btn btn-outline-dark d-flex align-items-center"
          target="_blank"
          rel="noopener noreferrer"
        >
          <i class="bi bi-github me-1"></i> GitHub
        </a>
        <a
          href="https://x.com"
          class="btn btn-outline-secondary d-flex align-items-center"
          target="_blank"
          rel="noopener noreferrer"
        >
          <i class="bi bi-twitter-x me-1"></i> Twitter
        </a>
</div>
  • target="_blank" rel="noopener noreferrer"‥aタグで外部リンクを別タブで指定するときはセキュリティ上このように追加の記述を書きます。

ここでは各サイトの公式リンクを張っていますが、もしアカウントを持っていたら自分のリンクにしてみてください！

これで横並びのボタンも実装できたのであとはリンクを実装するだけです！

以下がフッダーの完成です！

<div class="text-center container-fluid">
      <div class="d-flex justify-content-center gap-3 mb-3">
        <a
          href="https://github.com"
          class="btn btn-outline-dark d-flex align-items-center"
          target="_blank"
          rel="noopener noreferrer"
        >
          <i class="bi bi-github me-1"></i> GitHub
        </a>
        <a
          href="https://x.com"
          class="btn btn-outline-secondary d-flex align-items-center"
          target="_blank"
          rel="noopener noreferrer"
        >
          <i class="bi bi-twitter-x me-1"></i> Twitter
        </a>
      </div>
      
      <div class="text-muted mb-0 small">
        ご連絡は上記のSNS、または
        <a href="mailto:your.email@example.com">こちら</a>
        まで。
      </div>
</div>

お疲れ様です！これでフッダーも完成しました！

完成

ここまでお疲れさまでした！

ついにマイページの完成です！以下が完成後のコードになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>自己紹介 - あなたの名前</title>
  <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
    crossorigin="anonymous"
  />
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css"
  />
</head>
<body class="bg-white">
  <nav class="navbar bg-body-tertiary">
        <div class="container">
            <a class="navbar-brand" href="/">ブログサイト</a>
            <a class="nav-link" href="{% url 'mypage' %}">マイページへ</a>
        </div>
 
  </nav>
 
  <div class="container my-5 d-flex flex-column align-items-center gap-4">
    <div class="container-fluid d-flex flex-column align-items-center">
      <img
        src="https://cdn.discordapp.com/embed/avatars/0.png"
        alt="プロフィールアイコン"
        class="rounded-circle shadow mb-3"
        width="96"
        height="96"
      />
      <div class="h3 fw-bold">ユーザ名</div>
      <div class="text-muted">～学部 / ～学科</div>
      <div class="text-muted">ひとこと</div>
    </div>
 
    <div class="container-fluid" style="max-width: 720px;">
      <div class="border rounded-3 p-4 shadow-sm">
        <p class="mb-0">
         はじめまして！私は～です！<br/>
 
        </p>
      </div>
    </div>
 
    <div class="container-fluid" style="max-width: 720px;">
      <div class="border rounded-3 p-4 shadow-sm">
        <div class="h5 fw-semibold mb-3 text-center">趣味・好きなこと</div>
        <div class="row g-3">
          <div class="col-6 d-flex align-items-center gap-2">
            <i class="bi bi-music-note-list text-muted"></i>
            <div>音楽を聴くこと（落ち着いた曲が好きです）</div>
          </div>
          <div class="col-6 d-flex align-items-center gap-2">
            <i class="bi bi-book text-muted"></i>
            <div>読書（小説とかを少し～）</div>
          </div>
          <div class="col-6 d-flex align-items-center gap-2">
            <i class="bi bi-cup-straw  text-muted"></i>
            <div>散歩（知らない道を歩くのが楽しいです</div>
          </div>
          <div class="col-6  d-flex align-items-center gap-2">
            <i class="bi bi-camera text-muted"></i>
            <div>写真を撮ること（風景が中心）</div>
          </div>
        </div>
      </div>
    </div>
 
 
    <div class="text-center container-fluid">
      <div class="d-flex justify-content-center gap-3 mb-3">
        <a
          href="https://github.com"
          class="btn btn-outline-dark d-flex align-items-center"
          target="_blank"
          rel="noopener noreferrer"
        >
          <i class="bi bi-github me-1"></i> GitHub
        </a>
        <a
          href="https://x.com"
          class="btn btn-outline-secondary d-flex align-items-center"
          target="_blank"
          rel="noopener noreferrer"
        >
          <i class="bi bi-twitter-x me-1"></i> Twitter
        </a>
      </div>
      
      <div class="text-muted mb-0 small">
        ご連絡は上記のSNS、または
        <a href="mailto:your.email@example.com">こちら</a>
        まで。
      </div>
    </div>
 
</div>
 
  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
    crossorigin="anonymous"
  ></script>
</body>
</html>

今回のデザインは拡張しやすくしています！

ぜひ自分で要素を追加してみてください！

Webアプリのレイアウトは慣れの一言なのでたくさん失敗を繰り返して慣れていきましょう！！！

他のStringを探す

Djangoチュートリアル5-CRUD操作-

Djangoチュートリアル5-CRUD操作-

DjangoのORMを使ったCRUD操作の基本について紹介します。

Django
python
CRUD操作
ORM
Djangoチュートリアル4-モデルの定義-

Djangoチュートリアル4-モデルの定義-

DjangoでDBに記事を保存するためのモデルの定義方法について紹介します。

Django
python
DB
LogoutViewで405エラーが出た話

LogoutViewで405エラーが出た話

Djangoの組み込みクラスビューでログアウトを行う際に405エラーが出た場合の対処法に備忘録として記録しました。

Django
Python
HTML