Q&A
実現したいこと
作成した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件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/03/17 16:11