FlaskでBootstrapを導入する方法を解説 - Flask WebAcademy

こんにちは！

今回の記事では、FlaskでBootstrapを導入する方法を解説します。

BootstrapとはWebサイトなどを効率よく開発するためのCSSフレームワークです。HTMLのclass名に設定することで、簡単にフロントエンドの作成をすることができます。

FlaskでBootstrapを導入するには、BootstrapのCDNを使うと簡単です。

今回の記事では、FlaskでBootstrapを導入する手順を丁寧に解説します。

FlaskでBootstrapを導入する手順

ここからは、Bootstrapを導入する手順を解説します。

Flaskのインストール

まずは、Flaskのインストールを行います。

以下のコマンドを実行しましょう。

pip install flask

app.pyの設定

続いて、app.pyの設定です。

ここでは、/にアクセスしたら、index.htmlを返すように設定します。

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)

index.htmlの設定

次にindex.htmlを設定します。index.htmlはtemplatesディレクトリに格納します。

ここで、BootstrapのCDNを設定します。

CDNの設定は、<head>タグ内に記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask-Bootstrap with CDN</title>
    <!-- ↓Bootstrap CSS CDN -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h1>Index page</h1>
    </div>
</body>
</html>

Flaskを起動をすると、Bootstrapが反映されたWebページが表示されます。

Baseテンプレートに分割する

Bootstrapの設定は、<head>タグに格納し、これらを全てのページで共有するのが便利です。

全てのテンプレートで、Bootstrapの設定をすると、変更があった際に全てのページの変更をしなければなりません。このように、テンプレート内で重複する部分はレイアウトテンプレートに分けると便利です。

templatesディレクトリにlayoytディレクトリを作成し、base.htmlを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask-Bootstrap with CDN</title>
    <!-- ↓Bootstrap CSS CDN -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        {% block content %}
        {% endblock %}
    </div>
</body>
</html>

その後、index.htmlを以下のよに編集します。

{% extends "layout/base.html" %}

{% block content %}
<h1>Index Page</h1>
{% endblock %}

このように設定することで、base.htmlを使い回すことができます。

たとえば、user.htmlという別のページを作成したいとします。この時、user.htmlにbootstrapの設定をせずに、base.htmlの設定を反映させます。

{% extends "layout/base.html" %}

{% block content %}
<h1>User Page</h1>
{% endblock %}

このように設定することで、Bootstrapの設定を全ページに反映させることができます。

まとめ

今回の記事では、FlaskでBootstrapを反映させる方法について解説しました。

Bootstrapを使うことで、フロントエンドの設定を簡単にすることができます。Bootstrap以外にもCSSのフレームワークはあるので、TailwindCSSの導入なども検討してみましょう。

今回の記事があなたの開発にお役に立てれば幸いです。

ここまでお読みいただきありがとうございました。