Q&A
express-generatorでcssが読み込めません。
form.ejs
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title><%= title %></title> 6 <!-- font awesome読み込み--> 7 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 8 <!-- css読み込み--> 9 <link rel="stylesheet" type="text/css" href="stylesheet.css"> 10 </head> 11 <body> 12 <header> 13 <div class="container"> 14 <div class="header-left"> 15 <img class="logo" src="./picture/IMG_1035.jpeg"> 16 <div class="company">WAMNET <span class="Japan">Japan</span></div> 17 </div> 18 <span class="fa fa-bars header-fa"></span> 19 <div class="header-right"> 20 <a href="#" class="menu-botton header-side">TOP</a> 21 <a href="#" class="menu-botton header-side">日本ワムネットについて</a> 22 <a href="#" class="menu-botton header-side">社長メッセージ</a> 23 <a href="#" class="menu-botton header-side">製品・サービス</a> 24 <a href="#" class="menu-botton header-side">社員紹介</a> 25 <a href="#" class="menu-botton header-side">制度紹介</a> 26 <a href="#" class="menu-botton header-side">募集要項</a> 27 <a href="#" class="menu-botton header-side">会社概要</a> 28 <div class="entry header-side"> 29 <span class="fa fa-edit"></span> 30 <a href="#" class="menu-botton">ENTRY</a> 31 </div> 32 <div class="clear"></div> 33 </div> 34 <div class="clear"></div> 35 </div> 36 </header> 37 <div class="top-wrapper"> 38 <div class="container"> 39 <div class="center"> 40 <div class="top-line"> 41 <div class="think">THIN<span>K.</span></div> 42 <img class="new-picture" src="./l_e_new_221.png"> 43 <div class="line">__</div> 44 <img class="light-picture" src="./light-bulb.png"> 45 </div> 46 <div class="sub-title">あなたの、<span>”やりたい”</span>が、社会の便利に。</div> 47 <i class="fa fa-angle-double-down" aria-hidden="true"></i> 48 </div> 49 </div> 50 </div> 51 <div class="second"> 52 <div class="top-row"> 53 <div class="company-about">日本ワムネットについて</div> 54 <div class="about"><span>A</span><span>b</span><span>o</span><span>u</span><span>t</span></div> 55 </div> 56 <div class="second-row"> 57 <div class="six-point-about bdTtl">日本ワムネットの6つのポイント</div> 58 <div class="six-point"> 59 <div class="point"> 60 <div class="point-title">自社開発企業</div> 61 <img src="./icon_point_01.png"> 62 <div class="description">企業向けITサービスを自社で企<br>画・開発します！</div> 63 </div> 64 <div class="point"> 65 <div class="point-title">企画・保守・サポートまで</div> 66 <img src="./icon_point_02.png"> 67 <div class="description">企画の立ち上げはもちろん、リリ<br>>ース後の顧客サポートまで一貫し<br>て行います！</div> 68 </div> 69 <div class="point"> 70 <div class="point-title">実績No.1の純国産サービス</div> 71 <img src="./icon_point_03.png"> 72 <div class="description">主力サービス「GigaCC」はオンラ<br>インファイル共有市場で直近6年連<br>続ベンダー別売上・実績No.1！</div> 73 </div> 74 <div class="point"> 75 <div class="point-title">１０年連続増収益</div> 76 <img src="./icon_point_04.png"> 77 <div class="description">クラウドサービスを中心に顧客ニ<br>ーズを探り、常に挑戦を続けてい<br>ます！</div> 78 </div> 79 <div class="point"> 80 <div class="point-title">少数精鋭のスペシャリスト集団</div> 81 <img src="./icon_point_05.png"> 82 <div class="description">社員数約40名。企画、開発、営<br>業、保守、管理、様々な分野のエ<br>キスパートが集まっています！</div> 83 </div> 84 <div class="point"> 85 <div class="point-title">安定した経営基盤<br>（ティーガイアグループ）</div> 86 <img src="./icon_point_06.png"> 87 <div class="description">東証一部上場企業㈱ティーガイア<br>（住友商事グループ）の子会社。<br>安定したバックボーンで新たな開<br>発に挑戦できます！</div> 88 <div> 89 </div> 90 <div class="clear"></div> 91 </div> 92 </div> 93 </div> 94 </body> 95</html> 96
cssのファイルは同じ階層にあります。
expressの場合は、cssを利用するには
wwwやapp.jsに何か記入しなければならないのでしょうか？
回答1件
0
ベストアンサー
express-generatorで雛形を作った場合、静的ファイルはpublic配下に配置します。
public images/ javascripts/ stylesheets/ style.css
app.js内で静的ファイルへのルーティングは
app.use(express.static(path.join(__dirname, 'public')));
と記載されているはずなので、静的ファイルのルートはpublicになります。
ですから、たとえばテンプレートファイル(views/index.ejs)などでcssファイルを指定する場合は
<head> <link rel='stylesheet' href='/stylesheets/style.css' /> </head>
こんなふうに指定するはずです。(静的ファイルのルートがpublicなので、publicは不要)
(express-generatorのバージョンによっては私の説明と違う可能性もあります)
投稿2020/01/30 03:26
総合スコア7225
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/01/30 04:45
2020/01/30 04:51
2020/01/30 05:02