なぜCSSが反映されないか教えてください

CSSを反映する方法　初心者

HTMLとCSSで簡単なHPを練習で作っています。
使用しているテキストエディタはVSCです。
Go Live にて確認したところ、HTMLのみ反映されておりCSSが反映されていませんでした。
どこが間違っているのか調べても分からず、CSSが反映されなかったため質問させていただきます。

発生している問題・エラーメッセージ

CSSが反映されない

該当のソースコード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>30分でできるホームページ</title>
</head>
<body>
    <h1>30分でできるホームページ</h1>
    <p>初心者でも30分で作れます。</p>
    <img src="test.jpg" alt="">
    <a href="https://www.sejuku.net/blog/">解説していたブログはこちら</a>

</body>
</html>

CSS

h1{
    color:crimson;
}

補足情報（FW/ツールのバージョンなど）

htmlのファイル名はindex.html
cssのファイル名はstyle.css です。

m.ts10806

2021/08/11 23:28

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

K_3578

2021/08/11 23:54

https://webliker.info/78726/ 恐らく解は他の方が出してくれてるし、絶対パスと相対パスの解説記事でも貼っときます

oxo_meo

2021/08/12 00:06

ありがとうございます！！読ませていただきます！

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

回答3件

ベストアンサー

■考えられること１

F12を押して開発ツールを開き、コンソールに何か表示されてないか確認してみてください。

恐らく、style.cssに対して、
Failed to load resource: net::ERR_FILE_NOT_FOUND
のようなエラーが出ていると思います。

html
1<link rel="stylesheet" href="style.css">

は、index.htmlを置いているフォルダと同じフォルダ内のstyle.cssを使用することを意味しています。

例えば、
[フォルダ]
├─[css]
│　└─style.css
└─index.html

みたいな構成であれば、

html
1<link rel="stylesheet" href="css/style.css">

という書き方になります。

■考えられること２

ブラウザのキャッシュが働いてしまって、変更後のstyle.cssに更新してくれない。

対処法としては、ブラウザで、
http://[URL]/[ロケーション]/index.html
で表示しているところを、
http://[URL]/[ロケーション]/style.css?hogehoge
（hogehogeはキャッシュを回避するためのパラメータで、違う適当な文字でも良いです。）
で、キャッシュクリアする。

投稿2021/08/11 23:44