CSSファイルが見つからない

前提・実現したいこと

CSSファイルをHTMLの方に反映させたい

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

pra.css:1 Failed to load resource: net::ERR_FILE_NOT_FOUND

該当のソースコード

①pra.htmlのコード↓

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewpoint" content="width=device-width"> <title>入会申し込み</title> <link rel="stylesheet" type="text/css" href="pra.css"> </head> <body> <h1>入会申し込み</h1> <p style="font-size: 14px">入会するには、次のフォームに必要事項をご記入ください。</p> <p>メールアドレス:<input type="email" name="mymail"></p> <p>パスワード:<input type="password" name="passcode"></p> <p><button type="submit">登録する</button></p> </body> </html>

②pra.cssのコード↓
@import url(sanitize.css);
h1 {
font-size: 24px;
margin: 0;
}
p{
font-size: 14px;
}

※sanitize.cssはサイトからダウンロードしたものを、cssというフォルダ内にpra.cssと共に保存
ファイルの保存形態は
PC>デスクトップ＞プログラミングファイル＞pra.html＆css＞pra.css＆sanitize.css
※＆はファイル名ではなく、同じフォルダ内に2種類のファイルが保存されていることを表したものです。

試したこと

・最初エラー発生時はファイル名に拡張子が記載されていなかったので、全ファイル名に.htmlや.cssを追記したがエラーに変化なし
・元々sanitize.cssはpra.cssに組み込まず、cssフォルダ内に保存して<link>していたが、ここでもファイルが見つからないエラーが表示されたのでpra.cssにimportする形にした。しかしそもそもpra.cssがまず見つからないから結局エラー状態は変わらず
・chromeで検証した際、href内のpra.cssをクリックしたがリンクが表示されない

補足情報

・Visual Studio Codeでコード入力しています。
・コード入力はマイナビ社の"HTML&CSS,JavaScriptのきほんのきほん"を見ながら作業しています。

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

回答1件

html
1<link rel="stylesheet" type="text/css" href="pra.css">

の個所。「pra.html」がドキュメントルートの直下であるならば

html
1<link rel="stylesheet" type="text/css" href="css/pra.css">

と書きましょう。
ドキュメントルートの直下でないならば、ドキュメントルートからの相対パスで記述するか、絶対パスで記述します。

投稿2020/08/18 06:30

showkit

総合スコア1638

Bapper

2020/08/18 07:13

回答ありがとうございます！ただ、上記のようにコードを訂正してもエラーが改善されませんでした。それに加えて申し訳ないのですが、自分はまだドキュメントルートをいまいち理解できていないペーペーなので、ここからどう修正していけばいいかわからないです。一応href="PC/デスクトップ/プログラミングファイル/css/pra.css"までスラッシュ１個分ずつ追加入力しましたが同じエラーのままでした。追記：chromeでのサイトURL表示は↓の通りです。 file:///C:/Users/%E6%9D%BE%E8%91%89%E5%A4%A7%E8%81%96/Desktop/pra.html