Bootstrapでボタンやフォームをきれいに見せる

はじめに
ボタンやフォームをきれいに見せる手順
まとめ

はじめに

前回までで、必要最低限の機能を備えたブログアプリの作成が完了した。

このままでもブログとして使い始めることはできるが、ここから見た目や機能などを追加したい時に記事としてまとめていく。

今回はPythonやDjangoの機能について新しい内容はなく、HTMLとCSSとBootstrapの内容がほとんどになる。

BootstrapはCSSのフレームワークで、フォームやボタンなどがきれいに表示されるようにあらかじめ用意してくれている。

Djangoで作成したアプリケーションのhtmlファイル側で、Bootstrapに用意されているスタイルが適用された(きれいに装飾された)要素を呼び出してボタンやフォームがきれいに見えるようデザインしていく。

現在のディレクトリ構成は以下の通り

■ディレクトリ構成

デスクトップ
 └Blog
   ├Blog_app
   │ ├migrations
   │ ├__init__.py
   │ ├admin.py
   │ ├apps.py
   │ ├models.py
   │ ├tests.py
   │ ├views.py
   │ ├urls.py 
   │ └templates
   │   └Blog_templates
   │     ├index.html  
   │     ├create.html
   │     ├page_list.html
   │     ├detail.html
   │     ├update.html
   │     └delete.html
   ├db.sqlite3
   ├config
 　│ ├・・・
 　│ └urls.py
   ├env_blog
   └manage.py

デスクトップ

└Blog

├Blog_app

│ ├migrations

│ ├__init__.py

│ ├admin.py

│ ├apps.py

│ ├models.py

│ ├tests.py

│ ├views.py

│ ├urls.py

│ └templates

│ └Blog_templates

│ ├index.html

│ ├create.html

│ ├page_list.html

│ ├detail.html

│ ├update.html

│ └delete.html

├db.sqlite3

├config

　│ ├・・・

　│ └urls.py

├env_blog

└manage.py

ボタンやフォームをきれいに見せる手順

実際に各htmlファイルを編集してデザインを整える。

index.html

最初はトップページの見た目を変更する。

■変更前

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ブログ</title>
</head>

<body>
    <h1>ブログ</h1>
    <a href="{% url 'Blog_app:create' %}">新規作成</a><br>
    <a href="{% url 'Blog_app:page_list' %}">一覧</a><br>
</body>

</html>

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

■変更後

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ブログ</title>
    #[1]
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<body>
    <h1>ブログ</h1>
    #[2]ナビバーの作成
    <nav class="navbar navbar-expand navbar-dark bg-dark">
　　　　 #[3]コンテナクラスの適用
        <div class="container-fluid">
            #[4]ナビゲーションバーにトップページ、新規作成、一覧ページへのリンクを作成
            <a class="navbar-brand" href="{% url 'Blog_app:index' %}">ブログ</a>
            <a class="navbar-brand" href="{% url 'Blog_app:create' %}">新規作成</a><br>
            <a class="navbar-brand" href="{% url 'Blog_app:page_list' %}">一覧</a><br>
        </div>
    </nav>
    <p><a class="btn btn-primary" href="{% url 'Blog_app:create' %}">新規作成</a></p>
    <p><a class="btn btn-primary" href="{% url 'Blog_app:page_list' %}">一覧</a></p>        
</body>

</html>

<!DOCTYPE html>

<head>

#[1]

</head>

<body>

#[2]ナビバーの作成

　　　　 #[3]コンテナクラスの適用

#[4]ナビゲーションバーにトップページ、新規作成、一覧ページへのリンクを作成

</div>

</nav>

</body>

</html>

[1]BootStrapをインポート

インポートという表現が正しいかは置いておいて、Bootstrapはヘッダにlinkタグを使って1行記述するだけで使用することができる。

CDNという場所にBootstrapの情報が保存されているので、そこから情報を取得し、ボタンやフォームに対してスタイルの適用(つまり装飾)ができるようになる。

[2]ナビゲーションバーを作成

class属性に、navbarというクラスの中にあるnavbar-expand-lgを適用している。

navbar-expandは画面サイズによらずメニューを常に表示させる。

bg-darkはナビバーの背景色暗くする。

navbar-darkは見る限りではテキストを白系の明るい色にする。暗い城の背景色(bg-dark)と合わせて使用する。

class=”navbar navbar-expand-lg navbar-dark bg-dark”

[3]コンテナクラスの適用

コンテナはBootstrapが持つグリッドシステムの中で定義されているクラス。

class=”container”だけでも使用できるが、class=”container-fluid”を適用すると画面幅いっぱいまで表示される。今回の場合はナビバーが横幅いっぱいに表示される。

[4]ナビゲーションバーにトップページ、新規作成、一覧ページへのリンクを作成

class=”navbar-brand”はナビゲーションバー内のテキストを特別なスタイルで表示する。通常はロゴやサイト名を表示するために使われる。

create.html

■変更前

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ブログ</title>
    #[1]追記予定
</head>


<body>
<h1>新規作成</h1>
<a href="{% url 'Blog_app:index' %}">トップ</a> #[2]編集予定
<form method="POST">
    {% csrf_token %}
    #以下[3]編集予定
    <div><input name="title" type="text" placeholder="タイトル"></div>
    #以下[4]編集予定
    <div><textarea name="content" placeholder="内容"></textarea></div>
     #以下[5]編集予定
    <button type="submit">登録</button>
</form>


</body>
</html>

<!DOCTYPE html>

<head>

#[1]追記予定

</head>

<body>

<a href="{% url 'Blog_app:index' %}">トップ</a> #[2]編集予定

{% csrf_token %}

#以下[3]編集予定

#以下[4]編集予定

#以下[5]編集予定

</form>

</body>

</html>

■変更後

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ブログ</title>
    #[1]追記
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<body>    
<h1>新規作成</h1>
<p><a href="{% url 'Blog_app:index' %}">トップ</a></p>　#[2]編集
<form method="POST">
    {% csrf_token %}
    #[3]編集
    <div class="container-md"><p><input class="form-control form-control-sm" name="title" type="text" placeholder="タイトル"></p></div>
    #[4]編集
    <div class="container-fluid"><p><textarea class="form-control form-control-lg" name="content" placeholder="内容"></textarea></p></div>
    #[5]編集
    <div></dib><button type="submit" class="btn btn-primary">登録</button></div>
</form>


</body>
</html>

<!DOCTYPE html>

<head>

#[1]追記

</head>

<body>

<p><a href="{% url 'Blog_app:index' %}">トップ</a></p>　#[2]編集

{% csrf_token %}

#[3]編集

#[4]編集

#[5]編集

</form>

</body>

</html>

[1]Bootstrapをインポート

[2]<p>タグで囲む

ここは最後に行った方が意味がわかりやすいはず。

pタグで囲むことで次の「タイトル」の入力欄との間に少し余白ができる。

今はこのトップページへのリンクと、タイトルの入力欄と、内容の入力欄が余白なしで縦に並んでいるため少し見づらくなっているので、それぞれに余白を持たせる。

[3]

・inputタグに以下を追記

class=”form-control form-control-sm”

inputタグの内部に追記した。これはBootstrapでフォームを装飾するための記述。sm(スモール)サイズのフォームとして画面上に表示させている。classは特定のタグ(今回はinputタグ)に対して名前を付けることができる。

Bootstrap側に”form-control”とさらにその中に”form-control-sm”が用意されており、私たちが作るWebアプリ側にこの名前を入力することでBootstrapのデザインを適用させることができる。

・pタグで囲む

[2]と同様に、pタグでかこむことで　内容の入力欄との間に余白を持たせる。

・divタグで囲み、以下を追記

<div class=”container-md”>・・・</div>

divタグは要素をグルーピングするためのタグ。要素の大きさ、配置、余白、デザインなどをまとめて適用させたい時に使う。

今回は、pタグとinputタグをdivタグで囲んでグルーピングしており、コンテナとしてのスタイルを適用させる。

class=”container-md”はBootstrapで用意されているコンテナクラスの内、md(ミドルサイズ)のコンテナを適用させている。

[4]

・textareaタグに以下追記

class=”form-control form-control-sm”

・pタグで囲む

・divタグで囲み、以下を追記

class=”container-fluid”

divタグとclassについては上述の内容と同じ。class属性を付与してBootstrap側で定義しているスタイルを適用し、divタグで囲んでpタグとtextareaタグをグルーピング。

container-fluidを指定してtextareaタグをコンテナの中に入れている。fluidはビューポート(画面幅)に合わせて横幅を自動で決めてくれる。

[5]divタグで囲み、以下を追記

class=”btn btn-primary”

Bootstrap側のbtnクラスとさらにその中にあるbtn-primaryというクラスを適用している。

以下はBootstrap適用後の新規作成画面。

Bootstrap適用後の新規作成画面

page_list.html

■変更前

<!DOCTYPE html>
<html lang="ja">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ブログ</title>
    #[1]追記予定
</head>
 
<body>
<h1>記事一覧</h1>
<a href="{% url 'Blog_app:index' %}">トップ</a>  #[2]pタグ追記予定
#[3]tableタグ、theadタグ、tbodyタグを追記予定
{% for page in pages %}
    <ul> #[4]trタグに変更予定
        <li>{{ page.title }}</li> #[5]tdタグに変更予定
        <li>{{ page.content }}</li> #[5]tdタグに変更予定
        <li>{{ page.created_date }}</li> #[5]tdタグに変更予定
        #[6]変更予定
        <li><a href="{% url 'Blog_app:detail' page.id %}">詳細</a></li>
        <li><a href="{% url 'Blog_app:update' page.id %}">更新</a></li>
        <li><a href="{% url 'Blog_app:delete' page.id %}">削除</a></li>
    </ul>#[4]trタグに変更予定
{% endfor %} 
</body>
</html>

<!DOCTYPE html>

<head>

#[1]追記予定

</head>

<body>

<a href="{% url 'Blog_app:index' %}">トップ</a> #[2]pタグ追記予定

#[3]tableタグ、theadタグ、tbodyタグを追記予定

{% for page in pages %}

<ul> #[4]trタグに変更予定

<li>{{ page.title }}</li> #[5]tdタグに変更予定

<li>{{ page.content }}</li> #[5]tdタグに変更予定

<li>{{ page.created_date }}</li> #[5]tdタグに変更予定

#[6]変更予定

</ul>#[4]trタグに変更予定

{% endfor %}

</body>

</html>

■変更後

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ブログ</title>
    #[1]Bootstrapをインポート
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>


<body>
<h1>記事一覧</h1>
<p><a href="{% url 'Blog_app:index' %}">トップ</a><br></p>  #[2]pタグを追記
#[3]talbeタグを追加
<table class="table">
    #[3]theadタグを追加
    <thead class="table-dark">
        #[3]trタグを追加
        <tr>
            #[3]thタグを追加
            <th scope="col">タイトル</th>
            <th scope="col">内容</th>
            <th scope="col">作成日</th>
            <th scope="col">操作</th>
        </tr>
    </thead>
    #[4]tbodyタグを追加
    <tbody>
        {% for page in pages %}
            #[4]ulタグからtrタグに変更
            <tr>
                <td>{{ page.title }}</td> #[4]tdタグに変更
                <td>{{ page.content }}</td> #[4]tdタグに変更
                <td>{{ page.created_date }}</td> #[4]tdタグに変更
                <td> #[5]ボタンをグループ化してスタイルを適用
                    <div class="btn-group" role="btn-group" aria-label="操作ボタン">
                        <a href="{% url 'Blog_app:detail' page.id %}" class="btn btn-primary">詳細</a></li>
                        <a href="{% url 'Blog_app:update' page.id %}" class="btn btn-warning">更新</a></li>
                        <a href="{% url 'Blog_app:delete' page.id %}" class="btn btn-danger">削除</a></li>
                    </div>
                </td>
            </tr>
        {% endfor %}
    </tbody>
</table>
</body>
</html>

<!DOCTYPE html>

<head>

#[1]Bootstrapをインポート

</head>

<body>

<p><a href="{% url 'Blog_app:index' %}">トップ</a><br></p> #[2]pタグを追記

#[3]talbeタグを追加

#[3]theadタグを追加

#[3]trタグを追加

<tr>

#[3]thタグを追加

</tr>

</thead>

#[4]tbodyタグを追加

<tbody>

{% for page in pages %}

#[4]ulタグからtrタグに変更

<tr>

<td>{{ page.title }}</td> #[4]tdタグに変更

<td>{{ page.content }}</td> #[4]tdタグに変更

<td>{{ page.created_date }}</td> #[4]tdタグに変更

<td> #[5]ボタンをグループ化してスタイルを適用

</div>

</td>

</tr>

{% endfor %}

</tbody>

</table>

</body>

</html>

[1]Bootstrapをインポート

[2]pタグを追記

[3]tableタグ、theadタグ、tbodyタグを追記予定

・tableタグ

画面上に表を作成するためのタグ。tableタグで囲われた部分に見出しなどをさらに追記していく。見出しや実際のデータはこの後に続くタグで作っていく。

・theadタグ

表の見出しをグループ化するためのタグ

・trタグ

trタグは表の中で行を定義するためのタグ。この中にthタグやtdタグを記述すると横一列に並び、thタグやtdタグの数だけ列が出来上がる。

・thタグ

表のヘッダセル(見出し)を定義すrためのタグ。

このタグで囲んだ文字が実際に表の見出しとして表示される。

[4]

・tbodyタグ

表の本体をグループ化するためのタグ。

trタグを囲み、さらにtrタグの中で次のtdタグを囲うことで実際の表データを記述する。

・ulタグからtrタグに変更

変更前はulタグを記述していた。ulタグは順序なしリストを作成するためのタグだが、今回は表にするのでulタグは外した。

この後、ulタグで囲んでいたliタグもtdタグに書き換えていくことになる。

・liタグをtdタグに変更

tdタグは表のデータセル(実際のデータ)を定義するためのタグ。

ulタグによって囲われたliタグがあることで順序のないリストとして表示されていたが、tbodyタグに囲われたtrタグに囲われたtdタグで囲むことで表のデータとして表示することができる。

[5]ボタンをグループ化してBootstrapのクラスを適用

Bootstrapにはbtn-groupがある。これはclass=”btn-group”と記述することで、複数のボタンが横一列に密着して表示されるような表示となる。

roleとaria-labelはアクセシビリティを向上させるためのHTMLタグ。

role属性は要素がどのような役割を持つかを示す。ブラウザなどのユーザーエージェントに対してその目的や機能を伝えることに役立つ。

aria-labelは要素に対してテキストでの説明(ラベル)を提供する。スクリーンリーダーなど画面に記述されている内容を読み上げる機能などが、このaria-labelに記載されているラベルを読み上げる。

以下はBootstrap適用後の一覧画面

Bootstrap適用後の一覧画面

まとめ

Django記事一覧

前回：【Django】削除機能を加える【ブログアプリ】

次回：

Django記事一覧

参考

はじめに · Bootstrap v5.3 (getbootstrap.jp)

フォームコントロール · Bootstrap v5.3 (getbootstrap.jp)

ボタン · Bootstrap v5.3 (getbootstrap.jp)

コンテナ · Bootstrap v5.3 (getbootstrap.jp)

【Django】Bootstrapでボタンやフォームをきれいに見せる【ブログアプリ】

Bootstrapでボタンやフォームをきれいに見せる

はじめに

ボタンやフォームをきれいに見せる手順

index.html

create.html

page_list.html

まとめ

コメント