cssを反映させたい。

HTML CSSのきほんという本で勉強中です。
本の説明ではcssをこのように書くと反映されて
トップ画面等の背景がグレーになりNwsehaブルーグレーになるそうですが反映されません。
フォルダやファイルの階層が違うのかといろんなところに置いてやっていますが
変わりません。
cssを反映させたいです。

KUJIRA CAFEのフォルダの中に
images
menu-photo1.jpgなどの画像ファイルが並び
menu.htmlなどのページがこの下にいくつか並んでいます。

style.cssの中身です。

@charset "UTF-8";

/すべてのWEBページに適用される/
html{
font-family: sans-serif;
}
html * {
box-sizing: border-box;
}

body{
background-color: #eeece9;
}

h2{
color: #3f5170;
font-size: 22px;
border-bottom: 3px dotted #3f5170;
}

@charset "UTF-8";

/すべてのWEBページに適用される/
html{
font-family: sans-serif;
}
html * {
box-sizing: border-box;
}

body{
background-color: #eeece9;
}

h2{
color: #3f5170;
font-size: 22px;
border-bottom: 3px dotted #3f5170;
}

menu.htmlのファイルの中身です。

<!DOCTYPE html> <html> <head> <meta charest="UTF-8"> <title>メニュー｜KUJIRA Cafe</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="wrapper">  <header class="header"> <h1 class="logo"><a href="index.html"><img src="images/logo.png" alt="KUJIRA Cafe"></a></h1> <nav class="nav"> <ul> <li><a href="index.html">ホーム</a></li> <li><a href="about.html">店舗案内</a></li> <li><a href="access.html">アクセス</a></li> <li><a href="menu.html">メニュー</a></li> <li><a href="contact">お問い合わせ</a></li> </ul> </nav> </header>   <main> <h2>メニュー</h2> <div class="menu-block"> <div class="menu-item"> <div class="menu-photo"> <img src="images/menu-photo1.jpg" alt=""> </div> <div class="menu-text"> <h3>カシスとオレンジのジュース</h3> <p>リキュールを使ったカクテルでおなじみのカシスは、ポリフェノールやビタミンが豊富なベリー系のフルーツです。オレンジとともにジューサーにかけて、爽やかなドリンクに仕上げました。 </p> <p>¥480-</p> </div> </div>

          <div class="menu-item">
                <div class="menu-photo">
                      <img src="images/menu-photo2.jpg" alt="">
                </div>
                <div class="menu-text">
                  <h3>ナッツのタルト</h3>
                  <p>ピ-カンナッツにアーモンド、くるみ、ヘーゼルナッツ、パンプキンシード5種類のナッツを贅沢にトッピングした当店の定番タルトです。黒糖を使用したコクのある甘味は、コーヒーのお供にぴったりです。</p>
                  <p>&yen;550-</p>
                </div>
            </div>

          <div class="menu-item">
                  <div class="menu-photo">
                        <img src="images/menu-photo3.jpg" alt="">
                  </div>
                  <div class="menu-text">
                  <h3>太陽プラムのタルト</h3>
                  <p>今月の旬のタルトはこちら。山梨産のプラム「太陽」を使用しています。太陽は、完熟すると酸味が抜けて、驚くほど甘くなります。クリームチーズを混ぜ込んだフィリングとも相性抜群。この時期だけの味、ぜひお試しください。</p>
                  <p>&yen;600-</p>
                  </div>
            </div>
      </div>
  </main>
  <!--メインここまで -->
  <!--フッダー -->
  <footer class="footer">
        <p>&copy;Copyright KUJIRA Cafe. All rights reserved.</p>
  </footer>
  <!--フッダーここまで -->

</div> </body> </html>

m.ts10806

2018/06/27 04:16

1つ前の質問でも指摘しましたが、プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入（エラーメッセージの場合は不要）の手順で「コードハイライト化」してください。（質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください）

m.ts10806

2018/06/27 04:17

質問は編集できます（例え解決済みのものであっても何度でも）　質問を見やすくすることはスムーズな解決につながります。特にコードは回答者が再現確認を行うことが多いです。コードブロックで囲うことでボタン1つでコピーが容易となり、見やすくもなるので解決も早まります。というか、最初の内は質問テンプレートを使ってください。https://teratail.com/help/question-tips#questionTips3-8

m.ts10806

2018/06/27 04:33

@charset が2回されていますが何か意図があるのでしょうか。参考書をそのままコピペを批判するつもりはないですが、結局自身が書くコードなので、それぞれきちんと意図を以て書くようにしてください。意味も分からずただ置いているだけではおそらくやりたいことはできません。

yoshinavi

2018/06/27 04:43

「mts10806」さんのご指摘部分は、teratailでより良い回答を得る為に必要となりますので、実行してみてください。　また、過去の質問からもヒントは得れると思いますので、過去の質問も検索されることをオススメします。　（過去質問の参考：https://teratail.com/questions/131691）

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

回答3件

ぱっと思いつく限りでは
・CSSが読み込まれいない
・要素にスタイルが当たっていない
・ブラウザにキャッシュが残っていて変更が反映されていない
ですかね
いずれにしろChromeの開発者ツールで確認ができます。
NetworkとかElementを見たり、キャッシュ消したりして試してみてください

投稿2018/06/27 04:35

trewa-nek9585

総合スコア116

フォルダやファイルの階層が違うのかといろんなところに置いてやっていますが

ということなので、ファイルの置き場所、指定の仕方に関する回答をしておきます。

<link rel="stylesheet" href="css/style.css">
という指定の場合、そのhtml（menu.html）から見て同じ階層の「css」というフォルダの中のstyle.cssを読み込むということです。

この状態↓

[KUJIRA CAFE]フォルダ
 ┣ index.html
 ┣ menu.html
 ┣ [css]フォルダ
 ┃   ┗ style.css
 ┗ [images]フォルダ
      ┣ menu-photo1.jpg
      ┗ menu-photo2.jpg

画像の指定の時にも気にしなければいけないのですが、相対パス・絶対パスというキーワードを覚えておいてください。
参考
絶対パス、相対パス、フルパス、path？
CSSはどこに書く？外部CSSファイルの読み込み方＆インラインでの書き方
これが理解できれば、「いろんなところに置く」必要はありません。

たとえば構造が下記の場合だと、<link rel="stylesheet" href="style.css">になります。

[KUJIRA CAFE]フォルダ
 ┣ index.html
 ┣ menu.html
 ┣ style.css
 ┗ [images]フォルダ
      ┣ menu-photo1.jpg
      ┗ menu-photo2.jpg

「自分の場所」を./と表し、<link rel="stylesheet" href="./css/style.css">や<link rel="stylesheet" href="./style.css">と書くこともあります。

置き場所、指定方法に問題が無ければ、キャッシュが残っているとか、更新（変更保存）したのが別のファイルだったとかかもしれません。

投稿2018/06/27 04:53

dit.

総合スコア3235

princess_usagi

2018/06/27 10:29

ありがとうございます。 <link rel="stylesheet" href="./style.css">と４ページ全部に入力し直ししたら１部反映されました。。index.htmlとmenu.htmlは反映されましたがabout.htmlとaccess.htmlは白いままで反映されませんでした。cssは全部のページに反映されるんですよね？ちなみに階層ですがこのようになっています。本からDLできるようになっていてサンプルをアトムに載せてしまい、もう１つ下の層からいれればよかったのかなと思い、imagesファイルを入れました。ダブっています。。ダブっているのをなんとかしてシンプルにしたいのですが、今からサンプルフォルダを削除したら、下にあるabout.htmlとかaccess.htmlとかindex.htmlとか消えてしまいますか？サンプルからresult.htmlまで消したいのですが大丈夫でしょうか？about.htmlは消したくないんです。アトムの左の部分projectの部分です。 KUJIRA CAFE images about-photo.jpg footer-bg.png map.png menu-bg.png menu-photo1.jpg サンプル extra csssample.html Site アプリケーションサイト作成素材画像 about-photo.jpg footer-bg.png map.png menu-bg.png menu-photo1.jpg result.html about.html access.html index.html menu.html style.css

dit.

2018/06/27 14:50

とりあえず、まずは質問を編集してコード部分を見やすくしましょう。修正依頼でも指摘されていますね。 CSS部分を選択して<code>ボタンを押す。 HTML部分も同じように。まずはmenu.htmlだけで良いです。次に、フォルダとファイルの構成が文字だと分かりづらいので、ファイル構成がわかるようなスクリーンショットを貼ってください。質問欄に画像を貼る機能があります。サンプルフォルダについてはひとまず置いておきます。今はmenu.htmlとstyle.cssの関係だけを考えましょう。 menu.htmlが思った通りの動作をして、他のhtmlがダメだった時は記述方法に違いはないか、ファイルの位置関係に違いはないかを確認することになります。

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

CSSやHTMLのソースを記入する時は、<code>ボタンの書式で記入すると見やすくなりますよ。

menu.htmlに記述されている、

投稿2018/06/27 04:11