いただいたドキュメント通りにすると、CSS反映されました。
ドキュメント確認大切ですね。。
ご教授いただきありがとうございました。
前提
Flaskでウェブサイトを作成中です。
CSSをテンプレートに反映させようとしており、トップページと静的テンプレートには問題なく反映しているのですが、動的ルーティングを使って表示させたページに反映させる事ができませんでした。
CSSはbase.htmlに記載し、各テンプレートにextendsして反映しています。
実現したいこと
動的ルーティングのテンプレートにCSSを反映させたいです。
どこに問題があるか、ご存じの方がいらっしゃればご教授ください。
該当のソースコード
Python
1base.html 2 3<!DOCTYPE html> 4<html lang=ja > 5 <head> 6 <meta charset="utf-8"> 7 <link rel="stylesheet" type= "text/css" href="https://cdn.iconmonstr.com/1.3.0/css/iconmonstr-iconic-font.min.css" /> 8 <!-- Mumble UI --> 9 <link rel="stylesheet" type= "text/css" href="static/uikit/styles/uikit.css" /> 10 <!-- Dev Search UI --> 11 <link rel="stylesheet" type= "text/css" href="static/styles/app.css" /> 12 <title>Home</title> 13 <nav> 14 <a href="/register">登録</a> 15 </nav> 16 <!-- Icon - IconMonster --> 17 </head> 18 <body> 19 <header class="header"> 20 <nav class="header__nav"> 21 <input type="checkbox" id="responsive-menu" /> 22 <label for="responsive-menu" class="toggle-menu"> 23 <span>Menu</span> 24 <div class="toggle-menu__lines"></div> 25 </label> 26 <ul class="header__menu"> 27 <li class="header__menuItem"><a href="/">Home</a></li> 28 <li class="header__menuItem"><a href="/register">登録</a></li> 29 <li class="header__menuItem"><a href="login.html" class="btn btn--sub">Login/Sign Up</a></li> 30 </ul> 31 </nav> 32 </header> 33 {% block index %} 34 {% endblock %} 35 </body> 36</html>
Python
1トップページ（CSSが反映されるページ） 2 3{% extends 'base.html' %} 4{% block index %} 5<section class="devlist"> 6 <div class="container"> 7 <div class="grid grid--one"> 8 {% for item in data %} 9 <div class="column card"> 10 <div class="dev"> 11 <a href="{{url_for('profile_detail',user_id=item[0])}}" class="card__body"> 12 <div class="dev__profile"> 13 <img class="avatar avatar--md" src="https://avatars.githubusercontent.com/u/22437186" alt="image" /> 14 <div class="dev__meta"> 15 <h3>{{item[1]}}</h3> 16 <h5>ユーザーID：{{item[0]}}</h5> 17 </div> 18 <div class="profile_group"> 19 <ul class="detail_number"> 20 <li><span class='profile_number'>{{item[4]}}</span><br>投稿数</li> 21 <li><span class='profile_number'>{{item[2]}}</span><br>フォロー数</li> 22 <li><span class='profile_number'>{{item[3]}}</span><br>フォロワー数</li> 23 <li><span class='profile_number'>{{item[6]}}%</span><br>エンゲージメント率</li> 24 </ul> 25 </div> 26 </div> 27 <p class="dev__info"> 28 {{item[5]}} 29 </p> 30 <div class="dev__skills"> 31 <span class="tag tag--pill tag--main"> 32 <small>JavaScript</small> 33 </span> 34 <span class="tag tag--pill tag--main"> 35 <small>React</small> 36 </span> 37 <span class="tag tag--pill tag--main"> 38 <small>SCSS</small> 39 </span> 40 <span class="tag tag--pill tag--main"> 41 <small>Nodejs</small> 42 </span> 43 <span class="tag tag--pill tag--main"> 44 <small>Express</small> 45 </span> 46 <span class="tag tag--pill tag--main"> 47 <small>GraphQL</small> 48 </span> 49 </div> 50 </a> 51 </div> 52 </div> 53 {% endfor %} 54 </div> 55 </div> 56 </section> 57{% endblock %} 58
Python
1detail.html（CSSが反映されないページ） 2 3{% extends 'base.html' %} 4{% block index %} 5 <section class="devlist"> 6 <div class="container"> 7 <div class="grid grid--one"> 8 {% for item in data %} 9 <div class="column card"> 10 <div class="dev"> 11 <div class="card__body"> 12 <div class="dev__profile"> 13 <img class="avatar avatar--md" src="https://avatars.githubusercontent.com/u/22437186" alt="image" /> 14 <div class="dev__meta"> 15 <h3>{{item[1]}}</h3> 16 <h5>ユーザーID：{{item[0]}}</h5> 17 </div> 18 <div class="profile_group"> 19 <ul class="detail_number"> 20 <li><span class='profile_number'>{{item[4]}}</span><br>投稿数</li> 21 <li><span class='profile_number'>{{item[2]}}</span><br>フォロー数</li> 22 <li><span class='profile_number'>{{item[3]}}</span><br>フォロワー数</li> 23 <li><span class='profile_number'>{{item[6]}}%</span><br>エンゲージメント率</li> 24 </ul> 25 </div> 26 </div> 27 <p class="dev__info"> 28 {{item[5]}} 29 </p> 30 <div class="dev__skills"> 31 <span class="tag tag--pill tag--main"> 32 <small>JavaScript</small> 33 </span> 34 <span class="tag tag--pill tag--main"> 35 <small>React</small> 36 </span> 37 <span class="tag tag--pill tag--main"> 38 <small>SCSS</small> 39 </span> 40 <span class="tag tag--pill tag--main"> 41 <small>Nodejs</small> 42 </span> 43 <span class="tag tag--pill tag--main"> 44 <small>Express</small> 45 </span> 46 <span class="tag tag--pill tag--main"> 47 <small>GraphQL</small> 48 </span> 49 </div> 50 </div> 51 </div> 52 </div> 53 {% endfor %} 54 </div> 55 </div> 56 </section> 57{% endblock %} 58
Python
1app.py(バックエンド) 2 3@app.route('/detail/<user_id>') 4def profile_detail(user_id): 5 #DBを開く 6 con = get_db() 7 #テーブルusersを選択 8 cur = con.execute("SELECT * FROM users WHERE id=?",[user_id]) 9 #ターブルを読み込み 10 data = cur.fetchall() 11 con.close() 12 return render_template('detail.html',data=data,user_id=user_id) 13
回答2件
0
detail.htmlファイルの{% extends 'bese.html' %}を{% extends 'detail/base.html' %}とパスを明示的に示してみるとうまくいくかもしれません。
こちらも動作未検証です。
投稿2022/12/19 02:55
総合スコア26
0
ベストアンサー
動作未検証ですがStatic Filesにしたがってurl_forを使ってリンクを記述してみてください。
投稿2022/12/19 00:48
総合スコア36974
回答へのコメント
関連した質問
Q&A
PHPで制作したサイトがスマホで表示されません
Q&A
CSSでflex boxの中の画像をレスポンシブに
Q&A
Javascript（jQuery）のAjaxを使った課題についてサポートお願い致します。
Q&A
メニューを閉じた時に起こるアニメーションをリンクをクリックしても起こしたい！
Q&A
【ハンバーガーメニュー】 領域外をクリックしてもメニューが閉じるようにしたい
Q&A
ハンバーガーメニューのページ内リンクをクリックしたらメニューを閉じて対象の箇所まで自動スクロールさせたい！
Q&A
flexを設定しているのに,justify-content: center;が効かない原因がわからないです。
Q&A
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2022/12/20 13:05