CSSのシートが読み込まれません。

前提・実現したいこと

CSSのシートを反映させたいです。

該当のソースコード

<title>写経用コード</title> <link rel="stylesheet" href="style.css">

試したこと

キャッシュクリア
スペルや階層の確認

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

質問の仕方が悪く申し訳ありません。
このサイトのヘッダー部分をコーディングしようとしています。

自分の描画結果はCSSが反映していない状態です。

以下、全文掲載いたします。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-08">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>写経用コード</title>
7  <link rel="stylesheet" href="style.css">
8</head>
9<body>
10  <!-------------------------
11    * ヘッダー
12  --------------------------->
13
14<header>
15  <div class="inner">
16    <h1>株式会社Practice</h1>
17    <nav>
18      <ul>
19        <li>ABOUT</li>
20        <li>NEWS</li>
21        <li>WORKS</li>
22        <li>ACCESS</li>
23        <li>CONTACT</li>
24      </ul>
25    </nav>
26  </div>
27</header>
28</body>
29</html>

css
1@charset "utf-8";
2
3/* ーーーーーーーーーーーーーー
4全体構造
5ーーーーーーーーーーーーーー */
6
7html {
8  margin: 0;
9  padding: 0;
10}
11
12body {
13  margin: 0;
14  padding:0;
15  color: #4a4a4a;
16  line-height: 1.5;
17  background-color: #fff;
18}
19
20h1,h2,h3,h4 {
21  margin: 0;
22  padding: 0;
23  font-weight: bold;
24}
25
26h1 {
27  font-size: 24px;
28}
29
30h2 {
31  font-size: 28px;
32  text-align: center;
33}
34
35h3 {
36  font-size: 18px;
37  text-align: center;
38}
39
40p, a {
41margin: 0;
42padding: 0;
43font-size: 18px;
44color: #4a4a4a;
45}
46
47a {
48  text-decoration: none;
49}
50
51a:hover {
52  opacity: 0.7;
53}
54
55ul {
56  padding: 0;
57  margin: 0;
58}
59
60li {
61  list-style: none;
62}
63
64.inner {
65  padding: 70px 50px;
66  max-width: 980px;
67  margin: 0 auto;
68  text-align: center;
69}
70
71.line {
72  background-color: #4a4a4a;
73  width: 55px;
74  height: 1px;
75  margin: 30px auto 60px;
76}
77
78/* -------------------------
79   * ヘッダー
80---------------------------- */
81
82header {
83  height: 10vh;
84  background-color: #343a40;
85  color: #fff;
86}
87
88header .inner {
89  display: flex;
90  justify-content: space-between;
91  align-items: center;
92  padding: 0 20px;
93  height: 100%;
94  max-width: 980px;
95  margin: 0 auto;
96}
97
98header ul {
99  display: flex;
100}
101
102header li {
103  padding: 0 20px;
104}

int32_t

2021/06/07 13:19

HTMLは質問文にある2行だけですか? style.css の内容は? 期待される描画結果と実際の描画結果は?

himazin_bivar

2021/06/07 13:21

どの環境で読み込みしてますか？読み込みをやっているindex.html,style.cssの詳細を記載してください

hallen0225

2021/06/07 13:29 編集

CSSの方に間違いがある可能性も高いので、HTML、CSSのソースを全文掲載頂けると助かります。（追記）いただいた情報を見る限り、HTMLの方は問題なさそうです。

hallen0225

2021/06/07 13:56 編集

追記ありがとうございます。ただ、CSSが全文ないため判断できませんし、画像を添付いただいてもこちらで再現するのは困難です。（画像を見ながら文字を手打ちしなければならないので） CSSを「全文」、テキストで提示いただけますでしょうか？？ ※CSSは、「どこか一か所でも」文法が間違っていると適用されません。

hallen0225

2021/06/07 14:19 編集

更に追記いただきありがとうございました。言葉足らずだったのですが、HTMLも全文いただけますか？（CSSの文法はあっていそうです）あと、具体的にどの要素がどうなってほしいのか教えていただけると助かります。「CSSのシートが読み込まれていない」のではなく、「あなたが意図した表示になるようなCSSを書けていない」可能性が出てきました。 ※ソースコードを書くときは、前後を「```」で囲っていただけると読みやすくなります。

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

回答1件

ベストアンサー

提示いただいたソースコードを、手元で再現してみました。
こちらでは正しく表示されているように見えます（画像をご参照ください）

原因は分かりませんが、

ファイルは保存されているか
ブラウザで表示しているファイルは正しいか

確認されてみてください。
（追記：Shift+F5で強制リロードしてみるのもよさそうです）

投稿2021/06/07 14:38

編集2021/06/07 14:43

hallen0225

総合スコア587

mayuka_passion

2021/06/07 21:28

ありがとうございました！できました！ファイルが保存されていなかったようです。自動保存の設定になっているので勝手に保存されていると思っていましたが、今朝VSコードを開いたら上書きするか別ファイルにするかのポップアップが表示され、上書きしたら反映されました。初心者なので大変助かりました。改めてありがとうございます！

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