HTMLファイルをブラウザで表示するとCSSや画像が反映されないエラーを解消したい

実現したいこと

作成したHTMLファイルをブラウザで表示すると
CSSや画像が反映されなくなるのを解消したい。
VS CodeのLive Server経由だと表示される。

前提

現在、Web制作を勉強中です。
フォルダから対象のHTMLファイルを開いて表示させようとすると、
CSSや画像が反映されなくなっております。

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

Visual Studio CodeのLive ServerでGo Liveを押下した際には問題なく表示されるのですが、
保存先のフォルダ内から表示させようとするとHTML以外が反映されなくなります。
chromeの検証でコンソールを確認すると以下のメッセージが表示されております。

Failed to load resource: net::ERR_FILE_NOT_FOUND

該当のソースコード

head内のみ記載します。

html
1<head>
2    <meta charset="UTF-8">
3    <meta name="viewport" content="width=device-width, initial-scale=1.0">
4    <title>省略</title>
5    <meta name="robots" content="noindex" />
6    <link rel="shortcut icon" href="/favicon.ico">
7
8    <!-- reset css -->
9    <link rel="stylesheet" href="/css/reset.css">
10
11    <!-- font awesome -->
12    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
13
14    <!-- drawer.css -->
15    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css" media="screen and (max-width: 767px)">
16    <!-- wow -->
17    <link rel="stylesheet" href="/css/animate.css">
18
19    <!-- original -->
20    <link rel="stylesheet" href="/css/style.css">
21</head>

試したこと

エラーメッセージで検索したところ、ファイルが存在していても今回のエラーは発生するとのことで、chromeの拡張機能を無効にしたりchromeの設定をクリアすると良いとあったので実施しましたが解決しませんでした。
別にcssファイルを作成して、htmlからそちらのcssを読み込ませるようにしましたが、解決しませんでした。（VS CodeのLive Serverからだと反映される）

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

Windows10、Visual Studio Code、Google Chrome

回答1件

ベストアンサー

フォルダから対象のHTMLファイルを開いて表示させようとすると

この表示方法はファイルをダブルクリックなどして表示していないでしょうか？

その場合はURLがfile://ではじまるもの、例えば
file:///C:/Users/User/Desktop/index.html
の様になります。この状態でどうしても /css/reset.css を表示したい場合は c:\css\reset.css のようなパスにファイルを配置する必要があります。

通常はWebサーバを立てた上でページを表示しますので、上記の様な file:// のパスは考慮しません。ある程度考慮するのであれば相対パスで指定するしかないと思います。

投稿2023/03/17 16:04