ＣＳＳが急に適用されなくなってしまいました。

前提・実現したいこと

ＨＴＭＬ、ＣＳＳを始めたばかりの者です。

現在、ＩＳＡＲＡのＨＰにてサイト模写を初めて取り組んでいます。昨日まででヘッダー → キービジュアルまでは大体似たようなイメージで再現できかけていたのですが、本日朝ＰＣを再起動して確認するとＣＳＳが一切効いていない状態になっていました。

これまでの作成時の手順として、HTMLファイルを一通り作成し終えた後、ＣＳＳの作成に取りかかっていましたが、
現状エラーにより、以下のとおりです。ＣＳＳ適用前のＨＴＭＬのみ適用された体裁に戻ってしまっています。
↓↓

検証サイトで確認すると、ＣＳＳで作成したセレクタ、プロパティが一切表示されていません。
element.style {
}に記述した内容は反映されたので、ＣＳＳの読み込み自体は正常作動しているということになるのでしょうか？

やはりＣＳＳの内容のどこかにエラーがあるのでしょうか？
宜しければ、どなたかご教授頂ければ幸いです。勉強不足でうまく説明できなくて申し訳ありません。

該当のソースコード

```ここに言語名を入力``````````````````
ＨＴＭＬ　全文




<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
    <title>iSara[イサラ]｜バンコクのノマドエンジニア育成講座</title>
    <link rel="icon" href="img/favicon.ico">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="css/style.css">
  </head>
  
<body>
  <!-- ヘッダー -->
 <header class="header">
    <div class="inner">
        <h1 class="logo">        
          <img src="img/isaralogo.png" alt="iSara">
            <span>
              バンコクのノマドエンジニア育成講座  
            </span>
        </h1>
      <p class="btn">
        <a href="#">お問い合わせ / 資料請求はこちら</a> 
      </p>
      <div class="btn_sm">
        <p>
        <img src="img/form.png" alt="お問い合わせ">
        資料請求
        </p>
      </div>
    </div>
  </header>

  <!-- キービジュアル -->

  <div class="key-visual">
      <div class="key-visual_ttl">
        <div class="key-explanation">
          <!-- ① -->
          <h2>プログラミングで<br>
            人生の安定を手にいれよう</h2>
            <!-- ② -->
          <p class="key-img"><img src="img/isaralogolarge.png" alt="iSara_large"></p>
          <!-- ③ -->
          <p class="key-sub">バンコクのノマドエンジニア育成講座<br>
            <span>iSara[イサラ]</span></p>
        </div>
    </div>
  </div>
  
  <main class="main">
    <section class="sec01">
        <h3 class="sec01_h">まずは２０日間で、<br>
        月１０万円稼げるスキルを手にいれよう。</h3>
        <p class="price0">※受講料金は実質０円です。詳しくは資料請求をどうぞ。</p><br>
        <p class="btn"><a href="#">お問い合わせ / 資料請求はこちら</a> </p>
        <ul>
          <li>第６期生：2019年11月25日 ~ 2019年12月14日＊締め切りました</li>
          <li>第７期生：2020年2月17日 ~ 2020年3月7日＊締め切りました</li>
          <li>第8期生：2021年の2月 ~ 3月ごろを予定＊資料請求受付中です</li>
        </ul>
      </section>

      <section class="sec02">
      </section>
    </main>
    
    <!-- フッター -->
    <footer class="footer">
      <p><small>
        バンコクのノマドエンジニア育成講座、iSara[イサラ] <br>
        Copyright ©︎ iSara All Rights Reserved.</small></p>
        
        <p>Designed by Maya Ogi / Developed by Kentaro Koga</p> 
      </footer>
    </body>
    </html>


```ここに言語名を入力```````````````````````````
CSS　全文

@charset "utf-8";

/* ------------------リセットＣＳＳ------------------ */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

body {
line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}

nav ul {
list-style:none;
}

blockquote, q {
quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}

a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}

/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}

del {
text-decoration: line-through;
}

abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}

table {
border-collapse:collapse;
border-spacing:0;
}

/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}

input, select {
vertical-align:middle;
｝
/* ------------------ここまでリセットＣＳＳ------------------ */

/* ------------------ここからＣＳＳ記述------------------ */
body{
color: #333333;
font-size: 14px;
line-height: 1.6;
font-family: "�q��M�m�p�S Pro W3", "Hiragino Kaku Gothic Pro", "��C��I", Meiryo, Osaka, "�l�r �o�S�V�b�N", "MS PGothic", sans-serif;
}

.main{
background-color: gray;
}
.sec01{
background-color:#EBB94D;
}
.header{
position:fixed;
z-index: 10;
width: 100%;
height:75px;
background-color:#fff;
text-align: right;
margin:0 auto;
}

.header .inner{
/* 起点をdiv innerに指定する /
max-width: calc(100% - 20px);
position:relative;
width:1170px;
margin:0 auto;
padding: 20px 0;
height:35px;
/ background-color: #ddd; */
}

.header .logo{
/* 起点から以下のＰＸ動かす */
position:absolute;
top:8px;
left:0;
}

.header .logo img{
position:relative;
top:7px;
width:127px;
}

.header .logo span{
position:relative;
bottom:2px;
margin-left:3px;
letter-spacing: 1.3px;
}

.btn{
display:inline-block;
}

.btn a{
display:block;
height:45px;
line-height: 45px;
padding:0 40px;
color:white;
background-color: #DA6B64;
border-radius: 23px;
text-decoration: none;
letter-spacing: 1.5px;
}

.btn a:hover{
background-color: #D94940;
}

.btn_sm{
font-size:20px;
display:none;
}

.key-visual{
text-align: center;
height:500px;
display:flex;
justify-content: center;
align-items: center;
padding-top:75px;
}

.key-visual_ttl{
background-image: url("../img/main.jpg");
background-position: center;
background-size: cover;
height:500px;
width:100%;
margin:0 auto;
}

.key-visual_ttl h2{
position: relative;
top: -2px;
font-size: 28px;
font-weight: bold;
line-height: 55px;
letter-spacing: 1.5px;
}

.key-explanation{
position: relative;
top: 89px;
}

.key-img img{
position: relative;
width: 317px;
height: 110px;
top: 3px;
}

.key-visual .key-sub{
position: relative;
top: 35px;
font-size: 20.5px;
font-weight: bold;
letter-spacing: 1px;
line-height: 22px;
}

.key-sub span{
letter-spacing:1.2px;
}

.main{
text-align: center;
background-color:#EBB94D;
}
.sec01_h{
color: #fff;
padding: 30px 0 15px 0;
font-size: 20px;
letter-spacing: 1.5px;
}

.sec01 .price0{
display: inline-block;
font-size: 1.3vw;
color: #e7455a;
background-color: #fcfcfe;
line-height: 23px;
font-weight: bold;
padding: 0;
margin:0 auto 50px auto;
border-radius: 6px;
font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
/* display: inline-block; */
}

.sec01 .btn{
height:100px;
line-height:100px;；
}

.sec01 a{
height:50px;
line-height: 80px;
}

.sec02{
height:500px;
}

/* --------------メディアクエリによるレスポンシブ化--------------- */
@media screen and (max-width: 768px){
.header{
height:62px;
}
.header .inner{
height: 62px;
margin:0;
padding:0;
max-width: 100%;
}
.header .logo{
text-align:left;
height:63px;
width: 190px;
}
.header .logo img{
top:17px;
left:10px;
width:90px;
height:30px;
}

.inner .logo span{
    position: absolute;
    display:block;
    top: 0px;
    left: 7px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0px;
}

.btn{
   display: none; 
}
.btn_sm{
    display:block;
    position:absolute;
    font-size: 13px;
    text-align:center;
    letter-spacing:1px;
    color:#fff;
    right:0;
    background-color:#DA6B64;
    width:76px;
    height:62px;
    padding: 0;
}
.btn_sm img{
    display:block;
    width:20px;
    margin:9px auto 0 auto;
}


/* キーヴィジュアル */
.key-visual{
    /* background-color:lightblue; */
    /* ../は上のふぉるだ階層の意 */

    text-align: center;
    height:310px;
    display:flex;
    justify-content: center;
    align-items: center;  
    padding-top:62px;
}
.key-visual_ttl{
    background-image: url("../img/mainsp.jpg");
    /* background-position: center; */
    /* background-size:  cover; */
    height:310px;
    /* width:100%; */
    margin:0 auto;
}
.key-explanation {
    top:15px;
}

.key-explanation h2{
    font-size:18px;
    line-height:29px;

}

}

試したこと

ここに問題に対して試したことを記載してください。

↓　ｃｓｓの読み込み文に誤字が紛れ込んだかと思い確認しましたが、リンクは
間違っていないのかなと思いました。
<link rel="stylesheet" href="css/style.css">

ネットの調べるとブラウザに残ったキャッシュ残存が原因で似たエラーが起こることがあると記述があり、google chromeのキャッシュを削除し、再度読み込みを試しましたが変化はありませんでした。

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

ブラウザー：Google Chrome
テキストエディタ：VSCODE
駄文ですみません。

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

回答1件

ベストアンサー

今まで適用されてて、途中でされなくなったんですよね？

であれば、CSSの何処かに}が2重になっているとか}が無いとかだと思いますよ

ブラウザを別のヤツで見てみるのも不具合解決の手段です
ブラウザに起因するものなのか？そうでないのか？の切り分けが出来ます

CSSが原因だと仮定して
とりあえず、現在のCSSをバックアップしてから
ファイルの中を全部消して

単純なCSSコードだけを書き込んで適用されるか？
（背景が真っ黒になるとか真っ白になるとか）

適応されなければ、CSSのファイルパスが怪しくなります

適応されたら元のCSSを1/5くらい書き込んで不具合が出るか？確かめる

これを5/5まで繰り返せば、どのあたりにバグがあるか？解ると思いますよ

投稿2020/12/29 06:29

AMK

総合スコア765

退会済みユーザー

2020/12/29 07:05

おっしゃっている通り、リセットＣＳＳをごっそり取り除いたら、９割方元の状態に復旧できました。どうやらリセットＣＳＳの記述部に誤字があったみたいです。エラーが起こった時に余計にエラー解決に時間がかかってしまうので、今度からは多少手間だとしても、ＣＳＳ、ＨＴＭＬ更新時には小まめなバックアップを心がけようと思います。大変参考になり、勉強になりました、回答いただきどうもありがとうございました！

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