cssを反映させたい。
受付中
回答 3
投稿
- 評価
- クリップ 0
- VIEW 1,379
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>¥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>¥600-</p>
</div>
</div>
</div>
</main>
<!--メインここまで -->
<!--フッダー -->
<footer class="footer">
<p>©Copyright KUJIRA Cafe. All rights reserved.</p>
</footer>
<!--フッダーここまで -->
</div>
</body>
</html>
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+4
ぱっと思いつく限りでは
・CSSが読み込まれいない
・要素にスタイルが当たっていない
・ブラウザにキャッシュが残っていて変更が反映されていない
ですかね
いずれにしろChromeの開発者ツールで確認ができます。
NetworkとかElementを見たり、キャッシュ消したりして試してみてください
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+3
CSSやHTMLのソースを記入する時は、<code>ボタンの書式で記入すると見やすくなりますよ。
menu.htmlに記述されている、
<link rel="stylesheet" href="css/style.css">
この行でstyle.cssを読み込む指示になっています。
menu.htmlからみて、同じフォルダの中にあるcssフォルダの中のstyle.cssと言う意味ですが、ファイルは該当の場所に存在していますか？
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+3
フォルダやファイルの階層が違うのかといろんなところに置いてやっていますが
ということなので、ファイルの置き場所、指定の仕方に関する回答をしておきます。
<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">と書くこともあります。
置き場所、指定方法に問題が無ければ、キャッシュが残っているとか、更新（変更保存）したのが別のファイルだったとかかもしれません。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.35%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
m.ts10806
2018/06/27 13:16
1つ前の質問でも指摘しましたが、プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入（エラーメッセージの場合は不要）の手順で「コードハイライト化」してください。（質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください）
m.ts10806
2018/06/27 13:17
質問は編集できます（例え解決済みのものであっても何度でも） 質問を見やすくすることはスムーズな解決につながります。特にコードは回答者が再現確認を行うことが多いです。コードブロックで囲うことでボタン1つでコピーが容易となり、見やすくもなるので解決も早まります。というか、最初の内は質問テンプレートを使ってください。https://teratail.com/help/question-tips#questionTips3-8
m.ts10806
2018/06/27 13:33
@charset が2回されていますが何か意図があるのでしょうか。参考書をそのままコピペを批判するつもりはないですが、結局自身が書くコードなので、それぞれきちんと意図を以て書くようにしてください。意味も分からずただ置いているだけではおそらくやりたいことはできません。
yoshinavi
2018/06/27 13:43
「mts10806」さんのご指摘部分は、teratailでより良い回答を得る為に必要となりますので、実行してみてください。 また、過去の質問からもヒントは得れると思いますので、過去の質問も検索されることをオススメします。 （過去質問の参考：https://teratail.com/questions/131691）