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

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

ただいまの
回答率

87.95%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 207
退会済みユーザー

退会済みユーザー

前提・実現したいこと

HTML、CSSを始めたばかりの者です。

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

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

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

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

該当のソースコード

HTML 全文

````````````````````````````````````

<!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">まずは20日間で、<br>         月10万円稼げるスキルを手にいれよう。</h3>         <p class="price0">※受講料金は実質0円です。詳しくは資料請求をどうぞ。</p><br>         <p class="btn"><a href="#">お問い合わせ / 資料請求はこちら</a> </p>         <ul>           <li>第6期生:2019年11月25日 ~ 2019年12月14日*締め切りました</li>           <li>第7期生: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";

/* ------------------リセットCSS------------------ */
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;
}            
/* ------------------ここまでリセットCSS------------------ */

/* ------------------ここからCSS記述------------------ */
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{
/* 起点から以下のPX動かす */
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;

}
}

試したこと

ここに問題に対して試したことを記載してください。
イメージ説明
   
↓ cssの読み込み文に誤字が紛れ込んだかと思い確認しましたが、リンクは
間違っていないのかなと思いました。
<link rel="stylesheet" href="css/style.css">

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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

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

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

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

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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/12/29 16:05

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

    キャンセル

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

  • ただいまの回答率 87.95%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る