node.jsでのcss読み込みに関して

###前提・実現したいこと
node.jsを勉強中です。
cssの読み込みがうまくいかずに困っています。

###該当のソースコード

const http = require('http');
const fs = require('fs');
const ejs = require('ejs');
const url = require('url');

const index_page = fs.readFileSync('./index.ejs', 'utf8');
const other_page = fs.readFileSync('./other.ejs', 'utf8');
const style_css = fs.readFileSync('./style.css', 'utf8');

var server = http.createServer(getFromClient);

server.listen(3000);
console.log('Server start!');

function getFromClient(request, response){
  var url_parts = url.parse(request.url);
  switch (url_parts.pathname) {

    case '/':
      var content = ejs.render(index_page, {
        title:"Index page",
        content:"これはサンプルページです。",
      });
      response.writeHead(200, {'Content-Type': 'text/html'});
      response.write(content);
      response.end();
      break;

    case '/style.css':
      response.writeHead(200, {'Content-Type': 'text/html'});
      response.write(style_css);
      response.end();
      break;

    default:
      response.writeHead(200, {'Content-Type': 'text/html'});
      response.end('no page...');
      break;
  }
}

<!DOCTYPE html>
<html lang="ja">
<head>
  <link type=　"text/css" href=　"./style.css" rel=　"stylesheet">
  <meta http-equiv="content-Type" content="text/html; charset=UTF-8">
  <title><%= title %></title>
</head>

<body>
  <head>
    <h1><%= title %></h1>
  </head>
  <div role="main">
    <p><%= content %></p>
  </div>
</body>

</html>

h1 {
  font-size: 60pt;
  color: #eee;
  text-align: right;
  margin: 0px;
}
body {
  font-size: 12pt;
  color: #999;
  margin: 5px;
}
p {
  font-size: 14pt;
  margin: 0px 20px;
  color: red;
}

###補足情報(言語/FW/ツール等のバージョンなど)
ファイルは全て同じ階層に存在しています。

行動規範の内容に同意します

回答2件

lang
1<link type=　"text/css" href=　"./style.css" rel=　"stylesheet">

ここに全角スペースが入ってるので取り除いてみてください。

投稿2017/10/11 02:22

karamarimo

総合スコア2551

naoy10

2017/10/11 02:32

解決しました！ご丁寧にご指摘いただきありがとうございました！勉強に励みたいと思います！

masaya_ohashi

2017/10/11 06:58

あのー、解決されたのでしたらベストアンサーを選んでこの質問を閉じていただけますか？

行動規範の内容に同意します

cssのファイルのContent-Typeがtext/htmlになっているのが原因ではないでしょうか。

JavaScript
1    case '/style.css':
2      response.writeHead(200, {'Content-Type': 'text/html'}); // ←ここ
3      response.write(style_css);
4      response.end();
5      break;

このように直してください。

JavaScript
1      response.writeHead(200, {'Content-Type': 'text/css'});

投稿2017/10/11 02:13

編集2017/10/11 02:14

masaya_ohashi

総合スコア9206

naoy10

2017/10/11 02:18

指摘ありがとうございます。 text/cssへ修正いたしましたが、cssは反映されませんでした。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

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

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

node.jsでのcss読み込みに関して

関連した質問