質問: 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のファイルの中身です。 メニュー|KUJIRA Cafe ホーム 店舗案内 アクセス メニュー お問い合わせ メニュー カシスとオレンジのジュース リキュールを使ったカクテルでおなじみのカシスは、ポリフェノールやビタミンが豊富なベリー系のフルーツです。オレンジとともにジューサーにかけて、爽やかなドリンクに仕上げました。 ¥480- ナッツのタルト ピ-カンナッツにアーモンド、くるみ、ヘーゼルナッツ、パンプキンシード5種類のナッツを贅沢にトッピングした当店の定番タルトです。黒糖を使用したコクのある甘味は、コーヒーのお供にぴったりです。 ¥550- 太陽プラムのタルト 今月の旬のタルトはこちら。山梨産のプラム「太陽」を使用しています。太陽は、完熟すると酸味が抜けて、驚くほど甘くなります。クリームチーズを混ぜ込んだフィリングとも相性抜群。この時期だけの味、ぜひお試しください。 ¥600- ©Copyright KUJIRA Cafe. All rights reserved.
回答: > > フォルダやファイルの階層が違うのかといろんなところに置いてやっていますが > > > ということなので、ファイルの置き場所、指定の仕方に関する回答をしておきます。 `` という指定の場合、その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ファイルの読み込み方&インラインでの書き方 これが理解できれば、「いろんなところに置く」必要はありません。 たとえば構造が下記の場合だと、``になります。 ``` [KUJIRA CAFE]フォルダ ┣ index.html ┣ menu.html ┣ style.css ┗ [images]フォルダ ┣ menu-photo1.jpg ┗ menu-photo2.jpg ``` 「自分の場所」を`./`と表し、``や``と書くこともあります。 置き場所、指定方法に問題が無ければ、キャッシュが残っているとか、更新(変更保存)したのが別のファイルだったとかかもしれません。