Q&A
ローカルサーバーなんですよね？
したらば、ドキュメントルートはどこになりますか？？
前提・実現したいこと
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
すみません。「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を置いた場合に当たらない理由はわかりませんでしたが。。
コメントいただきありがとうございました。
http/httpsで通信する際、ブラウザはいろいろなファイルをダウンロードします。その際、ダウンロードしたファイルがどういう種類のファイルなのかを判定するために、HTTPヘッダのContent-Typeを使用します。
ココから推測なのですが、恐らくtemplatesに入れたときにはContent-Typeがtext/htmlになっていたのではないかと思います。本来cssはtext/cssになります。そのため種類が違うということで無視されたのではないかと思います。ブラウザの開発者ツールで確認できるので、せっかくなので手間でなければ結果を教えて下さい。
firefoxの開発者ツールのネットワークタブを確認したところタイプ列がstaticに入れたときはcss、templatesに入れたときはhtmlと表示されていました。dameoさんのご指摘通りのようにみえます。
stylesheet.css自体の内容は変えていないのですが、配置場所によってContent-Typeのデフォルト値が変わるということですね。
コメントいただきありがとうございます。
すみません。わざわざ確認してもらってしまって。。。
ただ忙しいのかと思って丁度今しがた確認したのですが、templatesに入れたときは404 Not Foundでした。考えたらレンダリングに使用するテンプレートなので、そもそもそういう関数を呼ばない限り参照されないディレクトリでした。
私の推測が間違ってたってことで。。。失礼いたしました。
いえ。こちらこそわざわざ試してまでいただいてありがとうございました。
そういうことだったのですね。レンダリングに使用するファイル以外はtemplatesに入れないように気を付けます。
ありがとうございました。
# 一応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__
こんな風にファイルを送る方法があるんですね。私の方でも動きました。
今回は色々勉強になりました。親切にありがとうございました。
あなたの回答
tips
プレビュー
