EJSでcssファイルを読み込み

HTML EJS

EJSでcssファイルを読み込み

EJS (Embedded JavaScript) を使用してCSSファイルを読み込むには、HTML内で通常のlinkタグを使用します。
以下の手順で進めます。

1. CSSファイルを作成する

まず、CSSファイルをプロジェクト内に作成します。
例えば、public/css/style.cssというパスにCSSファイルを作成するとします。

2. EJSファイルでCSSを読み込む

EJSファイル内で、linkタグを使用してCSSファイルを読み込みます。
EJSでは変数や条件分岐なども使用できますが、CSSの読み込み自体は通常のHTMLと同様です。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My EJS Page</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <h1>Hello, EJS!</h1>
</body>
</html>

3. Expressで静的ファイルを提供する

もしNode.jsとExpressを使用している場合、静的ファイルを提供するために、Expressで静的ファイルのディレクトリを設定する必要があります。

const express = require('express');
const app = express();
const path = require('path');

// 静的ファイルのディレクトリを設定
app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {
    res.render('index');
});

app.listen(3000, () => {
    console.log('Server is running on http://localhost:3000');
});

4. フォルダ構成の例

myapp/
├── public/
│   └── css/
│       └── style.css
├── views/
│   └── index.ejs
└── app.js

この構成に従えば、/css/style.cssというパスでCSSファイルが提供され、EJSテンプレート内で適切に読み込むことができます。