ブラウザ上にCSSが反映されない

前提・実現したいこと

どうしても、どうしても、どうしてもうまくいかないので教えてください。
本を見ながら初めてウェブサイトを作成しており、少しシンプルな構成に変えて検証しています。
Atomでhtml, cssを作成し、FC2の無料ウェブサイト作成しました。

AtomでのHTML,CSS検証ツールではエラーは出ません。ウェブサーバにアップロードするデータ（単純にフォルダからHTMLをFirefoxで開いた際）はCSSもきれいに反映されています。

アップロード後、ブラウザ上で確認すると添付画像のようなエラーが出ます。
404エラーということでいろいろ調べているのですが、ページが単純に表示されないわけではなくCSSのみが反映されていない状態をどう解決すればいいのか見つけることができませんでした。

ほんとうに素人質問で恐縮ですが、アドバイスをお願いいたします。

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

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://hacchi84.web.fc2.com/css/style.css".
index.html:6 GET https://error.fc2.com/web/404.html net::ERR_ABORTED 404 (Not Found)

HTML
1<!doctype html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>HACCHI's ROOM</title>
6<link rel="stylesheet" href="css/style.css">
7</head>
8
9<body>
10<div class="wrapper">
11<header class="header">
12  <h1 class="logo"><a href="index.html"><img src="images/hacchi-logo.png" alt="Hachi2"></a></h1>
13  <nav class="nav">
14    <p>
15      <a href="prof.html">プロフィール</a>
16    </p>
17  </nav>
18</header>
19
20<div class="keyvisual">
21  <img src="images/keyvisual.jpg" alt="hachi1">
22  <h1>HACCHI's ROOM</h1>
23</div>
24
25<main>
26  <h2>News</h2>
27  <p class="news1">ハッチは太り気味なので、１月２７日よりおやつを控えさせていただきます。</P>
28
29  <p class="news2">２月１５日は、<a href="https://www.rakuten-ssi.co.jp/" target="_blank">ペット保険</a>の更新について、協議会を開催いたします。</p>
30
31</main>
32
33<footer class="footer">
34<p>HACCHI's ROOM</p>
35</footer>
36
37</div>
38</body>
39</html>
40

HTML
1<!doctype html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>HACCHI's ROOM</title>
6<link rel="stylesheet" href="css/style.css">
7</head>
8
9<body>
10<div class="wrapper">
11<header class="header">
12  <h1 class="logo"><a href="index.html"><img src="images/hacchi-logo.png" alt="Hachi2"></a></h1>
13  <nav class="nav">
14    <p>
15      <a href="prof.html">プロフィール</a>
16    </p>
17  </nav>
18</header>
19
20
21<main>
22　 <h2>プロフィール</h2>
23　  <p class="prof-pic"><img src="images/onthesnow.jpg" alt="" class="hacchi-photo"></P>
24   <nav class="nav1">
25　
26  　  <p>誕生日　：　２０１６年８月４日生まれ（４才）</p>
27  　  <p>出身地　：　熊本県</p>
28  　  <p>性　別　：　男の子</p>
29  　  <p>性　格　：　マイペース</p>
30  　  <p>好きなこと　：　ふわふわな場所で寝ること</p>
31  　  <p>嫌いなこと　：　今にも寝そうなときに起こされること</p>
32　
33</nav>
34
35
36 　<h2 class="clear">大きさ</h2>
37 　<table class="info">
38   <tr>
39     <th>体高（ｃｍ）</th>
40     <td>３０ｃｍ</td>
41   </tr>
42   <tr>
43     <th>体長（ｃｍ）</th>
44     <td>４５ｃｍ</td>
45   </tr>
46   <tr>
47     <th>体重（ｋｇ）</th>
48     <td>約７ｋｇ</td>
49   </tr>
50   <tr>
51     <th>最新情報</th>
52     <td>あと５００ｇほどダイエットしたいですねぇ。最新の体重については、<a href="index.html#News">＜NEWS＞</a>にて随時アップデートしてまいります。気になる方はぜひチェックしてみてくださいね♪</td>
53   </tr>
54   </table>
55</main>
56
57
58<footer class="footer">
59<p>HACCHI's ROOM</p>
60</footer>
61
62</div>
63</body>
64</html>
65

CSS
1charset "UTF-8";
2
3/*　すべてのページに適用　*/
4html {
5  font-family:sans-serif;
6}
7
8 body {
9   background-color: #eeece9;
10 }
11
12 .wrapper {
13   margin: 0 auto 0 auto;
14   max-width: 960px;
15 }
16
17 h2 {
18   color: #3f5170;
19   font-size: 30px;
20   border-bottom: 3px dotted #3f5170;
21   margin: 50px 0px 15px 0;
22   padding: 5px;
23 }
24
25p {
26  line-height: 1.5;
27}
28a:link {
29  color: #d25833;
30}
31a:visited {
32  color: #d25833;
33}
34a:hover {
35  color: #e3937a;
36}
37a:active {
38  color: #ff6a3b;
39}
40
41/* すべてのページに適用　ヘッダー　*/
42img {
43  max-width: 100%;
44  height: auto;
45}
46
47.logo {
48  margin: 30px 0 40px 0;
49  line-height: 0;
50  text-align: center;
51}
52
53.nav {
54  text-align: center;
55}
56
57.nav li {
58  display: inline-block;
59  list-style-type: none;
60  padding-right: 30px;
61  background-image: url(../images/line1.png);
62  background-repeat: repeat-x;
63  margin: 0;
64  padding: 20px 10px 15px 20px;
65}
66
67.nav1 p {
68 line-height: 3px;
69 padding-right: 30px;
70}
71
72/* すべてのフッターへ適用　*/
73.footer {
74  background-image: url(../images/footer-bg.png);
75  background-repeat: no-repeat;
76  padding: 80px 15px 20px 15px;
77  margin-top: 50px;
78  font-size: 12px;
79  color: black;
80}
81
82
83/*　個別のスタイル　*/
84/*　index.html  */
85
86.keyvisual img {
87  width: 960px;
88  height: auto;
89  position: relative;
90
91}
92
93
94.keyvisual h1 {
95  margin:15px 0 0 0;
96  opacity: 0.8;
97  color: #f48000;
98  font-style: oblique;
99  font-size: 100px;
100  position: absolute;
101  top: 800px;
102  left: 500px;
103  width:100%;
104
105}
106
107.news-item {
108  margin: 0;
109}
110
111/*  prof.html  */
112.hacchi-photo {
113  float: left;
114  padding: 0 1em 1em 0;
115}
116
117.clear {
118  clear: both;
119}
120
121.prof-pic img{
122  width: 300px;
123  height: auto;
124}
125
126/* すべてのフッターへ適用　*/
127.footer {
128  background-image: url(../images/footer-bg.png);
129  background-repeat: no-repeat;
130  padding: 80px 15px 20px 15px;
131  margin-top: 50px;
132  font-size: 12px;
133  color: black;
134}
135
136/* テーブル　*/
137.info {
138  border-collapse: collapse;
139}
140
141.info th, .info td {
142  padding: 8px;
143  border: 1px solid #bec2c7;
144  text-align: left;
145}
146
147.info th {
148  background-color: #dde2ea;
149  width: 150px;
150  color: #3f5170;
151  vertical-align: top;
152}
153
154

試したこと

CSSのチェック
HTMLのチェック
キャッシュの削除
ファイル構成の簡素化

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

サーバ設定

File Zillaデータのアップデート画面

m.ts10806

2021/02/05 22:34

>Atom(言語) タグ間違ってませんか。 https://teratail.com/tags/Atom+%28%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%29

m.ts10806

2021/02/05 22:35 編集

あとコードとファイル構成を提示されない限り応えられることは特にないです。

m.ts10806

2021/02/05 22:48

CSSだけ提示されても「HTMLは出てきます」というのは誰も再現できません。ファイル構成も必要です。文法のこと気にされるなら文法チェックサービスやプラグインを通すか、背景色や文字色など簡単で視認可能な指定で確認すれば良いです。質問前にできます。

Sayu-

2021/02/05 22:50

ご指摘ありがとうございます。ソースコードを追記しました。素人質問で申し訳ないのですが、ファイル構成とはなにをご提示すればよいのでしょうか？htmlの頭の部分は下記の通りです。これで必要な情報がそろいましたでしょうか？ <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HACCHI's ROOM</title> <link rel="stylesheet" href="css/style.css" type="text/css"> </head> <body> <div class="wrapper"> <header class="header"> <h1 class="logo"><a href="index.html"><img src="images/hacchi-logo.png" alt="Hachi2"></a></h1> <nav class="nav"> <ul> <li><a href="prof.html">プロフィール</a></li> <li><a href="about-shiba.html">柴犬とは</a></li> <li><a href="home.html">ハッチの住処</a></li> <li><a href="concern.html">ハッチの悩み</a></li> <li><a href="album.html">アルバム</a></li> <li><a href="owner.html">お世話人</a></li> </ul> </nav> </header>

m.ts10806

2021/02/05 22:55 編集

htmlも質問本文に追記を。 CSSとは別にコードブロック（マークダウンのcode機能）を利用してください。あとファイル構成。どのファイルがどこに置かれているか。配置。ブラウザ開発ツールのコンソールにエラーが出ていないか。

Sayu-

2021/02/05 23:22

グーグル検索を駆使しているのですが、、、コードブロック（マークダウンのcode機能）とは何をすればよいのでしょうか？ファイル構成と思われるものを追記しましたが、合っていますか？コンソールにエラーが出ていました！！404 not found...これは。。。ええと、調べます。。。

meg_

2021/02/05 23:58

状況が再現しません。おそらくcssファイルのパス指定が間違っているかと思います。

m.ts10806

2021/02/05 23:59

teratailのヘルプページ https://teratail.com/help#about-markdown 取り上げられた質問 https://teratail.com/questions/238564 あくまで ```言語名 //コード ``` の形式で投稿するだけなので、最大文字数（１万字）以内であれば幾らでも設置できます。 >ファイル構成と思われるものを追記しましたが、合っていますか？ちょっとわかりづらいですね。今回は特にHTMLとcssの位置関係が分かるものがいいです。おそらく404だろうなとは思っての追記依頼をしていました。

Sayu-

2021/02/06 01:05

code機能について理解したと思います。リンクの紹介ありがとうございました。HTMLが文字数制限によりすべて追記できませんでしたが、怪しいところを追記しました。ファイル構造については、Atomの作業画面をつけてみました。作ったからにはきちんと完成させたいのですが、ここ数日ブラウザに反映させる部分がうまくいかなくて挫折しそうです。素人質問で大変恐縮なのですが、ウェブサーバにアップロードするデータ（単純にフォルダからHTMLをFirefoxで開いた際）はCSSもきれいに反映されているし、画像もきちんと出てきてきれいなウェブサイト画面が確認できます。それでもパスが間違っているのでしょうか？

m.ts10806

2021/02/06 01:19

>HTMLが文字数制限によりすべて追記できませんでしたが最小限のコードを改めて組むのでも良いかと。

Sayu-

2021/02/06 05:02

ウェブサイトを最小限にして再度アップデートをしたのですが、404エラーがどうしても出てしまい、なおかつ解決方法を見つけ出すことができませんでした。HTMLの情報は出てくるのですが、CSSの情報が反映されていない状態だと思います。なにか助言があればお願いしたいです。

meg_

2021/02/06 07:59

webサーバーの設定はどうなっていますか？

Sayu-

2021/02/06 19:56

コメントありがとうございます。サーバ設定と思われるものを画像追加しました。これで情報は揃っていますでしょうか？サーバ設定とはどこだ・・・というレベルです。本当にお手間取らせて恐縮ですが、なにか問題点があれば教えていただきたいです。よろしくお願いします。

meg_

2021/02/07 03:15

MIMEタイプの問題かなと思います。m.ts10806さんの回答にある「type属性指定してみては」で解決しないでしょうか？

Sayu-

2021/02/08 00:37

m.ts10806様、meg_様、アドバイスありがとうございます。type属性を追加したのですが、m.ts10806様が再現したようにはなりませんでした・・・。キャッシュを削除したりもしたのですが、画面に変化なしです。こうなると、コードには問題なくて、私のデータアップロードになにか問題あるのでしょうか？File Zillaを使用してデータをアップロードしています。FFFTPも試したのですが、変化ありませんでした。アップロード画面を追加しています。なにか問題のありそうな点が他に考えられますでしょうか？

m.ts10806

2021/02/08 00:40

別のブラウザだとどうでしょう

Sayu-

2021/02/08 00:47

Chrome, firefox, Microsoft Edgeでキャッシュを削除してからURLを入力して確認していますが、CSSが反映されません。。。

m.ts10806

2021/02/08 00:49

いっそ、別のCSSファイルを新規で作るとか。コピーではだめです。新規です。

Sayu-

2021/02/08 00:51

おおお、承知しました。やってみます。Atomを継続して使って良いのでしょうか？他のものを使う必要がありますか？

m.ts10806

2021/02/08 01:18

必要があるかどうかは要件次第で。しかし、ディレクトリが大文字になってますね。

Sayu-

2021/02/08 02:47

ファイル名を小文字に変えたらうまくいきました！！！！！大文字ではだめなのですね。知りませんでした。長時間にわたり、問題解決にご協力いただきありがとうございました。いろいろ教えていただき、本当に助かりました。

m.ts10806

2021/02/08 02:48

OSにもよるでしょうけど、基本的に大文字小文字は大別されます。別の文字です。

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

回答2件

エラーメッセージに記載のあったアドレスから確認させていただきました。
フォルダ名、ファイル名の大文字小文字が区別されているようです。

（<link rel="stylesheet" href="CSS/style.css" type="text/css">にするかFile Zillaでフォルダ名を小文字cssに変更）

投稿2021/02/08 01:16

dit.

総合スコア3235

ベストアンサー

画像もCSSもJSも同じですけど、「ファイルを置いた場所（パス）を正しく記述する」です。
リンク記述が書かれているファイルから辿れる場所を正しく指定すること。

「相対パス」「絶対パス」などで確実におさえてください。

非常によく出る部類の質問なので、過去質問を参考に。

同じ配置でやった結果（CSSだけ置いたので画像はなし）

Resource interpreted as Stylesheet but transferred with MIME type text/html:

リソースはスタイルシートとして解釈されますが、MIMEタイプtext / htmlで転送されます

からすると、CSSがCSSとして認識されてないのではと思われます。

rel="stylesheet"の場合は省略できるはずのものですが、念のためtype属性指定してみては。
<link rel="stylesheet" href="css/style.css" type="text/css">

<link>: 外部リソースへのリンク要素

type
この属性は、リンク先コンテンツの種類を定義します。この属性の値は text/html や text/css などの MIME タイプにします。この属性の一般的な使用法は、参照されるスタイルシートのタイプ (text/css など) の定義ですが、 CSS はウェブ上の唯一のスタイルシート言語であるため、 type 属性を省略できるばかりでなく、それが実際に推奨される習慣になっています。また rel="preload" リンク種別で、ブラウザーが対応するファイルタイプのみダウンロードさせるためにも使用します

投稿2021/02/06 00:13

編集2021/02/06 23:42

m.ts10806

総合スコア80861