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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

452閲覧

CSSが反映されない

kikoko09

総合スコア13

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/08/25 11:19

編集2018/08/25 12:10

ドットインストールの実践!WEBサイトを作ろうというところを学習しておりますが、
下記のindex.htmlの<link rel="stylesheet" href="css/styles.css">
を入れるまではちゃんと反映されるのに、入れたら反映されず、むしろ『詳細を見る』以前が消えてしまいます。
いろいろ調べたのですが、どうしてもCSSが反映されません。
CSSをブラウザに反映させる為にはどうすればいいのでしょうか?ご教授願います。

HTML

1コード 2<!DOCTYPE html> 3<html lang="ja"> 4<head> 5 <meta charset="utf-8"> 6 <title>Dotinstall Paneを使ってみよう </title> 7 <link rel="icon" href="favicon.ico"> 8 <link rel="stylesheet" href="css/styles.css"> 9</head> 10<body> 11 <header> 12 <h1>Dotinstall Pane</h1> 13 <p> 14 ドットインストールを見ながら<br> 15 コーディングができるAtomパッケージ 16 </p> 17 <a href="#" target="_blank">詳細を見る</a> 18 </header> 19</body> 20</html>

CSS

1コード 2body { 3 font-size: 16px; 4 font-family: Verdana, sans-serif; 5 color: #333; 6} 7 8header { 9 color: #fff; 10 background: url(../img/bg.png) 11 background-size: cover; 12} 13

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/08/25 11:27

コードは画面キャプチャでは再現確認が難しいので質問本文に直接(マークダウンの<code>を利用して)添付してください。またCSSが反映されない理由はそう多くありません。linkのパス指定が間違っていないか、ファイルアップロードを忘れていないか、破損ファイルではないか くらいです。いずれかに当てはまっているはずなのでその観点から確認してください。ブラウザから直接URLを実行してちゃんとそのCSSの内容が表示されれば2番目と3番目はクリアしていると言えます。
m.ts10806

2018/08/25 11:28

あとCSSの文法ミスも可能性としてはありますね。画面キャプチャにある通り、ミスがありそうな箇所のテキスト色が変わってますよ。
kikoko09

2018/08/25 12:14

失礼致しました。初心者で質問の仕方もわかりませんでした・・・。質問にソースコード貼り付けさせて頂きました。ご丁寧に回答頂きありがとうございます。動画通りにしたのですが、linkのパスが間違っていることもあるんですかね。それか文法ミスですかね。間違えを見つけるのも一苦労ですね。
yoshinavi

2018/08/25 12:15

>「<link rel="stylesheet" href="css/styles.css"> を入れるまではちゃんと反映されるのに、入れたら反映されず・・・」 → 入れる前はどのような形でスタイルを指定していたのでしょうか?
kikoko09

2018/08/25 12:22

入れる前はindex.htmlのみです。<link rel="stylesheet" href="css/styles.css"> を入れて、styles.cssを入力すると反映されなくなります。。。
yoshinavi

2018/08/25 12:30

「styles.css」の内容は提示のコードで全てですか?
kikoko09

2018/08/25 12:42

background: url(../img/bg.png)の後に;を忘れておりましたが、それ以外は提示コードで全てです。
guest

回答2

0

ベストアンサー

  1. スーパーリロードしてみる
  2. CSSファイルはlink要素で指定したところにあるか確認する
  3. header要素にかけているbackgroundプロパティの末尾にセミコロンをつけてみる

あと、質問文にソースコードは貼り付けてね

投稿2018/08/25 11:24

編集2018/08/25 11:34
bwz61366

総合スコア2009

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/08/25 11:29

コメントで書いてしまいましたが、CSSの構文ミスの可能性もありますね(画面キャプチャなので全部表示されてないのかもしれませんが)
bwz61366

2018/08/25 11:36

ほんとだ、header要素にかかってるbackgroundプロパティにセミコロンがないっすな。 すっかり見逃していた(回答に追記した)。 まぁ、さすがに全部表示されているのだと信じたい
kikoko09

2018/08/25 12:48

ソースコードの件、失礼致しました。 1,2,3全て試してみましたが、反映されませんでした・・・
guest

0

「mts10806」さん、「bwz61366」さんの回答にあるようにセミコロンの付け忘れにより、背景が表示されていないだけではないでしょうか?

テキストは存在していても、文字の色と背景が白なので、同化してみえないだけかと思います。

『詳細を見る』より上の部分をドラッグや「Ctrl+A」で全選択すると文字が現れないでしょうか?

投稿2018/08/25 12:41

yoshinavi

総合スコア3521

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kikoko09

2018/08/25 12:50

セミコロンをつけてみましたが、反映されませんでした・・・ 『詳細を見る』より上の部分をドラッグや「Ctrl+A」で全選択すると文字が現れないでしょうか? >>これはどの画面で行えばよいでしょうか。
yoshinavi

2018/08/25 12:58

HTMLファイルをテキストエディタのプレビュー機能で見た画面か、フォルダからHTMLファイルを開いた画面です。
kikoko09

2018/08/25 13:02

yoshinaviさん、いろいろ触っていたら無事反映されました!もしかしたらアップデートが関係していたのかもしれません。それかコードミスか・・・。 また何か分からないところがありましたら、お助け頂けますと幸いです(..)
yoshinavi

2018/08/27 10:38

>もしかしたらアップデートが関係していたのかもしれません。 →「ドットインストール」の内容が分からないので推測ですが、何をアップデートしたのでしょうか? 私なりの推測ですが、セミコロンを付けてファイルのアップ。しかし最初はキャッシュが効いていて違いが分からず、再読込でキチンと表示された。 ・・・こんなところでしょうか? いずれにしても、操作で明確な所があれば記載されると、今後、同様の問題で悩んでいる人へのヒントとなります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問