【CSS】設定項目が適用されない。DevToolsに表示されない。

解決したい課題

CSSで記述したhtml{}の設定を適用させたい。

@charset "utf-8";

html {
  height: 100%;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}
以下省略
・
・
・
・

現状

・height: 100%;は適用されている○
・font-family: Arial, Helvetica Neue, Helvetica, sans-serif;は適用されていない✖
・font-size: 14px;は適用されていない✖

デベロッパーツールでの表示

どうゆうわけか、
height: 100%;のみ表示され、それ以外の設定は表示されていない。

試したこと5点

①CSSファイルは読み込めているかな？
→他の設定は反映されている。
→パスも確認したが正しい。

②キャッシュが原因かな？
→スーパーリロードしたけど変化なし。

③CSSは機能しているかな？
→htmlに<script>で記述したら適用された。CSSだと適用されない。

④他の記述が優先されていないかな？
→そもそも設定項目が表示されていない。

⑤書いたCSSがちゃんと確認できるかな？
→他の設定項目は適用されている。
→セレクタ名も正しい。

html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>TEST1サイト</title>
    <link rel="stylesheet" href="../css/styles.css">
    <meta name="description" content="テスト">
    <link rel="icon" href="../img/favicon.ico">
  </head>

  <body>
    <header>
      <nav>
        <ul class="nav">
          <li><a href="index.html">TEST1</a></li>
          <li><a href="test2.html">TEST2</a></li>
          <li><a href="test3.html">TEST3</a></li>
          <li><a href="test4.html">TEST4</a></li>
          <li><a href="test5.html">TEST5</a></li>
          <li><a href="test6.html">TEST6</a></li>
        </ul>
      </nav>
    </header>
    <section class="TEST1">
      <div>
        <h1>TEST1</h1>
        <p>テストテストテストテストテストテストテストテストテストテストテスト</p>
      </div>
    </section>
    <footer>
      <div>
        <p>copyright naru</p>
      </div>
    </footer>
  </body>

  </html>

うーーん、わかりません。
どなたか、詳しい方、上記の情報から何か原因が見つかりましたら、ご連絡いただけませんでしょうか。
よろしくお願いいたします(>_<)

追記

htmlやcssなどを格納しているフォルダを削除しようとしたら以下のエラーがでた。

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

回答1件

ベストアンサー

とりあえずheight: 99%;にして反映するか確認してみてください。

「CSSが適用されない」確認リスト。
0. 当該要素がない
0. HTMLの構文が間違っている（当該箇所だけでなくページ全体を確認）
0. CSSのセレクタが適切でない（当該要素を指定できていない） ※1
0. CSSのほかの指定（or他のCSSファイル）で上書きされている ※1
0. HTML/CSSが保存されていない、サーバへのアップロードに失敗している
0. 外部リンクしているファイルが無い
0. 外部リンクの指定を間違っている（<link rel="stylesheet" href="/path/style.css">の綴りやパス、ファイル名が間違っている）
0. ブラウザに表示している物と別のファイルを編集している（案外よく有る）
0. 不可視文字（制御文字や全角空白）が混入している
0. キャッシュされている（ブラウザ、サーバなど） ※2

※1
【初心者向け！Chromeの検証機能（デベロッパーツール）の使い方】
https://saruwakakun.com/html-css/basic/chrome-dev-tool

※2
【Webブラウザのキャッシュ削除と、スーパーリロード方法一覧 | uzurea.net】
http://uzurea.net/cacheclear-and-superreload-2018/

投稿2020/06/10 03:09

kei344

総合スコア69625

narururu

2020/06/10 03:51 編集

いつもご回答してくださりありがとうございます！kei344さん☺ >とりあえずheight: 99%;にして反映するか確認してみてください。 99%に変更後、DevToolsで確認しましたが、100%のまま反映されませんでした。項目1～10すべて確認しました。特に問題ないです。また、*{}で全体適用されるか、試してみましたがこちらも適用されませんでした。さらに、htmlタグにclass名htmlを付けて、cssで.html{}で記述しても反映されませんでした。不思議です。