前提・実現したいこと
node.js 初学者です。 Node.jsにてejsに対し、CSSを適応させたいのですが、適応されない状態になっています。どなたかお力を貸していただけると幸いです。
発生している問題・エラーメッセージ
エラーメッセージは出ていません。、ejsのリンクタグ内でのリンクを参照するとCSSファイルへとジャンプします。
ターミナルから実行し、ejsは反映されるのですが、CSSのみ適応されません。
/styleとブラウザに入力するとCSSのソースコードは適切に表示されます。
該当のソースコード
JS
1const http = require('http'); 2const fs = require('fs'); 3const ejs = require('ejs'); 4const moment = require('moment'); 5 6moment.locale('ja'); 7let datetoday = moment().format('LL'); 8 9const CS = fs.readFileSync('./createserver.ejs','utf-8'); 10const CS2 = fs.readFileSync('./createserver2.ejs','utf-8'); 11const style = fs.readFileSync('./createserver2.css', 'utf-8'); 12 13var server = http.createServer(getFromClient); 14server.listen(3000); 15console.log("Server start!"); 16console.log(datetoday); 17 18function getFromClient(req,res){ 19 const url_parts = new URL(req.url,"http://localhost:3000") 20 console.log(url_parts); 21 switch(url_parts.pathname){ 22 23 case '/': 24 var content = ejs.render(CS,{ 25 title:"NodeTest", 26 today:datetoday, 27 }) 28 res.writeHead(200,{'Content-Type':'text/html'}); 29 res.write(content); 30 res.end(); 31 break; 32 33 case '/CS2': 34 var content = ejs.render(CS2,{ 35 title:"NodeTest2", 36 today:datetoday, 37 }) 38 res.writeHead(200,{'Content-Type':'text/html'}); 39 res.write(content); 40 res.end(); 41 break; 42 43 case '/style': 44 res.writeHead(200,{'Content-Type':'text/css'}); 45 res.write(style); 46 res.end(); 47 48 break; 49 50 default : 51 res.writeHead(200,{'Content-Type':'text/html'}); 52 res.write("no page..."); 53 res.end(); 54 break; 55 } 56} 57
//createserver.ejs <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><%=title%></title> </head> <body> <header> <h1><%=title%></h1> </header> <h1>Hello World</h1> <h2><%=today%></h2> </body> </html>
//createserver2.ejs <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link type="text/css" rel="stylesheet" href="css/createserver2.css"> <title><%= title %> </title> </head> <body> <header> <h1 class="tit"> <%= title %> </h1> </header> <main> <div class="main"> <h2 class="date">今日は<%= today %>です。 </h2> </div> </main> </body> </html>
css
1//createserver2.ejs 2 3.tit { 4 color: blue; 5 background-color: antiquewhite; 6} 7 8.date { 9 color: aquamarine; 10 padding: 5px 10px; 11 background-color: black; 12} 13
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/09/18 03:39