Q&A
エラーメッセージで /style.css/' 最後が/になってますがこれは？
このコードではそうはならないように思いますが。
前提・実現したいこと
ホームページを作成しておりまして、
エディター"Visual Studio Code"上で編集し、
"Live Server" というプラグインを使って、
ウェブブラウザ上で表示しています。
CSSファイルの読み込みができなくて、苦戦してます。。。
発生している問題・エラーメッセージ
エラーメッセージ
Refused to apply style from 'http://127.0.0.1:5500/style.css/' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
該当のソースコード
HTML
1<head> 2 <meta charset ="utf-8"> 3 <title>0.0.2</title> 4 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> 5 6 <link rel="stylesheet" href="style.css" type="text/css"> 7 8 <meta name="viewport" 9 content="width=device-width,initial-scale=1"> 10 <link rel="stylesheet" href="dist-copy/css/swiper.css" type="text/css" > 11 <script src="dist-copy/js/swiper.js"></script> 12</head>
試したこと
https://teratail.com/questions/120742
似たような問題が質問で出ていたので、
ここで出た「text/cssにMIMEタイプを書き換える」という方法は試しましたが、
エラーメッセージが出たままになってしまいます。
https://stackoverflow.com/questions/48248832/stylesheet-not-loaded-because-of-mime-type
こちらの質問と回答も参考に、色々と試しましたが、問題が解決されません。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
ありがとうございます！
同じコードで、再びConsoleを確認しましたが、
/style.css/となってしまっています。。。
DOCTYPE宣言はどうなっていますか？HTML5だと「type="text/css"」は不要です。
-追記-
「viewport設定」位置は、「title」より上が望ましいです。
ファイル構成（各ファイルがどのような位置関係にあるのか）が分かるもの（テキスト形式やイメージ図（手書き等でも良いです）等）を、提示してください。
ありがとうございます。
DOCTYPE宣言は
<!DOCTYPE html>
となってます。
ファイル構成は、
index.html
style.css
img
dist-copy
- css
--swiper.css
--swiper.min.css
- js
--swiper.esm.bundle.js
--swiper.esm.js
--swiper.js
--swiper.min.js
--swiper.min.js.map
としています。
回答1件
0
ベストアンサー
直感ですが、ソースのHTMLと同じディレクトリにstyle.cssを置いていないのではありませんか？
それで404NotFoundなHTMLを読み込んでしまっているという事はないでしょうか？
通常ならスタイルシートが読み込まれずに適用されないだけだとは思いますがLive Serverは知らないのでひょっとしたらそっちがファイルを見つけられない場合にhtmlを送ってくるのでは？と思いました
投稿2019/03/30 01:14
総合スコア1367
ありがとうございます！
確認してみましたが、
同じディレクトリにはstyle.cssをおいてあるようです。
ファイル構造を
ーーーーーーーーーーーーーーーー
index.html
style.css
img
dist-copy
- css
--swiper.css
--swiper.min.css
- js
--swiper.esm.bundle.js
--swiper.esm.js
--swiper.js
--swiper.min.js
--swiper.min.js.map
ーーーーーーーーーーーーーーーー
としていますが、
今思えば、
swiper（https://idangero.us/swiper/）のcssファイルを入れ始めてから、
このような問題が出始めたような気がするので、
ファイル構造の整理の仕方に何かしらの問題があるのでしょうか。。。
swiperも知らないので何ともわかりませんが、style.cssのURLを直接開くとブラウザには何が表示されますか？
画面表示結果とソースの表示でどのように表示されるかってところが確認できれば調べる方向も絞れるかもしれませんが・・・
ただそれ以上はおそらく僕にはわからないかと思いますので、質問の文章を編集して追記すると良いかと思います
あなたの回答
tips
プレビュー
