Q&A
Failed to load resource: net::ERR_FILE_NOT_FOUND style.css:1
とあるので、CSSの1行目が原因だと思うんですよね。エンコードの問題かな。。
ｈｔｍｌもcssも画像もＯｎｅＤｒｉｖｅ上ですかね？
一旦ローカル（デスクトップ）にファイルを移動させたうえで、index.htmlを開いてもCSS読み込まないでしょうか？
前提・実現したいこと
HTML&CSSでweb作成をしています。使用しているのはvisual studio codeです。
Google Chromeを使用しています。
発生している問題・エラーメッセージ
検証ツールを用いると、エラーメッセージの
Failed to load resource: net::ERR_FILE_NOT_FOUND style.css:1
が表示され、HTMLにCSSが読み込まれません。
該当のソースコード
htmlです。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>WEB Cafe</title> <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ"> <!--CSS--> <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> </head> <body> <header class="page-header"> <h1><a href="index.html"><img class="logo" src="file:///C:/Users/sprin/OneDrive/%E3%83%87%E3%82%B9%E3%82%AF%E3%83%88%E3%83%83%E3%83%97/HTML-CSS-Webdesign-3/WCBCafe/images/logo.svg" alt="WCBカフェホーム"></a></h1> <nav> <ul class="main-nav"> <li><a href="news.html">News</a></li> <li><a href="menu.html">Menu</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> </body> </html> CSSです。 style.css @charset "UTF-8"; html{ font-size: 100%; } body{ font-family:"Yu Gothic Medium","游ゴシック Medium","ヒイラギ角ゴ Pro W3",sans-serif; line-height: 1.7; color:#432; } a{ text-decoration: none; } img{ max-width:100%; } .logo { width:210px; margin-top:14px; }
試したこと
「CSS 読み込まれない」などとググり、検証ツールでエラーコードは特定できましたが、それ以降は何をどうググればエラー解決に繋がるのか自分ではわからなくなってしまい、質問するに至りました。
エラーコード自体をググっても解決出来ませんでした。
また、階層は合っていると考えています。(visual studio codeでhtmlからcss/style.cssをクリックするとstyle.cssの画面には飛べました。)
補足情報（FW/ツールのバージョンなど）
質問文の拙さや内容からド初心者であることはわかると思いますが、何卒お願い致します。
3/17 15:45 補足
階層のスクリーンショットです。
階層の問題の可能性がないとは言い切れないので、
質問者さんに階層がわかるようにスクショでもなんでも取って提示して頂いた方が早いかと。
@mai1210様
cssの１行目というと、@charset "UTF-8"; の部分でしょうか？
ローカルで開くとcssが読み込まれない状態です。
@K_3578様
ご指摘いただきありがとうございます。
階層の部分のスクリーンショットをアップしておきました。
結構色んな可能性検討してくれてるのであくまで勘だけど
<link href="../css/style.css" rel="stylesheet">
とかで直ったりしないかな。
後、cssが反映されない系の過去質問めちゃくちゃあるので見ながら試してみては。
直接解決につながる内容の話ではないのですが、デスクトップの設定がOneDriveを使うような設定になっていそうです。
（PCのセットアップ時、規定がOneDriveになっていたり、変更を勧めるようなダイアログが出たりするようです。 https://support.microsoft.com/ja-jp/office/windows-10-%E3%81%AF%E6%97%A2%E5%AE%9A%E3%81%A7-onedrive-%E3%81%AB%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E4%BF%9D%E5%AD%98%E3%81%99%E3%82%8B-33da0077-770c-4bda-b61e-8c8e8ca70ac7 ）
今回のような問題や不具合の原因ではないとも言い切れませんので、ローカルに変更した方がよさそうです。
この辺（https://cg-squid.com/2020/07/26/20200726-2/）や、「onedrive デスクトップ 元に戻す」などのキーワードで出てくるページをいくつか確認してみてください。
@K_3578様
仰ったコードで試してみましたが、反映されませんでした。
そうですね、自分でももう一度探してみます。
@dit.様
そうかもしれません。
一度OneDrive関係の設定も行ってみます。
type属性追加して
<link href="./css/style.css" rel="stylesheet" type="text/css">
に変えてみるとか。
スクショ拝見しましたが、この親になってるPRACTICEというフォルダはデスクトップに入ってるんですか？
一度、エクスプローラーを開いて、左側に、「ダウンロード」とか「ピクチャ」とかあるところの「ドキュメント」にでもこのフォルダごとコピペして、そちらからindex.htmlを開いてみたらどうなりますか？画像表示はあとにしてとりあえずcssが反映されるかを確認してみてください。
エクスプローラーでstyle.cssのパスをプロパティで開いて丸々コピペして
href="~\css/style.css"ってしたら動きそうではある
@mari.rinn様
mari.rinn様が仰る通り、エクスプローラーのドキュメントにコピペし、そこからindex.htmlを開くとcssは反映されました。本当にありがとうございます。何故エクスプローラーではcssが反映されるようになったのでしょうか。
@dit.様
onedriveのデータのバックアップを停止したところ、ドキュメントに移す手間なくデスクトップからpracticeのフォルダを開くだけでcssが反映されたhtmlを開くことが出来ました。
解決まで導いて下さり、ありがとうございます。
＞何故エクスプローラーではcssが反映されるようになったのでしょうか。
dit.様が書かれてたことと、HALLL様のコードの画像urlにヒントがあります。
つまり、通常はパソコン内のデスクトップにPRACTICEを保存してるのでそのままcss/style.cssというパスで呼び出せる訳ですが、ネット上のonedriveに保存されてるがためにそちらにアクセスしないと呼び出せなくなってるってことなんだと思います。そうなると当然パスの書き方が全然変わって来るのであのままではダメだった訳です。
onedriveを切ったらパソコン内だけでのアクセスになったので正常にパスが通ったということですね。
で、ドキュメントはonedriveの設定とかしてない関係ない場所なので、そこに保存すればパソコン内の相対パスで正常に読み込めると言うわけです。て、伝わりましたでしょうか？
デスクトップ＝ＯｎｅＤｒｉｖｅ上だったんですね。「デスクトップに移してみて～」で解消しないわけでした。。
何にせよ解決して良かったです。
投稿については、自己解決などの処理をしていただけるとありがたいです。
回答2件
0
<link href="https://fonts.goo〜 <link href="css/style.css">
この2つの linkとhrefの間のスペースが正しくないと思います（スマホから見てるので全角なのか半角2つなのかわかりませんが）、半角1つだけに直してみてください。
投稿2021/03/16 22:07
総合スコア296
お返事、ご指摘ありがとうございます。
確かに、半角２つになっていました。
こちらで半角１つに修正いたしましたが、CSSが反映されることはありませんでした。
私のローカル環境（windows10 visual studio code
Google Chrome）で、記載されているコードをコピペして試してみましたが、正常にcssは反映されて表示されます。
なので、まずはブラウザのキャッシュを削除するということを試されて、それでも反映されない場合は、フォルダ名とファイル名は絶対に間違っていないかの確認と、再度パスについてですが、
index.htmlとcssというフォルダは同じ階層にあるのは間違いないですか？ 念には念を入れて確認してみてください。
0
file:///から始まるパスを指定しているからだと思われます。
相対パスで指定してみてください。
投稿2021/03/16 14:18
総合スコア211
お早い質問の回答ありがとうございます。
相対パスの指定を試みたのですが、思った通りに動いてくれなく、画像の表示が出来ませんでした...。
良ければなんですが、どのように指定すればよいかお教えいただけませんか？
それと、後からの補足なんですが、今回はHTMLのコードのすべてにCSSが反映されなく、<a>のCSSなど、全体に反映させる方法が分かりましたら、それもお教えいただきたいです。
追っての質問で申し訳ございません。
念のために。
root フォルダ（これの名前はなんでも良い。
├ index.html
└css フォルダ
└ style.css
という構成になっていますか？
そうです。
root
|
-css
| |
| -style.css
-html
となっています。
あなたの回答
tips
プレビュー
