前提・実現したいこと
Python+FlaskでWEBアプリを作っており、
HTML(+CSS)ファイルをブラウザに表示させる点で詰まっっています。
HTMlファイルをブラウザ(http://localhost:5000/login)に表示させることは出来たのですが、
Firefoxでは上手くいくものの、ChromeではCSSが上手く適応出来ませんでした。
(CSSは読み込まれているが、位置関係や大きさが変わってしまう)
ブラウザの問題かと思い、
次はChromeで直接ファイルにアクセス(file:///C:/・・・/app/templates/login.html)したのですが、
この場合には上手く表示することが出来ました。
そのためChromeとFlaskのテンプレートエンジンとの問題かと思っているのですが、
調べてもこの問題を言及している資料・記事が無かったので質問させて頂きました。
どうかよろしくお願いいたします。
######ファイル構成
|─app
|─templates
| └login.html
| └index.html
| └check.html
|─view.py
|─config.py
|─model.py
発生している問題・エラーメッセージ
↑Chromeでサーバ(http://localhost:5000/login)にアクセスした場合・・・失敗(小さい&テキストボックスの位置)
※エラーメッセージは出ていない
↑Chromeでファイル(file:///C:/・・・/app/templates/login.html)にアクセスした場合・・・成功
Firefoxでサーバ(http://localhost:5000/login)にアクセスした場合・・・成功
該当のソースコード
[templates/login.html] <html> <head> <title>TEST</title> <meta http-equiv="content-type" charset="utf-8"> <style> body { position: relative; } form { position: relative; top: 200; margin: 0 auto; width: 400px; padding: 1em; border: 1px solid #CCC; border-radius: 1em; } form div + div { margin-top: 1.5em; } label { display: inline-block; width: 90px; text-align: right; } input, textarea { font: 1em sans-serif; width: 300px; box-sizing: border-box; border: 1px solid #999; } .button { padding-left: 90px; } button { margin-left: .5em; } </style> </head> <body> <form action="/start" method="POST"> <div> <label for="name">UserName:</label> <input type="text" id="name" name="user_name"> </div> <div class="button"> <button type="submit">SEND</button> </div> </form> </body> </html>
[app/view.py] from flask import Flask, render_template, make_response, request app = Flask(__name__) #app.config.from_object('config') #最初にアクセス @app.route("/login") def login(): return render_template('login.html') #ランダムで画像を表示 @app.route("/start", methods=['POST']) def start(): if request.form['user_name']: response = make_response(render_template('index.html')) response.set_cookie('uid', request.form['user_name']) return response else: return render_template('index.html') #確認用のcheck.htmlをreturnする @app.route("/select", methods=['POST']) def select(): checkbox = request.form.getlist("checkbox") return render_template('check.html', cont=checkbox)
試したこと
・キャッシュの消去とハード再読み込み
・cssの外部ファイル化
(templatesディレクトリ内に作成した場合 、 templatesと同じディレクトリにstaticフォルダを作成し、その中に作成した場合)
いずれも結果は変わりませんでした。
回答2件
あなたの回答
tips
プレビュー