エンジニアライフスタイルブログを運営しているミウラ(@miumiu06171)です。
普段はフリーランスでシステムエンジニアをしております。
今回は、こちらの記事に続いてPythonのFlaskで作成したWebアプリケーションに対してcssやbootstrapを適用する方法を紹介します。
FlaskでWebアプリを作成するためにVisual Studio Code (VS Code) を使用しているため、同様に確認したい方は、こちらの記事でVS CodeでPythonの開発環境を構築してみてください。
PythonのFlaskでcssを使う方法
ここでは、前回の記事で作成したFlaskのブログWebアプリケーションの以下のログイン画面を例にcssを適用する方法を紹介してきます。
static/cssフォルダ作成
FlaskのWebアプリでcssやjavascriptなど静的ファイルを扱う場合、staticフォルダ配下に静的ファイルを保存することが一般的です。
よって、cssファイルを保存するためのstatic/cssフォルダを作成してみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
├ static │ └ css ├ templates │ ├ base.html │ ├ create.html │ ├ index.html │ ├ login.html │ ├ signup.html │ └ update.html ├ venv │ ├ (省略) ├ app.py └ blog.db |
static/cssフォルダを作成すると、上記のようなフォルダ構成になっていたらオッケーです。
style.css作成
cssを適用するためにstatic/cssフォルダ配下にstyle.cssというファイルを作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
├ static │ └ css │ └ style.css ├ templates │ ├ base.html │ ├ create.html │ ├ index.html │ ├ login.html │ ├ signup.html │ └ update.html ├ venv │ ├ (省略) ├ app.py ├ blog.db |
そして、style.cssにh1タグの文字色を赤色に設定するcssを記述してみましょう。
|
1 2 3 |
h1 { color: red; } |
HTMLテンプレートファイルでstyle.css読み込み
style.cssの作成が完了したら、style.cssを読み込む方法をみていきましょう。
FlaskアプリのHTMLテンプレートファイルの中でもベースとしているbase.htmlでstyle.cssを読み込むには、以下のように記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="{{url_for('static', filename='css/style.css')}}"> </head> <body> {% block content %} {% endblock %} </body> </html> |
８行目のようにurl_forの第一引数にベースフォルダとなる’static’、第二引数filenameにベースフォルダからの相対パスを指定することでファイルを読み込むことができます。
これにより、base.htmlをベースとしている他のHTMLテンプレートファイルすべてにcssを適用することができます。
style.css動作確認
base.htmlにstyle.cssを適用できたところで、base.htmlをベースとしているlogin.html（ログイン画面）のh1タグで動作確認してみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 |
{% extends 'base.html' %} {% block content %} <h1>ログイン画面</h1> <form method="POST"> <label for="">ユーザ名</label> <input type="text" name="username"> <label for="">パスワード</label> <input type="password" name="password"> <input type="submit" value="ログイン"> </form> {% endblock %} |
以下のコマンドを実行し、FlaskのWebアプリを起動します。
|
1 2 3 |
$env:FLASK_APP = "app" $env:FLASK_ENV = "development" flask run |
こちらのログインページにアクセスし、h1タグのコンテンツ「ログイン画面」の文字が赤字になってcssのスタイルが適用されているか確認しましょう。
PythonのFlaskでBootstrapを使う方法
ここでは、前回の記事で作成したFlaskのブログWebアプリケーションの以下のログイン画面を例にBootstrapを適用する方法を紹介してきます。
flask-bootstrapインストール
FlaskでBootstrapを扱うには、flask-bootstrapという専用パッケージがあるので、以下のpipコマンドでインストールしましょう。
|
1 |
pip install flask-bootstrap |
flask-bootstrapとFlaskアプリの紐付け
FlaskアプリでBootstrapを使うため、sqlalchemyのときと同様に以下のようにapp.py内でFlaskアプリとBootstrapのインスタンスを紐付る必要があります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import os from flask import Flask from flask import render_template, request, redirect from flask_sqlalchemy import SQLAlchemy from flask_login import UserMixin, LoginManager, login_user, logout_user, login_required from flask_bootstrap import Bootstrap from werkzeug.security import generate_password_hash, check_password_hash from datetime import datetime import pytz app = Flask(__name__) app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///blog.db' app.config['SECRET_KEY'] = os.urandom(24) db = SQLAlchemy(app) bootstrap = Bootstrap(app) |
６行目でflask-bootstrapをインポートし、１５行目でFlaskアプリ(app)とflask-bootstrapのインスタンスを紐付けています。
HTMLテンプレートファイルでbootstrap読み込み
次はログインページのlogin.htmlを編集し、Bootstrapを適用していきましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{% extends 'bootstrap/base.html' %} {% block content %} <div class="container"> <h1>ログイン画面</h1> <form method="POST"> <label for="">ユーザ名</label> <input type="text" name="username" class="form-control"> <label for="">パスワード</label> <input type="password" name="password" class="form-control"> <input type="submit" value="ログイン" class="btn btn-primary"> </form> </div> {% endblock %} |
１行目では、’base.html’から’bootstrap/base.html’に変更することで、login.html内でBootstrapを使えるように読み込んでいます。
‘bootstrap/base.html’という記述になっていますが、bootstrapというフォルダ配下にbase.htmlが存在するというわけではないので、flask-bootstrapを使う上で必要な書き方だと思ってください。
３行目と１２行目では、通常のBootstrapを使うときと同様にbodyのトップレベルで「class=”container”」を持つタグでコンテンツ全体を囲んでいます。
７行目と９行目では、こちらのBoostrapのFormのサンプルもとに「class=”form-control”」を追加しています。
１０行目では、上記と同様にFormのサンプルからボタン要素に「class=”btn btn-primary”」を追加することで青色背景のボタンを設定しています。
このようにHTMLのタグにBootstrapで定義されるクラス(class)を追記するだけでいろんなスタイルを簡単に適用することができます。
flask-bootstrap動作確認
ログインページのlogin.htmlにBootstrapのクラスを適用できたところで、ログインページを確認してみましょう。
以下のコマンドを実行し、FlaskのWebアプリを起動します。
|
1 2 3 |
$env:FLASK_APP = "app" $env:FLASK_ENV = "development" flask run |
こちらのログインページにアクセスし、BootstrapのFormのサンプルのようにコンテンツ全体が画面中央寄せになり、ユーザー名、パスワードの入力枠が幅いっぱいに広がっているか確認しましょう。
まとめ
いかがでしたでしょうか。
PythonのFlaskで作成したブログWebアプリケーションに対して、cssとbootstrapを適用する方法を紹介してきました。
cssやbootstrapは、Webページをきれいなスタイルに変更して見た目を大きく変える要素であり、実際のWebアプリにも使われることが多いため、本記事で適用方法を習得頂ければと思います。
【関連記事】
【Python Flask入門】データベースと連携したWebアプリケーション作成
【Python Django入門】使い方からWebアプリ作成までの流れ
