【HTML/CSS】外部cssが読み込まれてないとき

Contents

1. 状況整理
2. 検証
- 2.1. cssファイルは本当に読み込まれてたのか？
- 2.2. パスの問題

状況整理

同期するが、同じファイルに遷移しているのに、遷移後には外部cssが反映されてない。
遷移前は反映されてるのに、遷移後だとcssが読み込まれず、500エラーが返ってきてた。

検証

cssファイルは本当に読み込まれてたのか？

以下が糸口になった。
(cf, CSSファイルが読み込めません！HTMLファイルにCSSのデザインが適応できない時に、確認手順まとめQ&A)
試しに、外部cssファイルの中身を以下のように変えて、画面の変化で読み込んでるのかどうか調べた。すると、遷移前は確かに画面が赤くなるが、遷移後は赤くならなかった。デベロッパーツールを見ると、ワンテンポ遅れて500を吐いていた。css自体には誤りはないことから、どうやら外部cssを上手く読み込めてないからだと分かった。

@charset "utf-8";
body {
    background: red;
}

パスの問題

原因はheadタグのスタイルシート読み込む部分。ディレクトリの把握を間違えると読み込まない。
遷移前だと読み込んでたので問題無いと思っていたが、単純に初歩的なミスだった…。
環境によって変わるので、どれが正解とも言えないが、ファイルのあるディレクトリをコマンドなどで調べた上で記述すること。設定ミスがあると、500が返ってくるので、パスを疑う。

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

以上