FlaskでHTML・CSSを読み込む
開発環境】
OS:Win10(64ビット)
言語:Python3.8.5(64bit)
コード エディター:VSCode
Webフレームワーク:Flask
【HTML・CSSを読み込む】
1)hello.pyファイルの作成
flask-todo-appフォルダの下にhello.pyファイルを作り、次のコードを書く
コード
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def hello():
html = render_template('h_index.html',a = '変数なう')
return html
if __name__ == "__main__":
app.run()
2)templatesフォルダにh_index.htmlファイルを作る。
下記のコード書く
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HELLO</title>
</head>
<body>
<p class="hello">Sayhello</p>
</body>
</html>
3)実行し、ブラウザを立ち上げ、URL:http://127.0.0.1:5000/を代入すると下記の様になれば、OK
CSSで装飾してみよう
1)h_index.htmlファイルを書き換える
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HELLO</title>
<linkrel="stylesheet" href="static/hello.css">
</head>
<body>
<p class="hello">こんにちわ~</p>
<p>{{a}}</p>
</body>
</html>
2)staticフォルダにhello.cssというファイルを作る
hello.cssファイルにコードを書く
.hello {
color: #f00;
}
3)実行する
なせか、CSSが反映されない!
※コメント投稿者のブログIDはブログ作成者のみに通知されます