cssが読み込まれない

前提・実現したいこと

cssを反映させたい。

Go Liveで画面を確認すると、htmlは反映されるのですがcssは反映されていません。

html
1<!DOCTYPE html>
2<html lang="ja">
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>Document</title>
8
9  <link rel="stylesheet" href="css/style.css">
10  <link rel="stylesheet" href="css/header.css">
11
12  <link rel="shortcut icon" href="img/favicon.ico">
13
14</head>
15<body>
16  <header>
17    <h1><a href="">logo</a></h1>
18    <nav>
19      <div class="ham"><a href="">
20          <span class="ham-line ham-line1"></span>
21          <span class="ham-line ham-line2"></span>
22          <span class="ham-line ham-line3"></span>
23      </a></div>
24      <ul>
25        <li><a href="">1</a></li>
26        <li><a href="">2</a></li>
27        <li><a href="">3</a></li>
28        <li><a href="">4</a></li>
29      </ul>
30      <div class="header-right">
31        <div class="tel">
32          <small>open</small>
33          <p><a href="tel:+81-90-0000-0000">tel</a></p>
34        </div>
35        <div class="request-btn"><a href="">
36          <span>資料請求</span>
37        </a></div>
38        <div class="contact-btn"><a href="">
39          <span>お問い合わせ</span>
40        </a></div>
41      </div>
42    </nav>
43  </header>
44
45  <section class="hero">
46  </section>
47</body>
48</html>

scss
1//style.scss
2
3@charset 'utf-8';
4
5/*
6html5doctor.com Reset Stylesheet
7v1.6.1
8Last Updated: 2010-09-17
9Author: Richard Clark - http://richclarkdesign.com
10Twitter: @rich_clark
11*/
12
13html,
14body,
15div,
16span,
17object,
18iframe,
19h1,
20h2,
21h3,
22h4,
23h5,
24h6,
25p,
26blockquote,
27pre,
28abbr,
29address,
30cite,
31code,
32del,
33dfn,
34em,
35img,
36ins,
37kbd,
38q,
39samp,
40small,
41strong,
42sub,
43sup,
44var,
45b,
46i,
47dl,
48dt,
49dd,
50ol,
51ul,
52li,
53fieldset,
54form,
55label,
56legend,
57table,
58caption,
59tbody,
60tfoot,
61thead,
62tr,
63th,
64td,
65article,
66aside,
67canvas,
68details,
69figcaption,
70figure,
71footer,
72header,
73hgroup,
74menu,
75nav,
76section,
77summary,
78time,
79mark,
80audio,
81video {
82  margin: 0;
83  padding: 0;
84  border: 0;
85  outline: 0;
86  font-size: 100%;
87  vertical-align: baseline;
88  background: transparent;
89}
90
91body {
92  line-height: 1;
93}
94
95article,
96aside,
97details,
98figcaption,
99figure,
100footer,
101header,
102hgroup,
103menu,
104nav,
105section {
106  display: block;
107}
108
109nav ul {
110  list-style: none;
111}
112
113blockquote,
114q {
115  quotes: none;
116}
117
118blockquote:before,
119blockquote:after,
120q:before,
121q:after {
122  content: '';
123  content: none;
124}
125
126a {
127  margin: 0;
128  padding: 0;
129  font-size: 100%;
130  vertical-align: baseline;
131  background: transparent;
132}
133
134/* change colours to suit your needs */
135ins {
136  background-color: #ff9;
137  color: #000;
138  text-decoration: none;
139}
140
141/* change colours to suit your needs */
142mark {
143  background-color: #ff9;
144  color: #000;
145  font-style: italic;
146  font-weight: bold;
147}
148
149del {
150  text-decoration: line-through;
151}
152
153abbr[title],
154dfn[title] {
155  border-bottom: 1px dotted;
156  cursor: help;
157}
158
159table {
160  border-collapse: collapse;
161  border-spacing: 0;
162}
163
164/* change border colour to suit your needs */
165hr {
166  display: block;
167  height: 1px;
168  border: 0;
169  border-top: 1px solid #cccccc;
170  margin: 1em 0;
171  padding: 0;
172}
173
174input,
175select {
176  vertical-align: middle;
177}
178
179// reset CSS ここまで
180
181body {
182  font-family: "游ゴシック体", "游ゴシック", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
183  ;
184}
185
186

scss
1//header.scss
2
3@charset "utf-8";
4@import 'style.scss';
5
6.header {
7  display: flex;
8
9  h1 {
10    a {
11      color: #000;
12    }
13  }
14
15  nav {
16
17    .ham {
18
19      display: none;
20
21      a {
22        .ham-line {}
23
24        .ham-line1 {}
25
26        .ham-line2 {}
27
28        .ham-line3 {}
29      }
30    }
31
32    ul {
33      li {
34        a {}
35      }
36    }
37
38    .header-right {
39      .tel {
40        small {}
41
42        p {
43          a {}
44        }
45      }
46
47      .request-btn {
48        a {
49          span {}
50        }
51      }
52
53      .contact-btn {
54        a {
55          span {}
56        }
57      }
58    }
59  }
60}
61

補足情報（FW/ツールのバージョンなど）

scssを使っています。

m.ts10806

2021/04/25 23:55

コードと画像だけではよくわかりません。「質問するときのヒント」を参照して質問内容を充実させてください。特に何を以て「読み込まれない」と言っているのか。

Lhankor_Mhy

2021/04/26 01:44

「Go Live」とはなんですか？

2ckD

2021/04/26 02:50

ぱっと見コードにおかしいところは見当たらないから・画面に出ている警告を読む・VSCodeの機能(ローカルサーバー)を使わずにwebブラウザで開いてみるをやってみてください

K_3578

2021/04/26 02:59

>Lhankor_Mhyさん｢Go live｣は多分拡張機能の｢Live Server｣の話かと。確か押したらブラウザでHTMLとCSSが反映されたページを開いてくれる的な奴だった気がします (VScode詳しくないので間違ってたらすいません)

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

回答1件

ベストアンサー

diff
1- .header {
2+ header {
3    display: flex;

投稿2021/04/26 02:43

hatena19

総合スコア33790

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.46%

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

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

質問する

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

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