[至急教えてください！]cssが反映されない理由がわかりません

cssが反映されない理由がわかりません

発生している問題・エラーメッセージ

cssが反映されません

該当のソースコード


<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Pacifico|Satisfy|Stoke|Yellowtail|Geo|Oswald|Lobster"rel="stylesheet"
  type="text/css">
</head>

<header>
    <h1>BE <span class="aka">B</span>LUES!
    <span class="subtitle">～青になれ～</span></h1>
    <div class="menu">
    <label for="mn01">MENU</label>
        <input type="checkbox" id="mn01" class="accordion" />
        <ul id="link01">
        <li><a href="#about">ABOUT</a></li>
        <li><a href="#story">STORY</a></li>
        <li><a href="#character">CHARACTER</a></li>
        </ul>
    </div>
    </header>
    
    <div class="out">
      <img src="img/01.JPG">
        <input type="radio" name="slide" id="s1">
        <input type="radio" name="slide" id="s2">
        <input type="radio" name="slide" id="s3">
        <div class="in">
            <label for="s1"><span></span><a href="#1"><img src="img/301.JPG"></a></label>
            <label for="s2"><span></span><a href="#2"><img src="img/102.JPG"></a></label>
            <label for="s3"><span></span><a href="#3"><img src="img/103.JPG"></a></label>
        </div>
    </div>
    
    <section class="about" id="about">
        <h2 class="title">A<span class="aka">B</span>OUT</h2>
           <img src="img/04.JPG" width="200" >
        作者田中モトユキ<br>
        出版社小学館<br>
        第一巻発行日　2011年6月22日
    </section>

<section class="story" id="story">
    <h2 class="title">S<span class="aka">T</span>ORY</h2>
    <div class="syougaku">
        <span class="syougaku2">小学編</span>
    将来のサッカー日本代表入りを夢見る小学生の<span class="charaname">一条龍</span>は全日本少年サッカー大会での優勝を目指し、幼馴染で双子の<span class="charaname">青梅優人</span>と<span class="charaname">青梅優希</span>らとサッカーに熱中している。龍は大浦SCのエースとして埼玉県予選に出場して優勝を果たし、 Jリーグクラブのユースチームのスカウトから注目を集める。その帰り道、龍は交通事故に巻き込まれそうになった優人を庇おうとした勢いで道路脇の階段から転落し、選手として致命的な重傷を負う。
    </div>
    
    <div class="tyuugaku">
        <span class="tyuugaku2">中学編</span>
    それから2年後、リハビリを乗り越えた龍は地元の大浦東中学校のサッカー部に入部。
    当初はブランクの影響もあり完全復活を果たせずにいたが、
    徐々に感覚を取り戻しチームメイトの<span class="charaname">宮崎隼斗</span>や<span class="charaname">諸星美起也</span>らとの信頼が芽生えていく。
    中学3年生の夏、龍の父親がインドネシアに転勤することになり、母親から同行するように求められる。
    このことを知った優人や隼斗たちは「龍の存在をサッカー関係者が知れば、両親もインドネシア行きを考え直す」と結束し、
    中学生最後の高円宮杯への出場に挑む。
    大浦東イレブンは県大会出場を果たし、強豪の麻倉を相手に健闘するもののPK戦の末に敗れる。
    その帰り道、龍は母親に「これから必要なことは日本でサッカーに打ち込むことであり、インドネシアに向かうことではない」
    という旨を伝える。
    </div>
    
    <div class="koukou">
        <span class="koukou2">高校編</span>
    龍は両親と離れ青梅家に居候しながら、優人や優希とともに埼玉県の強豪校・武蒼高等学校へ通学することになる。
    小学生時代からのライバルの<span class="charaname">渡辺健太</span>や<span class="charaname">桜庭巧美</span>いった同級生や、U-17日本代表の<span class="charaname">橘怜音</span>らとチームメイトとなり、
    高校サッカーの舞台へと挑む。
    プリンスリーグで好成績を収めるなどチームは順調に仕上がり、高校選手権予選に向けて手ごたえを感じている矢先、
    監督の黒部が学校を去ることになる。新監督としてミルコ・コヴァッチが就任し新体制のもとで様々な混乱が起こるが、
    部員たちは新たな自信を身につけ高校選手権予選に挑む。
    予選を順当に勝ち上がり、全国まであと一勝に迫った武蒼イレブンは決勝戦で宿敵・聖和台高校との対戦を迎える。
    </div>
</section>
</html>

html,
body {
  height: 100%;
}

body {
  height: 100%;
    font-family: 'Fraunces', serif;
    font-family: 'Hachi Maru Pop', cursive;
}

button {
  outline: none;
  border: none;
}

h1{
    color: #ffffff;
    font-family: impact;
    font-size: 80px; 
    margin-top: 0px;
    text-align: left;
    margin-bottom: 0px;
}

.aka{
  color:red;
}

h1 .subtitle{
    font-size: 50px;
}

header{
    background: #3366cc;
    padding: .5rem;
    text-align:left;
}

.menu{
    
}

.menu a{
    display: block;
    padding: 15px;
    text-decoration: none;
    color: #fff
}

label{
    font-family: impact;
    display: block;
    margin: 0 0 4px 0;
    padding: 15px;
    line-height: 1;
    color: #3366cc;
    font-size: 50px;
    background-color: #ffffff;
    cursor: pointer;
}

label:hover{
    color: #ffcc33;
}

input{
    display: none;
}

.menu li{
    font-family: impact;
    height: 0;
    overflow: hidden;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    -ms-transition:all 0.5s;
    -o-transition:all 0.5s;
    transition: all 0.5s;
    font-size: 35px;
}

#mn01:checked ~ #link01 li

{
    height: 54px;
    opacity: :1;
}

.out{
    position: relative;
}

.in img{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: .5s;
    z-index: 0;
}

img{
    display: block;
    width: 100%;
    height: auto;
}

input{
    display: none;
}

.in{
    display: flex;
    justify-content: center;
}

label span{
    display: block;
    width: 15px;
    height: 15px;
    padding: 7px;
    margin: -40px 0 0;
    border-radius: 100%;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

label span::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #3366cc;
    opacity: 0.5;
    border-radius: 100%;
}

input:nth-of-type(1):checked ~ .in label:nth-of-type(1) span::before,
input:nth-of-type(2):checked ~ .in label:nth-of-type(2) span::before,
input:nth-of-type(3):checked ~ .in label:nth-of-type(3) span::before{
    background: #fff;
    opacity: 1;
}

label span::before{
    animation: slidebutton 14s infinite;
}

@keyframes slidebutton{
    0%{
        opacity: 0.5;
        background: #3366cc;
    }
    3.5%{
        opacity: 1;
        background: #fff;
    }/*b÷x×100=y*/
    25%{
        opacity: 1;
        background: #fff;
    }/*100÷c=z*/
    28.5%{
        opacity: 0.5;
        background: #3366cc;
    }/*y+z*/   
}

label:nth-of-type(2) span::before,label:nth-of-type(2) img{
    animation-delay: 3.5s;
}

label:nth-of-type(3) span::before,label:nth-of-type(3) img{
    animation-delay: 7s;
}

input:nth-of-type(1):checked ~ .in label:nth-of-type(1) img,
input:nth-of-type(2):checked ~ .in label:nth-of-type(2) img,
input:nth-of-type(3):checked ~ .in label:nth-of-type(3) img{
    opacity: 1;
    z-index: 1;
}

.in img{
    animation: slide 14s infinite;/*(a+b)×c=x*/
    opacity: 0;
}

@keyframes slide{
    0%{opacity: 0;}
    3.5%{opacity: 1; z-index: 1;}/*b÷x×100=y*/
    25%{opacity: 1;}/*100÷c=z*/
    28.5%{opacity: 0; z-index: 0;}/*y+z*/
}

input:checked ~ .in img,input:checked ~ .in span::before{
    animation: none;
}

.in:hover img,.in:hover span::before{
    animation-play-state: paused;/*マウスを乗せると一時停止*/
}

h2{
    font-family: impact;
    position: relative;
    padding: 1rem 2rem;
    border-bottom: 6px solid #3366cc;
    color: #3366cc;
    margin: 0px;
    font-size: 70px;
}

h2:before{
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 20%;
    height: 6px;
    content: "";
    background: #75a9ff;
}

a:hover{
    color: #ffcc33;
}

.about img{
    float: right;
    width: 600px;
    margin-top: 10px;
    
}

.about{
    font-size: 40px;
    font-weight: 900;
    margin-bottom: 50px;
}

.charaname{
    font-weight: 900;
}

.story{
    font-size: 30px;
}

/* スマート　囲み枠　2 */
.syougaku {
 position: relative;
 margin: 2em auto;
 padding: 3em 1em .8em;
 width: 90%; /* ボックス幅 */
 border-style: solid;
 border-width: 5px 0 0 0;
 border-color: #3366cc; /* 枠の色 */
 background-color: #d9e5ff; /* 背景色 */
 color: #666; /* テキスト色 */
 box-shadow: 0 0 3px #999; /* 影の色 */
    font-size:20px;
}
.syougaku2{
 position: absolute;
 top: 8px;
 left: 15px;
 background-color: #d9e5ff; /* タイトル背景色 */
 color: #3366cc; /* タイトル色 */
 font-size: 1em;
 font-weight: bold;
 border-style: none none double;
 border-color: #3366cc; /*タイトル下線 */
 border-width: 3px;
}

/* スマート　囲み枠　2 */
.tyuugaku {
 position: relative;
 margin: 2em auto;
 padding: 3em 1em .8em;
 width: 90%; /* ボックス幅 */
 border-style: solid;
 border-width: 5px 0 0 0;
 border-color: #3366cc; /* 枠の色 */
 background-color: #d9e5ff; /* 背景色 */
 color: #666; /* テキスト色 */
 box-shadow: 0 0 3px #999; /* 影の色 */
     font-size:20px;
}
.tyuugaku2{
 position: absolute;
 top: 8px;
 left: 15px;
 background-color: #d9e5ff; /* タイトル背景色 */
 color: #3366cc; /* タイトル色 */
 font-size: 1em;
 font-weight: bold;
 border-style: none none double;
 border-color: #3366cc; /*タイトル下線 */
 border-width: 3px;
}

/* スマート　囲み枠　2 */
.koukou {
 position: relative;
 margin: 2em auto;
 padding: 3em 1em .8em;
 width: 90%; /* ボックス幅 */
 border-style: solid;
 border-width: 5px 0 0 0;
 border-color: #3366cc; /* 枠の色 */
 background-color: #d9e5ff; /* 背景色 */
 color: #666; /* テキスト色 */
 box-shadow: 0 0 3px #999; /* 影の色 */
     font-size:20px;
}
.koukou2{
 position: absolute;
 top: 8px;
 left: 15px;
 background-color: #d9e5ff; /* タイトル背景色 */
 color: #3366cc; /* タイトル色 */
 font-size: 1em;
 font-weight: bold;
 border-style: none none double;
 border-color: #3366cc; /*タイトル下線 */
 border-width: 3px;
}

fumu7

2021/01/16 08:01

該当のソースコードの .html ファイルと、"style.css"ファイルは、同じフォルダーの中に入っていますか？異なるフォルダーに入っているために、"style.css"ファイルを読み込むことができないので、"style.css"ファイルが反映されないのではないかと想像します。

m.ts10806

2021/01/16 08:23 編集

>[至急教えてください！] この手の煽り文句は逆効果です。それに1分1秒争うのであれば、いつだれが見るとも分からない赤の他人の無責任な反応に身を委ねるのは悪手でしかありません。それに、「急ぐ」と書く人は大抵要件が曖昧だったり情報が不十分だったりで至急応えられるような内容になってません。

m.ts10806

2021/01/16 08:41

このコメント欄に指摘がある場合、回答見るより先に質問編集して対応されたほうが良いかと思います。質問は編集できます。

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

回答2件

ベストアンサー

手元で試したら、綺麗に反映されていますよ！

html と css の各ファイルの置き場所が異なるのではないかと思いますので、格納先を確認してください。

＜追記＞

html
1  <link href="https://fonts.googleapis.com/css?family=Pacifico|Satisfy|Stoke|Yellowtail|Geo|Oswald|Lobster"rel="stylesheet"
2  type="text/css">

　↓　　※ rel の直前に半角スペースを入れておきましょう。処理に影響しませんが、念のため。

html
1  <link href="https://fonts.googleapis.com/css?family=Pacifico|Satisfy|Stoke|Yellowtail|Geo|Oswald|Lobster" rel="stylesheet"
2  type="text/css">

投稿2021/01/16 07:55

編集2021/01/16 08:04

_whitecat_22

総合スコア1305

username_

2021/01/16 08:40

返信ありがとうございます。それぞれの指定していたものと、実際のファイル名が異なっていたためうまく反映されていなかったようです。

_whitecat_22

2021/01/16 08:41

そうでしたか。でも、解決できてよかったです。^^ お役に立てて嬉しく思います。

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

当該.htmlファイル、および.cssファイルをローカル環境で読み込んでみたところ正常（と思われる）に表示されました。

おそらくですが、.htmlファイルから.cssファイルを指定するパスに問題があるのではないでしょうか？

以下パスは合っていますか？

css
1<link rel="stylesheet" href="style.css">

投稿2021/01/16 07:49

AGadget

総合スコア60

username_

2021/01/16 07:55

合っていました。

AGadget

2021/01/16 08:02

そうですか……。そうなると読み込んだ.cssファイルなどがキャッシュ（だったっけな？）に残っているのかもしれません。ページをリロードするときにCtrlキーを押しながらF5キーを押して、スーパーリロード（強制リロード）を実行してみてください。それでも反映されないとなると、ちょっと原因が思いつかないですね。

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

あなたの回答