Q&A
できませんでした...
Node.jsでExpressを使ってウェブサイトを作っています。
発生している問題
home.htmlではCSSが読み込まれるが、update.htmlでは読み込まれない。
#ソースコード
index.js
js
1const http = require('http'); 2const express = require("express"); 3const app = express(); 4const path = require("path"); 5app.engine('.html', require('ejs').__express); 6app.set('views', __dirname + '/views'); 7app.set('view engine', 'html'); 8app.use(express.static(path.join(__dirname, 'public'))); 9app.get("/", function(req, res, next) { 10 res.render("home", {}); 11}); 12app.get("/news/update", function (req, res, next) { 13 app.use(express.static(path.join(__dirname, 'public'))); 14 res.render("news/update", {}); 15}); 16app.listen(8080);
home.html
html
1<html> 2 <head> 3 <title>Web Page</title> 4 <meta http-equiv="content-type" content="text/html" charset="utf-8"> 5 <link rel="stylesheet" type="text/css" href="css/style.css"> 6 <link rel="icon" type="image/x-icon" href="assets/favicon.ico"> 7 </head> 8 <body> 9 <h1 class="daimei">Hello World!</h1> 10 </body> 11</html>
update.html
html
1<html> 2 <head> 3 <title>Web Page</title> 4 <meta http-equiv="content-type" content="text/html" charset="utf-8"> 5 <link rel="stylesheet" type="text/css" href="css/style.css"> 6 <link rel="icon" type="image/x-icon" href="assets/favicon.ico"> 7 </head> 8 <body> 9 <h1 class="daimei">アップデート</h1> 10 <h2>アップデート情報</h2> 11 </body> 12</html>
style.css
css
1.daimei { 2 background: #FF0000; 3}
ファイル
/ └index.js └public └css └style.css └assets └favicon.ico └views └home.html └news └update.html
発生しているエラーメッセージ
特になし
使用環境
Node.js v12.22.1
Express 4.17.1
開発環境:Replit
回答2件
0
ベストアンサー
htmlが読み込まれるのはブラウザ側なのでnews/updateからの相対パスでnews/update/css/style.cssにリクエストが飛んでいるのではないでしょうか
(ブラウザのデベロッパ－ツールのコンソール等でこのパスの404エラーが確認できると思います)
なのでこの場合パスを相対パスで../../css/style.css、もしくは絶対パスで/css/style.cssにする必要があります。
投稿2021/06/28 10:00
編集2021/06/28 10:05
総合スコア173
0
多分相対パス違いなのでそこら辺を考慮してこれでどうでしょうか
html
1<link rel="stylesheet" type="text/css" href="./css/style.css">
投稿2021/06/28 06:50
総合スコア3828
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/06/28 23:19