ローカルに立ち上げたwebサーバのwebページにcssがあたらない

前提・実現したいこと

flaskを用いて、webアプリケーションを作っています。その中でhtmlとcssでwebページを
作成しようと思っていますが、htmlにcssがうまくあたってくれません。

発生している問題・エラーメッセージ

問題：index.htmlにcssがあたらない。

下記ディレクト構成になっています。application.pyを実行することでwebサーバを立ち上げ、index.htmlの内容を描画します。app.pyはアプリロジックを記載しています。stylesheet.cssに記載したcssがindex.htmlに当たらず困っています。

application.py
app/
├ templates/
│ ├ index.html
│ └ stylesheet.css
└ app.py

該当のソースコード

index.htmlに記載されたcssを参照する部分のコードは下記です。

index.html
1・・・省略
2
3<head>
4
5・・・省略
6
7
8<link rel="stylesheet" href="./stylesheet.css">
9
10
11・・・省略
12
13</head>
14
15・・・省略

試したこと

■ファイルを直接開いたときにはCSSがあたることを確認
下記ファイル構成のPC上のindex.htmlファイルを直接開くと（ローカルにwebサーバを立ち上げない場合は）、CSSの内容が反映されていました。そのため、webサーバを立ち上げたときのパスの指定に誤りがあるのではと思っています。

C:\Users***\workspace\teratail01\app\templates/
├ index.html
└ stylesheet.css

■index.htmlに記載する相対パスを色々変更
下記の記事をみるとブラウザでアクセスしたフォルダが起点（カレントディレクトリ）となると記載があったので、私の場合はapplication.pyが起点となるのではと思い色々相対パスを変更してみましたがどれもうまくいきませんでした。

https://nmp300.hatenablog.com/entry/2019/10/07/191232

index.html
1<link rel="stylesheet" href="app/templates/stylesheet.css">

index.html
1<link rel="stylesheet" href="templates/stylesheet.css">

補足情報（FW/ツールのバージョンなど）

python 3.8

miyabi_pudding

2020/08/13 00:19

ローカルサーバーなんですよね？したらば、ドキュメントルートはどこになりますか？？

ga1610

2020/08/13 05:56

すみません。「flask ドキュメントルート」などで調べましたがどれがドキュメントルートにあたるのか、またその設定はどこでなされているのか見つけられませんでした。 app.pyには@app.route('/index')にはindex.htmlをレンダリングするように記載しています。環境はwindows 10でvscodeを使用しています。 application.pyを実行し、その中でapp.pyをrunし、サーバを立てています。実行すると、「* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)」と表示されるのでこれをクリックし、ブラウザを表示しています。ドキュメントルートを調べる中で、下記サイトを見つけ、このサイトのようにstaticフォルダの下にcssファイルを置くとうまくcssが適用されました。 https://qiita.com/mink0212/items/a4eb875f19b0e47718d3 ■成功時のフォルダ構成 application.py app\ |--static\ | --stylesheet.css |--templates\ | --index.html |--app.py ■成功時のindex.htmlの相対パス <link rel="stylesheet" href="../static/stylesheet.css"> cssが当たらない事象自体は解消しました。 templatesフォルダにstylesheet.cssを置いた場合に当たらない理由はわかりませんでしたが。。コメントいただきありがとうございました。

dameo

2020/08/13 06:30

http/httpsで通信する際、ブラウザはいろいろなファイルをダウンロードします。その際、ダウンロードしたファイルがどういう種類のファイルなのかを判定するために、HTTPヘッダのContent-Typeを使用します。ココから推測なのですが、恐らくtemplatesに入れたときにはContent-Typeがtext/htmlになっていたのではないかと思います。本来cssはtext/cssになります。そのため種類が違うということで無視されたのではないかと思います。ブラウザの開発者ツールで確認できるので、せっかくなので手間でなければ結果を教えて下さい。

ga1610

2020/08/13 07:55

firefoxの開発者ツールのネットワークタブを確認したところタイプ列がstaticに入れたときはcss、templatesに入れたときはhtmlと表示されていました。dameoさんのご指摘通りのようにみえます。 stylesheet.css自体の内容は変えていないのですが、配置場所によってContent-Typeのデフォルト値が変わるということですね。コメントいただきありがとうございます。

dameo

2020/08/13 07:59

すみません。わざわざ確認してもらってしまって。。。ただ忙しいのかと思って丁度今しがた確認したのですが、templatesに入れたときは404 Not Foundでした。考えたらレンダリングに使用するテンプレートなので、そもそもそういう関数を呼ばない限り参照されないディレクトリでした。

dameo

2020/08/13 08:00

私の推測が間違ってたってことで。。。失礼いたしました。

ga1610

2020/08/13 08:05

いえ。こちらこそわざわざ試してまでいただいてありがとうございました。そういうことだったのですね。レンダリングに使用するファイル以外はtemplatesに入れないように気を付けます。ありがとうございました。

dameo

2020/08/13 08:14

# 一応Unix系ならいろいろな意味で動く確認用コードを貼っときます。 mkdir -p templates static sed 's/^\xc2\xa0/ /;s/＄/$/g;s/｀/`/g;s/　/\x20\x20/g' <<__END_OF_TERMINAL_CODE__ >app.py from flask import Flask, render_template app = Flask(__name__) @app.route('/') def index(): 　return render_template('index.html') if __name__ == '__main__': 　app.run(debug=True) __END_OF_TERMINAL_CODE__ sed 's/^\xc2\xa0/ /;s/＄/$/g;s/｀/`/g;s/　/\x20\x20/g' <<__END_OF_TERMINAL_CODE__ >templates/index.html <html lang="ja"> 　　<head> 　　　　<link rel="stylesheet" href="/static/style.css"></link> 　　</head> 　　<bodY> 　　　　<div>Hello, World!</div> 　　</body> </html> __END_OF_TERMINAL_CODE__ sed 's/^\xc2\xa0/ /;s/＄/$/g;s/｀/`/g;s/　/\x20\x20/g' <<__END_OF_TERMINAL_CODE__ >static/style.css div { 　　font-size: 100px } __END_OF_TERMINAL_CODE__

ga1610

2020/08/13 15:24

こんな風にファイルを送る方法があるんですね。私の方でも動きました。今回は色々勉強になりました。親切にありがとうございました。