ドットインストールの実践!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
コードは画面キャプチャでは再現確認が難しいので質問本文に直接(マークダウンの<code>を利用して)添付してください。またCSSが反映されない理由はそう多くありません。linkのパス指定が間違っていないか、ファイルアップロードを忘れていないか、破損ファイルではないか くらいです。いずれかに当てはまっているはずなのでその観点から確認してください。ブラウザから直接URLを実行してちゃんとそのCSSの内容が表示されれば2番目と3番目はクリアしていると言えます。
あとCSSの文法ミスも可能性としてはありますね。画面キャプチャにある通り、ミスがありそうな箇所のテキスト色が変わってますよ。
失礼致しました。初心者で質問の仕方もわかりませんでした・・・。質問にソースコード貼り付けさせて頂きました。ご丁寧に回答頂きありがとうございます。動画通りにしたのですが、linkのパスが間違っていることもあるんですかね。それか文法ミスですかね。間違えを見つけるのも一苦労ですね。
>「<link rel="stylesheet" href="css/styles.css"> を入れるまではちゃんと反映されるのに、入れたら反映されず・・・」 → 入れる前はどのような形でスタイルを指定していたのでしょうか?
入れる前はindex.htmlのみです。<link rel="stylesheet" href="css/styles.css"> を入れて、styles.cssを入力すると反映されなくなります。。。
「styles.css」の内容は提示のコードで全てですか?
background: url(../img/bg.png)の後に;を忘れておりましたが、それ以外は提示コードで全てです。
解決した方法を具体的に記載してください。 https://teratail.com/help#resolve-myself > また後から読む人のためにも、具体的な解決手順を記載してください。
回答2件
あなたの回答
tips
プレビュー