Django Bootstrap デザインフレームワーク

2026年8月2日 / tomita007

学習目標

前回は、Djangoの認証機能を利用してログイン・ログアウトを実装しました。これでTodoアプリの基本機能は完成しましたが、現在の画面はHTMLのみで作成されており、見た目はシンプルな状態です。

実際のWebアプリケーションでは、機能だけでなく、見やすさや操作のしやすさも重要になります。この章では、CSSフレームワークであるBootstrapを導入し、アプリケーションのデザインを改善します。

Bootstrapの導入方法に加え、Navbar、Card、Table、Buttonなどの基本コンポーネントの使い方を学びます。この章を終えると、見やすく操作しやすいTodoアプリが完成します。

Bootstrap

**Bootstrap（ブートストラップ）**は、Webページのデザインを簡単に作成できるCSSフレームワークです。通常は、見た目を整えるためにCSSを自分で記述する必要がありますが、Bootstrapにはデザイン済みの部品（コンポーネント）があらかじめ用意されています。

例えば、ナビゲーションバー、ボタン、テーブル、カード、フォームなどは、専用のクラスを指定するだけで簡単に利用できます。そのため、複雑なCSSを書かなくても、統一感のある見やすい画面を短時間で作成できます。Bootstrapは、多くのWebアプリケーションで利用されている人気のフレームワークです。

Bootstrapを利用するメリット

Bootstrapを利用すると、Webアプリケーションのデザインを効率よく作成できます。デザイン済みのコンポーネントが豊富に用意されているため、複雑なCSSを一から記述する必要がなく、短時間で見やすい画面を作成できます。

また、アプリケーション全体のデザインに統一感を持たせやすく、スマートフォンやタブレットなどさまざまな画面サイズに対応したレスポンシブデザインも簡単に実現できます。

さらに、NavbarやCard、Table、Buttonなど多くのコンポーネントを活用することで、機能性と操作性を向上させることができます。Webアプリケーションでは機能だけでなくデザインも重要であり、Bootstrapはその実現を支える便利なフレームワークです。

Bootstrapを導入する

Bootstrapを利用するには、まずBootstrapのCSSファイルをHTMLに読み込む必要があります。一般的には、<head>タグの中に<link>タグを記述してCSSを読み込みます。

これだけで、Bootstrapのデザインを利用する準備が完了します。導入後は、HTMLの要素にBootstrapが用意しているクラスを追加するだけで、ボタンやテーブル、フォームなどにデザインが自動で適用されます。

複雑なCSSを自分で作成しなくても、統一感のある見やすい画面を簡単に作成できるため、BootstrapはWebアプリケーション開発で広く利用されています。

Bootstrapコンポーネント

Bootstrapコンポーネントとは、WebサイトやWebアプリでよく使われるボタン、ナビゲーションバー、モーダル（ポップアップ）などのUIパーツを、HTMLのクラス（class）を記述するだけで簡単に実装できる機能部品のことです。

Navbar

**Navbar（ナビゲーションバー）**は、Webページの上部に表示されるメニューのことです。Navbarには、Todo一覧やTodo追加、ログイン、ログアウトなど、よく利用するページへのリンクを配置します。ユーザーはどのページを表示していても、Navbarを利用することで目的の画面へすぐに移動できます。そのため、アプリケーション全体の操作性が向上し、使いやすいWebサイトを作ることができます。実際のWebアプリケーションでも、多くのサイトが画面上部にNavbarを配置しており、ページ間をスムーズに移動するための重要な役割を担っています。

Card

**Card（カード）**は、情報を枠で囲んで見やすく表示するためのBootstrapのコンポーネントです。例えば、Todo登録フォームやログインフォーム、削除確認画面などをCardで囲むことで、入力欄やメッセージが整理され、画面全体が見やすくなります。Cardにはタイトルや本文を配置できるため、内容をわかりやすく区切って表示できます。特にフォームを使用する画面ではよく利用されており、ユーザーがどのような操作を行う画面なのかを一目で理解しやすくする効果があります。見やすく使いやすいWebアプリケーションを作るために役立つコンポーネントです。

Table

**Table（テーブル）**は、一覧データを表形式で見やすく表示するためのBootstrapのコンポーネントです。Todoアプリでは、タイトルや期限、完了状況などの情報を行と列で整理して表示できます。

以下はTodo一覧をTableで表示した例になります。

タイトル	期限	完了
買い物	7月20日	未完了
レポート	7月25日	完了

BootstrapのTableを利用すると、見出しや罫線、余白などが自動で整えられ、読みやすい一覧表を簡単に作成できます。そのため、多くのデータを一度に表示する一覧画面でよく利用されます。ブログの記事一覧や商品一覧、会員一覧など、さまざまなWebアプリケーションでも使用されており、データを分かりやすく表示するための基本的なコンポーネントの一つです。

Button

**Button（ボタン）**は、ユーザーがさまざまな操作を実行するためのBootstrapのコンポーネントです。Todoアプリでは、登録、編集、削除、ログイン、ログアウトなどの操作で利用されます。Bootstrapでは、ボタンの目的に応じて色を変更できるため、登録は青色、編集は黄色、削除は赤色、保存は緑色というように使い分けることができます。このように色を統一することで、ユーザーはボタンの役割を直感的に理解しやすくなります。また、アプリケーション全体でデザインを統一することで、見た目だけでなく操作性も向上し、より使いやすいWebアプリケーションを作成できます。

Todoアプリの見た目を整える

ここまで学習したBootstrapのコンポーネントを利用すると、Todoアプリ全体のデザインを改善できます。

例えば、

ページ上部にNavbarを配置する
一覧画面をTableで表示する
登録画面や編集画面をCardで囲む
操作ボタンをBootstrapのButtonへ変更する

ことで、シンプルだった画面が見やすく、操作しやすいデザインになります。

機能は変わりませんが、ユーザーにとって使いやすいWebアプリケーションになります。

まとめ

この章では、Bootstrapを利用してTodoアプリのデザインを整える方法を学習しました。Bootstrapは、Webページを簡単にデザインできるCSSフレームワークで、多くの便利なコンポーネントが用意されています。

Navbarはページ間を移動するためのメニューを表示し、Cardは情報やフォームを見やすく整理して表示します。また、Tableは一覧データを表形式で見やすく表示し、Buttonは操作内容に応じたデザインのボタンを簡単に作成できます。

Bootstrapを活用することで、統一感があり、見やすく操作しやすいWebアプリケーションを効率よく作成できるようになります。

ここまでで、Todoアプリの機能だけでなく、見た目も整った実用的なWebアプリケーションが完成しました。この教材で学習した内容を基礎として、ブログやECサイト、予約システムなど、さまざまなDjangoアプリケーションを開発できるようになるでしょう。