【AWS,CSS】CSSが読み込まれない

Question

解決したい課題

CSSを反映させたい。

環境

インフラ：AWS
webサーバ：Apache

設定内容

◇html

<link rel="stylesheet" href="..\css\styles.css">
<link rel="icon" href="../img/favicon.ico">

現状

ローカル環境ではCSSは反映されます。
AWS上とローカルでのファイルの階層は同じです。

◇ローカル

◇AWS

デベロッパーツールのconsoleで確認すると、以下のエラーがでます。

GET http://52.192.85.121/css/styles.css net::ERR_ABORTED 404 (Not Found)

所有者とパーミッションについては以下の通りです。

drwxrwxrwx 2 root ec2-user 24 Jun 7 08:07 css
drwxrwxrwx 2 root root 114 Jun 7 08:26 html
drwxrwxrwx 2 root ec2-user 25 Jun 7 08:27 img

やりたいことが全く進まず、何もかもがうまくいきません。
想定外事象が何度も続いてます。1歩進んではバグやerrorが発生し、諦めたくなりました。
初歩的なことかもしれませんが、誰かの助けがないと心が折れてしまいそうです。
どなたか、助けていただけませんでしょうか。

Answer 1

とりあえずバックスラッシュじゃなくスラッシュでは？

<!--
<link rel="stylesheet" href="..\css\styles.css">
                               ↓   ↓             -->
<link rel="stylesheet" href="../css/styles.css">

Comments

[narururu]

ご回答いただきありがとうございます！kei344さん☺

ご指摘の通り、スラッシュですね。修正しました。失礼しました。
しかし、AWS上では、相変わらずCSS反映されていません(>_<)

[kei344]

ルートがhtmlフォルダになっていませんか？その場合cssフォルダは公開領域に無いので表示されません。
htmlフォルダにimgフォルダとcssフォルダを入れてパスも変更しましょう。

[narururu]

html配下にcss,imgフォルダを移動しました。
結果、反映されました！
ありがとうございます。本当に助かりました。
ルートがどこになるのか、まったく意識していなかったです。
ルートがhtmlの場合は、それを跨ぐことはできないんですね。知らなかったです。勉強になりました。
これから、フォルダやファイルを増やすときは、html配下に置くようにします。
アドバイスありがとうございました????

[narururu]

すいません。。
最後に、、なぜかローカル環境だとCSS反映されなくなってしまいました。。。
一応、報告だけしておきます。。。すいません。

[kei344]

../ とか相対パスの部分を直していないのでは？

[narururu]

いえ、直したのですが、ダメでした。
AWS同様、html配下に移動し、コードも相対パスに変更しました。

なので、ローカル環境ではhtmlフォルダをcss、imgフォルダは別にしました。
そしたら、反映されました。

因みに、AWSではCSSは反映されたのですが、imgフォルダのfabiconは反映されてなかったです。

[kei344]

直し方が悪かったか、キャッシュを読んでいるか、そのあたりでは。（この質問自体は解決されたようなので返信はこれくらいにしておきます）

【Webブラウザのキャッシュ削除と、スーパーリロード方法一覧 | uzurea.net】
http://uzurea.net/cacheclear-and-superreload-2018/

[narururu]

はい。私もとりあえず、本題は解決したので十分です、
URLありがとうございます。
想像以上に想定外事象が多発してフロントエンドエンジニアの方は凄い人達なんだなあと改めて思いました。