質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.35%
Flask

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

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

Amazon EC2

Amazon EC2は“Amazon Elastic Compute Cloud”の略称です。Amazon Web Services(AWS)の一部であり、仮想化されたWebサーバーのコンピュータリソースをレンタルできるサービスです。

Q&A

解決済

1回答

1442閲覧

flaskでログイン認証機能をつけたページにcssを反映させたい。

haruchan__

総合スコア7

Flask

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

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

Amazon EC2

Amazon EC2は“Amazon Elastic Compute Cloud”の略称です。Amazon Web Services(AWS)の一部であり、仮想化されたWebサーバーのコンピュータリソースをレンタルできるサービスです。

0グッド

0クリップ

投稿2021/10/10 05:01

EC2(amazon linux2)上でflaskを用いてログイン認証の機能を用いたページを作成しようとしています。
ログイン前のページにはcssが反映されるのですが、ログイン後のページにはcssが反映されません。
bootsstrapの様にフルパスで指定するとcssが反映されます。
また、アドレスバーにcssファイルにパスを指定するとブラウザ上でcssファイルが表示されます。
個人的んは、ログイン前後でhtmlファイルの相対位置が変わっているのかなと思います。
どのようにすればログイン後のhtmlファイルにもcssを反映させることができるでしょうか?

file構成
.
├── falsk_auth_app
│   ├── dblogin.py
│   ├── pycache
│   │   └── dblogin.cpython-37.pyc
│   ├── static
│   │   └── css
│   │   └── home1.css
│   ├── templates
│   │   ├── home1.html
│   │   ├── home.2.html
│   │   ├── home.html
│   │   ├── login.html
│   │   └── logout.html
│   ├── test.1.py
│   └── test.py
└── README.md

python3.7

1import flask 2import flask_login 3from flask import Flask, render_template, request,Response, abort, redirect,url_for,session 4from flask_login import LoginManager, login_user, logout_user, login_required, UserMixin 5from collections import defaultdict 6from boto3.session import Session 7import dblogin 8 9app = Flask(__name__) 10login_manager = LoginManager() 11login_manager.init_app(app) 12app.config['SECRET_KEY'] = "secret" 13 14#---インスタンス化--- 15class User(UserMixin): 16 def __init__(self, id, name, password): 17 self.id = id 18 self.name = name 19 self.password = password 20 21# ログイン用ユーザー作成 22users = { 23 1: User(1, "test", "test"), 24 2: User(2, "test1", "test1") 25} 26 27 28# ユーザーチェックに使用する辞書作成 29nested_dict = lambda: defaultdict(nested_dict) #importしたdefaultdictを利用 30user_check = nested_dict() 31for i in users.values(): 32 user_check[i.name]["password"] = i.password 33 user_check[i.name]["id"] = i.id 34 35@login_manager.user_loader 36def load_user(user_id): 37 return users.get(int(user_id)) 38 39####################################################### 40 41@app.route('/login', methods=["GET", "POST"]) 42def login(): 43 if(request.method == "POST"): 44 # ユーザーチェック 45 if(request.form["username"] in user_check and request.form["password"] == user_check[request.form["username"]]["password"]): 46 login_user(users.get(user_check[request.form["username"]]["id"])) # ユーザーが存在した場合はログイン 47 if request.form["username"] == "test": #testの場合にはhome 48 return redirect("/home/") 49 elif request.form["username"] == "test1": #test1の場合にはhome1 50 return redirect("/home1/") 51 else: #失敗したら401エラーを返す 52 return abort(401) 53 else: 54 return render_template("login.html") 55 56 57@app.route('/home1/') 58@login_required #パスワードかけたいページにこの文を追加 59def home(): 60 df = dblogin.dblogin_haisui() 61 df_values = df.values.tolist() 62 df_columns = df.columns.tolist() 63 print(df_values) 64 return render_template("home1.html", 65 df_values = df_values, 66 df_columns = df_columns 67 ) 68 69@app.route('/home/') 70@login_required 71def home1(): 72 73 return render_template("home.html") 74 75# ログアウトパス 76@app.route('/logout') 77def logout(): 78 flask_login.logout_user() 79 return redirect(url_for('login')) 80 81if __name__ == '__main__': 82 app.run(host = '0.0.0.0',debug =True)

html

1<!doctype html> 2<html lang="ja"> 3 <head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <link rel="stylesheet" href="static/css/home1.css" > 8 <title>シンプルなログインフォーム</title> 9 </head> 10 <body> 11 <p>a</p> 12 <table> 13 <thead> 14 <tr>{%- for i in df_columns %}<th>{{ i|e }}</th>{%- endfor %}</tr> 15 </thead> 16 <tbody> 17 {%- for i in df_values %} 18 <tr>{% for j in i %}<td>{{ j|e }}</td>{% endfor %}</tr> 19 {%- endfor %} 20 </tbody> 21 </table> 22 23 24 <div class="px-4 py-3"> 25 <input type="button" class="botton_logout" value="ログアウト" onclick="window.location.href='/logout'"> 26 </div> 27 28 </body> 29</html>

css

1@charset "UTF-8"; 2p { 3 font-size: 100px; 4} 5table { 6 margin-left: 2em; 7 border: none; 8 border-collapse: collapse; 9 border-spacing: 0; 10 color: black; 11 font-size: 12px; 12 table-layout: fixed; 13 text-align: right; 14 padding: 0.4em; 15} 16thead { 17 border-bottom: 1px solid black; 18 vertical-align: bottom; 19} 20tbody tr:nth-child(odd) { 21 background: #f5f5f5; 22} 23tr, th, td { 24 text-align: right; 25 vertical-align: middle; 26 padding: 0.5em 0.5em; 27 line-height: normal; 28 white-space: normal; 29 max-width: none; 30 border: none; 31} 32th { 33 font-weight: bold; 34}

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

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

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

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

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

guest

回答1

0

ベストアンサー

この部分を

<link rel="stylesheet" href="static/css/home1.css" >

このように変更したら行けませんか?

<link href="{{ url_for('static', filename='css/home1.css') }}" rel="stylesheet"/>

投稿2021/10/11 06:30

FiroProchainezo

総合スコア2424

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

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

haruchan__

2021/10/11 21:43

回答ありがとうございます。 適用されませんでした。
FiroProchainezo

2021/10/11 23:47

だとすると情報不足かなと思います。 そもそもですが、提示されているコードのファイル名はなんでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問