CSSフォルダ内のスタイルシートが適用されない

前提・実現したいこと

CSSスタイルを適用させたい。

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

記述ミスがどこかに潜んでいるのか、ローカルではスタイルがちゃんと適用されるのにサーバーにアップ
するとスタイルシートを一切参照していない事が分ります。
何故か分かりません。
CSSへのパスがちゃんと記述されていないのか、ではなぜローカルでは普通に見れるのか？
全く分かりません。
どなたか、ご回答いただければ幸いです。

該当のソースコード

headerタグ内

<!DOCTYPE HTML> <html lang="ja-JP"> <head> <meta charset="UTF-8"> <meta http-equiv="content-type" content="text/html" charset="UTF-8" /> <meta name="robots" content="no-index,nofollow" /> <meta name="viewport" content="widh=denice-widh, initial-scale=1.0"> <meta http-equiv="X-UA-Conpatible" content="ie=edge"> <title>吃驚！　偉人奇人伝</title> <meta name="description" content="" /> <link href="./css/style.css" rel="stylesheet" type="text/css" media="all"> <link rel="icon" href="./images/favicon.ico" /> <link href="https://fonts.googleapis.com/css?family=Sawarabi+Mincho" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script> jQuery(document).ready(function() { var offset = 220; var duration = 500; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > offset) { jQuery('.crunchify-top').fadeIn(duration); } else { jQuery('.crunchify-top').fadeOut(duration); } });

jQuery('.crunchify-top').click(function(event) {
  event.preventDefault();
  jQuery('html, body').animate({scrollTop: 0}, duration);
  return false;
})

});
</script>

試したこと

パスの記述を絶対パスにしましたがそれでもダメでした。

補足情報（FW/ツールのバージョンなど）

多分凡ミスだと思うのですが…

CSSファイルは同一のフォルダ内に「CSS」と云うフォルダを作り、そこに入っています。
一枚です。

Takumiboo

2019/12/01 06:40

ソースコードは<code>よりマークアップしてください

Takumiboo

2019/12/01 06:42

今回の問題とは直接は関係ないと思いますが、 <meta name="viewport" content="widh=denice-widh, initial-scale=1.0"> <meta http-equiv="X-UA-Conpatible" content="ie=edge"> このあたりにタイプミスがあるのでご確認ください。

Takumiboo

2019/12/01 06:43

問題について、「スタイルシートを一切参照していない事が分ります。」というのはどこで判断されていますか？

keisai1

2020/04/01 06:20

単純なスペルミスでした。お返事が遅くなって申し訳ありません。

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

回答2件

開発者ツールでアクセスしようとしているcssのパスを見て実際にそこに設定されているのか確認してはいかがでしょうか。

投稿2020/04/01 07:25

petmen029

総合スコア86

ベストアンサー

<link href="./css/style.css" ～～>
の指定しているルートディレクトリの相対位置が、ローカルの検証環境とアップロード先サーバーで違っていないか確認してください。

たとえばローカルで
http://localhost/index.html
http://localhost/css/style.css
として動作しているのが、

サーバー上だと
http://hogehoge.com/hoge/index.html
http://hogehoge.com/hoge/css/style.css
のようにルートディレクトリからの設置場所までのパスが変わっていないでしょうか。
※上記のような設置パターンだとhref="./hoge/css/style.css"が正しいパスとなります。

両方で正しくプレビューするには、
・localhostのほうもhogeフォルダの中に各ファイルを入れる
・サーバーのほうのサブディレクトリhoge/をやめてルートに置く
・絶対パスを相対パスにし、パス指定を href="css/style.css"に変える
の方法が考えられます。

投稿2019/12/05 06:14

編集2019/12/05 06:15