htmlでCSSが読み込まれません。。。
解決したいこと
CSSが読み込まれるようにしたいです。
初めて自分で簡単なWebアプリを作ろうとしているのですが、
CSSを適用しようとして詰まっています。
htmlと同じディレクトリにCSSフォルダを作成し配置しているのですが、
404エラーが発生してしまいました。
大変恐縮ですが、どなたか解決方法をご教示いただけませんでしょうか？
発生している問題・エラー
Failed to load resource: the server responded with a status of 404 ()
該当するソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<!-- CSSファイルをリンク -->
<link href="CSS/style.css" rel="stylesheet">
<title>メニュー画面</title>
<script>
document.addEventListener("DOMContentLoaded", function() {
console.log("メニュー画面が読み込まれました");
});
</script>
</head>
<body>
<h1>価格計算アプリ</h1>
<button onclick="location.href='/calculate'">価格計算</button>
<button onclick="location.href='/register'">商品登録</button>
<button onclick="location.href='/history'">履歴確認</button>
</body>
</html>
例）
/* 背景色を設定 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f8f9fa;
}
nav {
background: linear-gradient(45deg, #6a11cb, #2575fc);
padding: 10px 20px;
display: flex;
justify-content: space-around;
align-items: center;
}
nav a {
color: white;
text-decoration: none;
font-size: 18px;
font-weight: bold;
transition: color 0.3s ease;
}
nav a:hover {
color: #ffd700;
}
/* 見出しのスタイル */
h1 {
color: #333;
text-align: center;
}
/* ボタンのデザイン */
button {
background-color: #007BFF;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
自分で試したこと
一通りネットで確認をしたところ、「ファイル名誤り」や「配置ディレクトリ誤り」等が確認事項に上がっていたのですが、自分で確認したところ問題なさそうでした。
localhostでの起動になるので、エラーにカーソルを合わせた際に表示されるURLにも念のため飛んでみたのですが404エラーになってしまいました。
0 likes
