こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

QNo.9635316

困ってます

質問者が選んだベストアンサー

>ファイルの種類が「ショートカット」になっていて
そうきたか・・・
さすがに、それは、わからんわ~
ともあれ、動いてよかったですな!
また何かあれば!

投稿日時 - 2019-07-14 19:07:52

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(6)

もう一つ・・・こちらでは、表示できたわけですが、
原因が別の場所にあることは、わかったものの
それを再現する方法がないという問題もありそうでして。

まず、ファイル名の"サンプル"を"sample"など、
英語表記にしてもらっていいですか?
ファイル名と、読み込み部両方。
それくらいしか、手が思い浮かばないんです。正直。。

投稿日時 - 2019-07-14 18:03:20

>しかしそれでも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

ANo.2

HTMLではなく、そのCSSやJavaScriptファイルをブラウザで開けますか?
開けないならパスがおかしいです
確認お願いします

投稿日時 - 2019-07-14 15:46:34

補足

HTMLファイルを削除して作り直してみたら正常にCSSとJavascriptが読み込まれるようになりました。ファイルの種類が「ショートカット」になっていて、作り直すと「Chrome HTML Document」になりました。

投稿日時 - 2019-07-14 18:44:07

お礼

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

投稿日時 - 2019-07-14 18:43:57

質問者が、全部まちがってないのに!と言ってしまうと。
回答側が答えがない!になってしまいますが、
実際はどこかに必ず間違いがあるためなので、
そこから解決の道につながるといいですね!。

>ファイル名とそのパスやソースコードを確認しましたが、記述に間違いはありません。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

あなたにオススメの質問