質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.37%
EJS

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

4186閲覧

Node.jsのルーティングにてCSSが読み込まれません。

Rude_Boy1022

総合スコア3

EJS

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/09/17 09:20

編集2021/09/17 09:24

前提・実現したいこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

//createserver2.ejs
<link type="text/css" rel="stylesheet" href="css/createserver2.css">

???

ひょっとして、ejsのコンパイルでこの位置に自動的にスタイルシートを挿し込んでくれる想定で考えてますか?

Chrome等のブラウザで訪問したユーザは//CS等のURLを叩いて
「HTMLください」
→「おっ、HTML帰ってきた」
→「ふむ、linkタグでURL書いてあるから再度リクエスト飛ばすか」

このような流れでもう一回HTTPアクセスでCSSファイルを受け取りにいくだけです。
ブラウザでF12キー(Mac時command+option+i)でデベロッパーツールを起動して、
ネットワークのタブで何のファイルを欲しがって追加のHTTP通信をしているか確認してみてください。

Node.jsのコードでは/styleのエンドポイントを定義しているので、
<link type="text/css" rel="stylesheet" href="/style">にすると想定通りの動作をすると思います。

投稿2021/09/17 13:31

miyabi-sun

総合スコア21194

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Rude_Boy1022

2021/09/18 03:39

ご回答ありがとうございます。 やはり表面上だけで書いててもダメですね(^^;) 勉強になります。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.37%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問