CSS, Javascript読み込めない
Windows10のノートパソコンを使用しています。各ブラウザの設定は初期設定のままです。
ローカル(PC内)でHTMLファイルにCSSファイル1つとJavascriptファイル1つを読み込ませ、Google Chrome, Microsoft Edge, Internet Explorerで開いたのですが、どのブラウザでもCSSもJavascriptも認識されていません。
ファイル名とそのパスやソースコードを確認しましたが、記述に間違いはありません。htmlファイルと同じ階層にCSSファイルとJavascriptファイルを入れています。
Google Chromeの検証機能で確認するとCSSとJavascriptのファイルが見つかりませんとなっています。
ネットで調べましたが原因は不明です。以上のことから、CSS、Javascriptが読み込めない原因として考えられることを教えて下さい。
投稿日時 - 2019-07-14 14:46:41
>ファイルの種類が「ショートカット」になっていて
そうきたか・・・
さすがに、それは、わからんわ~
ともあれ、動いてよかったですな!
また何かあれば!
投稿日時 - 2019-07-14 19:07:52
このQ&Aは役に立ちましたか?
0人が「このQ&Aが役に立った」と投票しています
回答(6)
>しかしそれでもCSSとJavascriptが認識されません。
え~~
こちらでは、動いているので、
後は、言語コード系などかな。
Chromeのデバッグ時のステータスのスクリーンショット
貼ってもらえます?
こちらでは、表示できたので、間違いなく、「おしい」
状態にはなっていると思います。
投稿日時 - 2019-07-14 17:58:00
CSS、Javascriptが認識されない件ですが、ファイルを削除して作り直したところ、なぜか正常に表示されるようになりました。
ありがとうございました。
投稿日時 - 2019-07-14 18:25:42
さらに、確認するとサンプル.htmlのファイルの種類が「ショートカット」になっていて、作り直すと「Chrome HTML Document」となり、正常にCSSとJavascriptが読み込まれるようになりました。
投稿日時 - 2019-07-14 18:39:20
いくつか、問題がありました。
まず、
<p class="sampletext">サンプルテキスト</p>
この部分。
p.sample
{
font-color: red;
}
CSS名は、".sample"なので、".sampletext"ではないという問題。
両方を".sampletext"で修正
次にCSSですが、
font-color: red;
ではなく、
color: red;
に修正
次にJS部分ですが、
docment.write("javascriptで表示した文字");
ではなく、
document.write("javascriptで表示した文字");
なので、INCLUDE系が失敗していたのではなく、
書いている命令が違っていたのが原因だったようです。
上記修正を加えただけで、レンダリングできました(表示OKということ)
ということで、解決したのではないでしょうか?
投稿日時 - 2019-07-14 17:24:26
ありがとうございます。気づきませんでした。
ファイル構造
サンプル
- サンプル.html
- サンプル.css
- サンプル.js
サンプル.html
<!DOCTYPE html>
<html>
<head>
<title>サンプル</title>
<link rel="stylesheet" href="サンプル.css">
</head>
<body>
<script src="サンプル.js"></script>
<p class="sampletext">サンプルテキスト</p>
</body>
</html>
サンプル.css
p.sampletext
{
color: red;
}
サンプル.js
document.write("javascriptで表示した文字");
上のように修正しました。
しかしそれでもCSSとJavascriptが認識されません。
投稿日時 - 2019-07-14 17:34:16
質問者が、全部まちがってないのに!と言ってしまうと。
回答側が答えがない!になってしまいますが、
実際はどこかに必ず間違いがあるためなので、
そこから解決の道につながるといいですね!。
>ファイル名とそのパスやソースコードを確認しましたが、記述に間違いはありません。htmlファイルと同じ階層にCSSファイルとJavascriptファイルを入れています。
その、間違っていないと思われる部分を書いてもらえますか?
include 関連の行だけでおそらくは解決するんじゃないかと感じてはいます。
投稿日時 - 2019-07-14 15:37:42
問題のページはhtmlを認識するかどうか確認するために作ったページです。
ファイル構造
サンプル
- サンプル.html
- サンプル.css
- サンプル.js
サンプル.html
<!DOCTYPE html>
<html>
<head>
<title>サンプル</title>
<link rel="stylesheet" href="サンプル.css">
</head>
<body>
<script src="サンプル.js"></script>
<p class="sampletext">サンプルテキスト</p>
</body>
</html>
サンプル.css
p.sample
{
font-color: red;
}
サンプル.js
docment.write("javascriptで表示した文字");
投稿日時 - 2019-07-14 16:52:51
回答ありがとうございます。
投稿日時 - 2019-07-14 15:45:35