Q&A
ブラウザのURLは「file:///D:/test/ファイル名.html」になっていますか？
前提・実現したいこと
htmlファイルにccsを反映したい
発生している問題・エラーメッセージ
htmlファイルを作成し同じフォルダ内にccsファイルを作成したのですが反映されません。エラーメッセージはchromeで開いて検証画面を開いた時のものです。
GET file:///D:/test/style.css net::ERR_FILE_NOT_FOUND link.html:6
該当のソースコード
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>HTM入門-外部CSSファイルを読み込む</title> 6 <link rel="stylesheet" href="style.css" type="text/css"> 7 </head> 8 <body> 9 <h1>CSSファイルの読み込み</h1> 10 <p>cssファイルをlink要素を使って読み込んでいます。</p> 11 <p>「style.css」で大見出しのスタイルを設定しています。</p> 12 </body> 13</html>
ccs
1@charset "utf-8"; 2h1 { 3 color: #326693; 4 padding-left:10px; 5 border-left: 10px solid #31a9ee; 6 border-bottom: 1px dashed #31a9ee; 7}
試したこと
ブラウザのキャッシュ削除
スーパーリロード
googleで検索したところ似たようなな症状の方が質問していました。
この方は自己解決しているようでしたが問題の原因を「VisualStudioからhtmlだけを開く形となっていたため」と書いていていまいちわかりません。
https://teratail.com/questions/151238
補足情報（FW/ツールのバージョンなど）
Visual Studio Code
バージョン: 1.46.1 (user setup)
ブラウザのＵＲＬは「file:///D:/test/link.html」になっていました。htmlファイルのファイル名はlink.htmlで間違いありません。
D:/testフォルダーのファイル一覧を、実際に見に行って確認してください。
タイトルやcssの提示に「ccs」と書かれているので、実際のファイル名の拡張子もstyle.ccsになっている疑いが。
D:\testのフォルダ内に「link.html」と「style.ccs」だけが入っています。
「link.html」は種類が「Chrome HTML Document」となっていて「style.ccs」はCCS ファイルになっています。
ファイル名は「style.css」ですか？「style.ccs」ですか？どっち？
書いてるうちに解決してたー
ファイル名は「style.ccs」です。
回答1件
0
ベストアンサー
スタイルシートのファイル名をstyle.ccsからstyle.cssに修正してください。
追加分
<link rel="stylesheet" href="style.css" type="text/css">
という行で、同じフォルダーにあるstyle.cssをスタイルシートに指定しています。
提示されていたエラーは、ここで指定されたstyle.css見つからないことを意味するものです。
確認してみたら、実際のファイル名がstyle.ccsで、拡張子部分が食い違っていたことが原因。
投稿2020/06/22 09:39
編集2020/06/22 14:27総合スコア11990
style.cssに変更したところ問題なく反映されました。ありがとうございます。勉強中なのでできればどのような仕組みで改善したのか知りたいです。
出先で回答を編集できないのでコメントで。
<link rel="stylesheet" href="style.css" type="text/css">
という行で、同じフォルダーにある「style.css」をスタイルシートに指定しています。提示されていたエラーは「style.cssが見つからない」ことを意味するものですね。で、確認してみたら、実際のファイル名(style.ccs)が食い違っていた、というわけ。
ありがとうございます。おかしな勘違いでしたが言われてみないと気づきませんでした。これで数時間も格闘していてので...
本当にありがとうございます。
戻ったので回答に補足を追加しておきました。
あなたの回答
tips
プレビュー
