質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

6940閲覧

CSSファイルの読み込みがブラウザ上で出来ない。

YumaIsh

総合スコア13

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/03/30 00:17

前提・実現したいこと

ホームページを作成しておりまして、
エディター"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/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/03/30 00:19

エラーメッセージで /style.css/' 最後が/になってますがこれは? このコードではそうはならないように思いますが。
YumaIsh

2019/03/30 00:29 編集

ありがとうございます! 同じコードで、再びConsoleを確認しましたが、 /style.css/となってしまっています。。。
yoshinavi

2019/03/30 01:56 編集

DOCTYPE宣言はどうなっていますか?HTML5だと「type="text/css"」は不要です。 -追記- 「viewport設定」位置は、「title」より上が望ましいです。
yoshinavi

2019/03/30 02:08

ファイル構成(各ファイルがどのような位置関係にあるのか)が分かるもの(テキスト形式やイメージ図(手書き等でも良いです)等)を、提示してください。
YumaIsh

2019/03/30 02:18 編集

ありがとうございます。 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 としています。
guest

回答1

0

ベストアンサー

直感ですが、ソースのHTMLと同じディレクトリにstyle.cssを置いていないのではありませんか?
それで404NotFoundなHTMLを読み込んでしまっているという事はないでしょうか?
通常ならスタイルシートが読み込まれずに適用されないだけだとは思いますがLive Serverは知らないのでひょっとしたらそっちがファイルを見つけられない場合にhtmlを送ってくるのでは?と思いました

投稿2019/03/30 01:14

len_souko

総合スコア1337

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

YumaIsh

2019/03/30 02:24 編集

ありがとうございます! 確認してみましたが、 同じディレクトリには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ファイルを入れ始めてから、 このような問題が出始めたような気がするので、 ファイル構造の整理の仕方に何かしらの問題があるのでしょうか。。。
len_souko

2019/03/30 02:51

swiperも知らないので何ともわかりませんが、style.cssのURLを直接開くとブラウザには何が表示されますか? 画面表示結果とソースの表示でどのように表示されるかってところが確認できれば調べる方向も絞れるかもしれませんが・・・ ただそれ以上はおそらく僕にはわからないかと思いますので、質問の文章を編集して追記すると良いかと思います
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問