設定しているcssが効かない？

Question

初歩的なことで申し訳ありません。

フロントエンドの勉強をしており、現在以下のようなコードを書いており、ボックスを作りたいと思っておりますがブラウザで確認してもcssが反映されません。。。

Comments

[yoshinavi]

CSSの指定パスは合っていますか？

[m.ts10806]

質問編集画面タイトル横にある「初心者アイコン」をご活用ください。「初心者」と質問で書くよりも伝わりますし、質問一覧に表示されるのでわかりやすくなります。

Answer 1

codepenで実行してみたところちゃんとCSSは反映されていました。
https://codepen.io/crimnut/pen/jpBJLq

なので

• CSSを指定するパスがあっているかどうか確認してください。ちゃんとcssディレクトリの下に当該のcssファイルはありますか？
• ちゃんと変更を保存してからブラウザで確認していますか？

以上の2点を確認してみてください。

Comments

[ayamon93]

回答ありがとうございます。

変更の保存はしていたのですが、cssのパスとはどこのことになるのですか？
上記のindex.htmlとstyle.cssをfrontという名前のプロジェクトフォルダの中に一緒に保存しておりますが、まずいのでしょうか？

[crimnut]

<link rel="stylesheet" type="text/css" href="css/style.css" />
のhrefで指定しているのがcssファイルへのパスです。
ディレクトリの構成が
front/
├ index.html
├ style.css
ということなら、href="./style.css"と書けば大丈夫です。
相対パスで調べてみてください。

Answer 2

href="css/style.css"にパスを指定しているので、

index.htmlを同じファイル内にcssという名前のディレクトリを作成して
その中にstyle.cssを入れてあげれば動くのでは。

またどのファイルも文字コードをUTF-8にしてください。

Answer 3

単純にcssファイルが読み込まれていないだけですね。