CSSが適用されない

CSSが適用されません

初心者です．
python + flaskでWebアプリケーションを作っています．
その中で自分が使いたいcssファイルを組み合わせようと思っているのですが，CSSが適用されません．
なぜでしょうか？
今の環境の階層は以下の通りです．
static
-mystyle.css
templates
-login.html

###エラーメッセージ
エラーメッセージは出ていませんが，Chromeのデベロッパーツールにて警告として以下のメッセージが出ています．

Failed to load response data
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://127.0.0.1:8080/login".

###ソースコード
login.html

html
1  <head>
2    (一部省略)
3    <!-- Bootstrap CDN -->
4    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
5    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
6    <link rel = "stylesheet" href = "../static/mystyle.css">
7  </head>
8  <body>
9   <a href = "#" class = "square_btn">BUTTON</a>
10  (一部省略)
11    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
12    <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
13  </body>

mystyle.css

css
1.square_btn {
2  display: inline-block;
3  padding: 0.3em 1em;
4  text-decoration: none;
5  color: #67c5ff;
6  border: solid 2px #67c5ff;
7  border-radius: 3px;
8  transition: .4s;
9}

###試したこと
ChromeやPCの再起動は試しましたが．ダメでした．

###補足情報(言語/FW/ツール等のバージョンなど)
python3を使っています．

行動規範の内容に同意します

回答2件

ベストアンサー

python + flask というのは全く分かりませんので、それとは直接関係ない一般的な話ですが・・・

外部 CSS ファイルを使わないで、head 内にインラインで .square_btn を書いたら期待通りスタイルは適用されるのでしょうか？

であれば、考えられるのは、

(1) パスが間違っている。すなわち、以下の href で指定される場所に CSS ファイル mystyle.css が存在しない。（yuki-saito さんが指摘されていることと同じ）

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

(2) ブラウザにキャッシュされた CSS ファイルが使われている。以前のアクセスでブラウザに mystyle.css がキャッシュされると、その後でサーバー側でファイルを書き換えて .square_btn を追加したり、修正したりしても、ブラウザにはその追加、修正は反映されません。

・・・ぐらいです。

上記 (1) については href="/static/mystyle.css" でもダメだったとのことですが、Web サイトが http://127.0.0.1:8080 の場合、そのパスは http://127.0.0.1:8080/static/mystyle.css のように解決されます。そのパスはホントに間違いないですか？

試しにブラウザのアドレスバーに http://127.0.0.1:8080/static/mystyle.css と入力して CSS ファイルを要求してみてはいかがですか。パスが正しければ CSS ファイルの内容が表示できるはずです。

投稿2017/10/30 04:01

退会済みユーザー

総合スコア0

ke622ken

2017/10/30 04:20

詳細なご回答ありがとうございます． head内に記載した場合は，スタイルは適用されました．ですのでSurferOnWwwさんのおっしゃる通り，パスが誤っているようです． http://127.0.0.1:8080/static/mystyle.cssにアクセスしたのですが，CSSの内容が表示されずに http://127.0.0.1:8080/loginに飛ぶだけでした．現在置いている階層は既に説明している通りですが，パス指定のどの部分が誤っているのでしょうか...?

退会済みユーザー

2017/10/30 04:44

python + flask というのは全く分かりませんのでハズレかもしれませんが、http://127.0.0.1:8080/static/mystyle.css にアクセスすると http://127.0.0.1:8080/login にリダイレクトされるというのは、static/mystyle.css にアクセス制限がかかっていてログイン済みのユーザー以外はアクセスできないということのように見えます。 Fiddler などのツールを使って、そのあたりをチェックしてみてはいかがですか？

ke622ken

2017/10/30 05:01

解決しました！リダイレクトしていることが問題だったようです．本当にありがとうございました．

行動規範の内容に同意します

原因はパスが違うからだと思います。

index.htmlから見て../static/mystyle.cssとしているのだと思いますが
ChromeのデベロッパーツールのNetworkタブを見ても分かるように
CSSはindex.htmlが読まれてから指定されているパスにGETの通信が走ります。

python側に合わせてパスを修正すればGETできるようになるかと思います。

投稿2017/10/30 03:01

yuki-saito

総合スコア928

ke622ken

2017/10/30 03:10

ご回答ありがとうございます．「python側に合わせてパスを修正すれば」というのは具体的にどういうことでしょうか? main.pyと同じ階層にstaticとtemplatesディレクトリがそれぞれあるのですが・・・

yuki-saito

2017/10/30 03:24 編集

/static/mystyle.css で読み込めるのではないでしょうか。

ke622ken

2017/10/30 03:25

試してみたのですが，結果は変わりませんでした．

yuki-saito

2017/10/30 03:43

エラー内容を良く見てみたら「Resource interpreted as Stylesheet but transferred with MIME type text/html」と言っていますね。あまり詳しくなくて恐縮なのですが、type="text/css" 付けたらできるとか・・・？ <link rel = "stylesheet" type = "text/css" href = "../static/mystyle.css">

ke622ken

2017/10/30 03:48

結果は変わりませんでした． type指定は任意なので結果には影響しないと思います．

yuki-saito

2017/10/30 03:55 編集

まぁそうですよね。そうだとは思っているのですが、MIMEタイプのエラーが出ているのでその辺りを確認しながら試していくしかないかと思いまして・・・こちらからだと必要な情報が見れないので、サーバの構成やプログラム、ChromeのデベロッパーツールのNetworkタブの結果やコンソール・エラーの内容も含めて載せてもらった方が良いかと思います。

ke622ken

2017/10/30 05:01

解決しました．本当にありがとうございました．

yuki-saito

2017/10/30 05:03

それはよかったです。

行動規範の内容に同意します

あなたの回答