Q&A
できました！ありがとうございます！
前提・実現したいこと
Flaskでブラウザ上にPythonコード内の変数の値などを表示することができ、HTMLも正しく表示されているのですが、CSSファイルのみ反映されません。ディレクトリ構成の問題だと考えておりますが、なかなか解決できません。
発生している問題・エラーメッセージ
Chromeにて検証しておりますが、以下のような表示がされCSSファイルのみが見つかっていない状態です。二つ目のエラーのファイルに関しては見覚えがありません。
GET http://localhost:9999/production.css net::ERR_ABORTED 404 (NOT FOUND) GET http://localhost:9999/favicon.ico 404 (NOT FOUND)
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" href="production.css"> 6 <title>HELLO</title> 7</head>
Python
1def index(): 2 return render_template("index1.html", production_number=Production_number, cycle_time=Cycle_time, goal=Goal, operation_rate=Operation_Rate) 3
css
1@charset "utf-8"; 2 3div { 4 5 float: left; 6 list-style: none; 7 margin: 30px; 8 9}
directory
1Hello_World__.py 2templates/ 3 index1.html 4 production.css
試したこと
HTMLファイルをPythonからではなくそのまま開いた際はCSSは正しく反映されました。
回答2件
0
favicon.icoの404エラーについては、タブやお気に入り登録した際に表示されるアイコン(これをFaviconと呼びます)がサイトに存在していない(から表示されない)というだけなので、気にすることはありません。
投稿2020/10/19 09:31
総合スコア2536
0
ベストアンサー
CSSファイルは、HTMLテンプレートと同じtemplates以下には置かずに、templatesと同じ階層のstatic以下に置きます。
HTMLテンプレートには、
HTML
1<link rel="stylesheet" href="{{url_for('static', filename='production.css')}}">
のように、url_forを使って書いておくと、HTMLテンプレートから生成されるHTMLファイルの場所を気にすることなく、アクセス可能な形でCSSファイルへの相対パスをFlaskが生成してくれます。
投稿2020/10/19 08:14
編集2020/10/19 13:18
総合スコア11990
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/10/19 11:44