Q&A
前提・実現したいこと
複数ページを実装しようとしています。
Homeページのliをクリックすると、別ページに飛ぶ構成です。
私はページごとにフォルダーを分けました。
※style,cssはSCSSフォルダーに入れなおしています！！
上記がファイル構造です。
Q.それぞれのフォルダーRoomなどにCSS、SCSS、img jsフォルダーを置いています。
style.scssにheader.scssを保存するとsuccessできますが、style.cssがCSSに自動的に追加されません
解決したいこと
1style.cssをコンパイルさせ。style.cssを自動的に作り、これを読み込みさせたい。
2.Homeページliをクリックしてもcannot getで表示されない。→表示させたい。
Failed to load resource: the server responded with a status of 404 (Not Found) By Google develop
（一方で、フォルダーからroom.htmlをクリックするとCSS反映されてないページが表示されます。）
live saas.lsonは↓
json
1 2{ 3 //IDやクラス名が閉じタグの後ろにコメントとして自動挿入 4"emmet.syntaxProfiles": { 5 "html": { 6 "filters": "html,c" 7 } 8}, 9"emmet.preferences": { 10 "filter.commentAfter": "<!-- /[#ID][.CLASS] -->" 11}, 12 13 "liveSassCompile.settings.formats": [ 14 15 //Sassの出力内容の設定 16 { 17 "format": "expanded", //nested、compact、compressedのどれかを選ぶ 18 "extensionName": ".css", //style.cssとして出力 19 "savePath": "/css" //cssフォルダの中にstyle.cssを出力 20 } 21 ], 22 "liveSassCompile.settings.excludeList": [ //対象外とするフォルダを指定 23 "**/node_modules/**", 24 ".vscode/**", 25 ".history/**" 26 ], 27 "liveSassCompile.settings.autoprefix": [ //ベンダープレフィックスの指定 28 "last 2 versions", 29 "ie >= 11", 30 "Android >= 4", 31 "ios_saf >= 8" 32 ], 33 "workbench.colorTheme": "Quiet Light", 34 "liveServer.settings.donotShowInfoMsg": true 35 36 } 37 38
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>石井花壇|温海温泉旅館【公式サイト】</title> 8 <meta name="description" content="日本古来の素材と現代的表現を併せ持つ温泉旅館、石井花壇。伝統的な「和」の息づく空間で、至極のひとときをお過ごしください。"> 9 <link rel="stylesheet" href="./css/destyle.css"> 10 <link rel="stylesheet" href="./css/room.css"> 11</head> 12<body> 13 <header class="header"> 14 <div class="header-flex"> 15 <img src="../Room/img/sub-header-logo.png" alt="" id="logo"> 16 <nav class="nav"> 17 <ul class="header-list"> 18 <li class="header-item"> <a href="room.html">お部屋</a></li><!-- /.header-item --> 19 <li class="header-item"> <a href="menu.html">お料理</a></li><!-- /.header-item --> 20 <li class="header-item"> <a href="onsen.html">温泉</a></li><!-- /.header-item --> 21 </ul><!-- /.header-list --> 22 </nav><!-- /.nav --> 23 <div class="header-link"> 24 <p>宿泊予約</p> 25 </div><!-- /.header-link --> 26 </div><!-- /.header-flex --> 27 </header><!-- /.header --> 28 29 <main class="main"> 30 <section class="fv"> 31 <div class="fv-img"> 32 <p>お部屋</p> 33 </div><!-- /.fv-img --> 34 35 </section><!-- /.fv --> 36 <section class="room"> 37 <div class="bread inner"> 38 <ol class="breadcrumbs"> 39 <li class="bread-item"> <a href="index.html"></a> </li><!-- /.bread-item --> 40 <li class="bread-item"> <a href="room.html"></a> </li><!-- /.bread-item --> 41 </ol><!-- /.breadcrumbs --> 42 </div><!-- /.bread --> 43 <div class="message"> 44 創業より受け継がれてきた石井花壇の和の造り <br> 温海の雄大な絶景を堪能していただけるように設計された客室 <br> ゆるやかに流れ行く時間に身を委ねて 45 </div><!-- /.message --> 46 <section class="room-contents"> 47 <ul class="room-list"> 48 <li class="room-item"> 49 <img src="../Room/img/oheya01.jpg" alt="お部屋1"> 50 <div class="jp-text"> 51 <p class="ttl">温泉付き客室</p><!-- /.ttl --> 52 <p>温海の源泉かけ流し露天風呂付き客室になります。<br> あなただけの上質な安らぎのひとときを。</p> 53 <p>＊部屋数に限りがございます。<br> ＊洗い場はないため、お体を先に大浴場でお流しになって頂く必要があります。</p> 54 </div><!-- /.jp-text --> 55 </li><!-- /.room-item --> 56 <li class="room-item"> 57 <img src="../Room/img/oheya02.jpg" alt="お部屋2"> 58 <div class="jp-text"> 59 <p class="ttl">庭園付き客室</p><!-- /.ttl --> 60 <p>庭園付きの客室になります。<br> お庭を見ながら、ほっとするひとときをお過ごしください。</p> 61 <p>＊お庭は複数のお客様と囲む形になります。<br> ＊部屋数に限りがあります。<br> ＊ご希望の方は「お抹茶/500円」をルームサービスさせていただきます。</p> 62 </div><!-- /.jp-text --> 63 </li><!-- /.room-item --> 64 <li class="room-item"> 65 <img src="../Room/img/oheya03.jpg" alt="お部屋3"> 66 <div class="jp-text"> 67 <p class="ttl">一般客室</p><!-- /.ttl --> 68 <p>最もベーシックな客室になります。 伝統の中にモダンさを取り入れた <br> 内装となっており、とても過ごしやすくしていただけます。</p> 69 <p>＊全室お部屋より日本海を望むことができます。</p> 70 </div><!-- /.jp-text --> 71 </li><!-- /.room-item --> 72 </ul><!-- /.room-list --> 73 74 </section><!-- /.room-contents --> 75 </section><!-- /.room --> 76 77 </main><!-- /.main --> 78 79 <footer class="footer"> 80 <div class="wrapper"> 81 <nav> 82 <ul class="footer-list"> 83 <li class="footer-item"><a href="#">お部屋</a></li><!-- /.footer-item --> 84 <li class="footer-item"><a href="#">お料理</a></li><!-- /.footer-item --> 85 <li class="footer-item"><a href="#">温泉</a></li><!-- /.footer-item --> 86 </ul><!-- /.footer-list --> 87 </nav> 88 <div class="footer-logo"> 89 <img src="./img/footer-logo.png" alt="フッターロゴ"> 90 </div><!-- /.footer-logo --> 91 <div class="footer-access"> 92 <p> 〒000-0000</p> 93 <p>山形県鶴岡市xxxxxxxxxx</p> 94 </div><!-- /.footer-access --> 95 <div class="footer-tel"> 96 <p>TEL.000-0000-0000</p> 97 <p>FAX.00-0000-0000</p> 98 </div><!-- /.footer-tel --> 99 </div><!-- /.wrapper --> 100 101 <div class="footer-bg"> 102 Copyright © 石井花壇 All Rights Reserved. 103 </div><!-- /.footer-bg --> 104 </footer><!-- /.footer -->
style.scss
1@import "./Room/Scss/foundation/base"; 2@import "./Room/Scss/foundation/general"; 3@import "./Room/Scss/foundation/mixin"; 4@import "./Room/Scss/layout/header"; 5@import "./Room/Scss/layout/footer";
試したこと
フォルダー階層設定のし直しをする必要があるのではないか？（仮説）
header.scssのレスポンシブ対応時(mixin.scss)先に読み込み確認。
header.scssとfooter.scssを削除してもエラーになります。→SCSSの設定する必要あり？
→検索しましたが出てきませんでした。
ご確認いただけると幸いです。m(__)m
回答1件
0
ベストアンサー
明確にエラー内容が出ていますね、これが何か調べましたか？
Failed to load resource: the server responded with a status of 404 (Not Found)
また、「絶対パスと相対パスの違い」をヒントに調べていけば自ずと回答は得られると思います。
投稿2021/09/19 16:20
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/09/20 13:18 編集