More than 3 years have passed since last update.

HTML.CSSで「net::ERR_FILE_NOT_FOUND」エラー

Last updated at 2021-01-03Posted at 2021-01-03

HTML.CSS勉強時のエラー履歴として記載します。

[トラブル内容]
HTML/CSSの復習中にHTMLへCSSが一切反映されないエラーが発生しました。

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title>入会申し込み</title>
 
  <link rel="stylesheet" href="css/sanitize.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="content">
    <h1>入会申し込み</h1>
    <p>入会するには、次の入会フィームに必要事項をご記入ください</p>
    <p>メールアドレス：<input type="email" name="mymail"> </p>
    <p>パスワード：<input type="password" name="password"> </p>
    <button type="submit">送信</button>
  </div>
</body>
 
</html>

style.css

h1 {
  font-size: 24px;
  margin: 0;
}

p {
  font-size: 14px;
}

.content {
  background-color: #fcc;
  width: 600px;
}

●対応
デベロッパーツールにて、エラー内容の確認
GET index.html:8op/sample.01/step.04/css/
net::ERR_FILE_NOT_FOUND

どうやら、step.04内cssファイルを探しているのが原因のようでした。
変更前
<link rel="stylesheet" href="css/sanitize.css">
<link rel="stylesheet" href="css/style.css">

変更後
<link rel="stylesheet" href="../css/sanitize.css">
<link rel="stylesheet" href="../css/style.css">

変更後、HTMLファイルにCSSが反映されました。

途中の対応方法や他の要因解析については下記サイトを参考にしました。
https://www.sejuku.net/blog/100015

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up