職案人

求職・歴史・仏教などについて掲載するつもりだが、自分の思いつきが多いブログだよ。適当に付き合って下さい。

FlaskでHTML・CSSを読み込むには

2021年06月13日 | Python
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が反映されない!

コメント    この記事についてブログを書く
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする
« Flask--共通テンプレートの作成 | トップ | Django--新規プロジェクト作成 »
最新の画像もっと見る

コメントを投稿

Python」カテゴリの最新記事