##はじめに
前回の続きで、今回はhtmlを扱います。
(どこまでできるかな)
##環境
- windows10
- flask2.0.2
- python3.8.10
##コード内でのhtml設定
###文字の大きさ変更
flask1.py
#!/usr/bin/env python
# -*- coding: utf-8 -*-
from flask import Flask
app = Flask(__name__)
@app.route('/')
def index():
return '<h1>Hello world</h1>' #メインタイトル
if __name__ == '__main__':
app.run(debug=True, host='0.0.0.0', port=5000)
h1タグで設定したことで、文字が大きく表示されました。h3にすると小さくなったのがわかります。
###装飾
色を変更してみた。
flask2.py
#!/usr/bin/env python
# -*- coding: utf-8 -*-
from flask import Flask
app = Flask(__name__)
#色を指定
@app.route('/')
def index():
return '<h1><font color="darkgreen">Python</font><br></h1>'
if __name__ == '__main__':
app.run(debug=True, host='0.0.0.0', port=5000)
なんとなくpythonっぽい色(?)になりました。
##htmlファイルの読み込み
pyファイルにhtmlタグを書き込むのはカスタマイズ性に欠けるので、htmlファイルから読み込む練習をしました。
下記のようなファイル階層にしています(templatesはこの名前にしないとエラーが発生する)。
directory/
|__flask3.py
|__templates/
|__index.html
###htmlファイル
今回の練習でhtmlを初めて扱いました。これも今後勉強が必要だなあ・・・
index.html
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
</head>
<body>
<title>Flask練習</title>
<span style="text-decoration: underline;"><font color="red"><h2>ショートケーキ</h2><font></span>
<p><font color="black">スポンジとクリームが層になり、上にイチゴが乗ったケーキを指すことが多いです。<br/>
ただし一般的な定義はないそうです。なのでこれがショートケーキだ主張すれば、何でも該当します(極端に言えば)
<font></p>
<span style="text-decoration: underline;"><font color="khaki"><h2>チーズケーキ</h2><font></span>
<p><font color="black">チーズを使ったケーキです。<br/>
チーズケーキは種類があり、スフレチーズケーキ、ベイクドチーズケーキ、レアチーズケーキに大別されます。<br/>
<font></p>
<span style="text-decoration: underline;"><font color="peru"><h2>ロールケーキ</h2><font></span>
<p><font color="black">スポンジ生地にクリームやフルーツを置いて巻いたものです。<br/>
スポンジの外側にクリームがあるもの、ないもの両方存在します。<br/>
<font></p>
</body>
</html>
###flaskの利用
htmlファイルを読み込みます。
flask3.py
#!/usr/bin/env python
# -*- coding: utf-8 -*-
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html') #htmlファイルの表示
if __name__ == '__main__':
app.run(debug=True, host='0.0.0.0', port=5000)
実行するとちゃんと項目ごとに色分けされて表示されました。
##まとめ
- htmlファイルを読み込んで表示できた。
次回は画像の読み込みを練習します。