🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

2427閲覧

Python+FlaskのテンプレートエンジンでCSSが上手く表示されない

konan_

総合スコア4

Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/10/24 05:06

編集2019/10/24 06:51

前提・実現したいこと

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でサーバ(http://localhost:5000/login)にアクセスした場合・・・失敗(小さい&テキストボックスの位置)
※エラーメッセージは出ていない

Chromeでファイル(file:///C:/・・・/app/templates/login.html)にアクセスした場合
↑Chromeでファイル(file:///C:/・・・/app/templates/login.html)にアクセスした場合・・・成功

Firefoxでサーバ(http://localhost:5000/login)にアクセスした場合
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フォルダを作成し、その中に作成した場合)

いずれも結果は変わりませんでした。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

quickquip

2019/10/24 06:41

質問だけ読んだら /login に当たるコードが誤っている、という可能性しか思いつかないので、コードをあげるのがいいかと思います。
konan_

2019/10/24 06:53

@quiquiさん アップするのを忘れていました。 指摘して頂きありがとうございます。
guest

回答2

0

投稿2019/10/24 09:21

編集2019/10/24 09:25
konan_

総合スコア4

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

自己解決

時間を置いて、思い出した頃に
再度Chromeでサーバ(http://localhost:5000/login)にアクセスすると
CSSが適応された状態で返ってきました。。

原因が分からないのが、とても気持ち悪いですが、
これ以上調べようが無いため、終わりにしたいと思います。

この問題に時間を割いて頂いた方は大変申し訳ありません。
ありがとうございました。

また何かお気づきの方がいましたら
回答として投稿して頂けるとありがたいです。

投稿2019/10/24 09:17

編集2019/10/24 09:26
konan_

総合スコア4

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問