FlaskでBootstrapを導入する方法を解説
2024年7月14日
こんにちは!
今回の記事では、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の導入なども検討してみましょう。
【関連記事】FlaskでTailwindCSSを導入する方法解説!Node.jsは必要なし
今回の記事があなたの開発にお役に立てれば幸いです。
ここまでお読みいただきありがとうございました。
Pythonの基礎から応用まで学べる
Python WebAcademy
Python WebAcademyでは、Pythonの基礎からアーキテクチャなどの応用的な内容まで幅広く学べます。また、ブラウザ上で直接Pythonコードを試すことができ、実践的なスキルを身につけることが可能です。
Pythonの学習を始めるインフラの学習はInfraAcademy
おすすめの記事