さくらのレンタルサーバーへアップロードした画像とcssが認識されない

実現したいこと

さくらのレンタルサーバーへアップロードしたhtmlと画像およびcssを正しく表示させたいです。

発生している問題・分からないこと

はじめまして。
html、css初心者で初めてサイトを作成し、サーバーへアップロードする段階で躓いているものです。
お力添えしていただけると幸いです。
宜しくお願いいたします。

〇現状
サーバー：さくらのレンタルサーバー
ドメイン：お名前ドットコムにて取得
※サーバーと外部取得ドメインとの紐づけは完了
アップロード：FileZilla使用

ディレクトリ①：/home/loukitamura/www/　　 →htmlファイルをアップロード
ディレクトリ②：/home/loukitamura/www/css　→cssファイルをアップロード
ディレクトリ③：/home/loukitamura/www/images　→画像ファイルをアップロード

当該サイト：https://loukitamura.love/home/loukitamura/www/home.html

〇問題
htmlのみブラウザで表示可能(但しハイパーリンクのみ動作しない。タブ名はHome→Schedule→、、、と変わるものの、サイトの内容はすべてHomeのまま)。
加えて、cssと画像が認識されない。
※ローカルでは問題なく表示された

該当のソースコード

html
1<!doctype html>                                                                                                              
2<html lang="ja">                                                                                                                       
3<head>                                                                                                                       
4<meta charset="UTF-8">                                                                                                       
5<title>Lou's Home</title>                                                                                                   
6<link rel="stylesheet" href="css/style.css" type="text/css">										    
7</head>
8<body>
9<div class="wrapper">  
10        <!-- ヘッダー -->                                                                                                    
11	<header class="header">                                                                                            
12		<h1 class="title"><a href="home.html"><img src="images/title.png" alt="Lou's 6 tatami mats"></a></h1>      
13
14		<nav class="nav">                                                                                      
15			<ul>
16			   <li><a href="home.html">Home</a></li>
17			   <li><a href="schedule.html">Schedule</a></li>
18			   <li><a href="works.html">Works</a></li>
19			   <li><a href="https://loukitamura.base.shop/">Shop</a></li>
20			   <li><a href="diary.html">Diary</a></li>
21			   <li><a href="contact.html">Contact</a></li>
22			</ul>
23		</nav>
24	</header>
25        <!-- ヘッダーここまで -->
26
27	<h2>About</h2>
28	<div class="about-titlebig">                                                                                         
29		<img src="images/titlebig.png" alt="">                                                                     
30	</div>
31
32        <div class="about-MJ">
33	<p><img src="images/MJ.gif" alt=""></p>                                                   			      
34					<p>When logic and proportion</p>
35					<p>Have fallen sloppy dead</p>
36					<p>And the White Knight is talking backwards</p>
37					<p>And the Red Queen's "Off with her head!"</p>
38					<p>Remember what the dormouse said,</p>
39					<p>Feed your head!</p>
40					<p>Feed your head!</p>
41					<p>Feed your head!</p>
42					<p><strong>Grace Slick, Jefferson Airplane, "White Rabbit"(1966)</strong></p><br>
43	        </div>
44	<!-- メイン -->
45	<main>                                                                                                               
46		<h2>News</h2>
47		<p class="news-item">2024/08/25 盧の六畳間、賃貸契約開始</p>
48		<p class="news-item">2024</p>
49	</main> 
50　　　　<!-- メインここまで -->
51        <!-- フッター -->
52	<footer class="footer">
53		<p>&copy;Copyright L.K. All rights reserved </p>                                                            
54	</footer>
55　　　　<!-- フッターここまで -->
56</div>
57</body>
58</html>
59

css
1@charset "UTF-8";
2
3/*すべてのページに適用される*/
4
5html {
6	font-family: sans-serif;						
7	font-size:12px;
8}
9html *{
10	box-sizing: border-box;							
11}
12
13body {
14	margin: 0 0 0 0;							
15	text-align: center;							
16	background-color: #cd7dfb;						
17}
18.wrapper {									
19	margin: 0 auto 0 auto;
20	max-width: 960px;
21}
22
23.table1 {
24	display: inline;
25	text-align: center;
26	margin: 20px;
27}
28
29.table2 {
30	display: inline;
31	text-align: center;
32	margin: 20px;
33}
34	
35
36p {
37	line-height: 1;								
38}
39
40a:link {									
41	color: #ffff00;
42}
43a:visited {									
44	color: #ffff00;
45}
46a:hover {									
47	color: #e3937a;
48}
49a:active {									
50	color: #ff6a3b;
51}
52
53
54/*すべてのページに適用 -ヘッダー-*/
55
56.title {									
57	margin: 50px 0 40px 0;
58	line-height: 0;
59	text-align: center;
60}
61.nav li {									
62	display: inline;
63	list-style-type: none;
64	padding-right: 30px;
65	margin-right: 30px;
66	margin-left: 30px;
67}
68
69
70/*すべてのページに適用 -フッター-*/
71
72/*
73.footer {
74	background-image: url(../images/duck.png);
75	background-repeat: repeat;
76	margin-top: 30px;
77	padding: 80px 15px 20px 15px;
78	font-size: 12px;
79	color: #3f5170;
80}
81*/

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

〇対応済み策
・サーバーへアップロードしたファイルのチェック
→アップ後の各ファイルとローカルのファイルを見比べてみるも変化なし

・FileZillaを使用せず、さくらのサーバーコントロールパネルより直接ファイルをアップロード
→変化なし

・wwwフォルダの階層にあるhtmlファイルのみ読み込めたので、ディレクトリ指定の見直し
→絶対パス、ルートパス等試すも変化なし

・wwwフォルダの階層にあるhtmlファイルのみ読み込めたので、cssをhtmlに直接記述し、画像ファイルも同じwwwフォルダ内の階層に移動させる。
→スタイルシートのみ反映されるも画像は読み込まれず、htmlのハイパーリンクも作動せず

・cssとhtmlの紐づけに関しては、linkタグ内でtype属性が抜けていたため記述
→変化なし

・htmlデバックサイトにてエラーチェックするも重大な欠陥なしとの診断
→一部指示通り書き換えエラーなしとなるも変化なし

補足

特になし

utm.

2024/08/31 17:15

キャッシュでは？上司に似たようなこと聞かれてキャッシュでは？と言ってホントにキャッシュだったことがありました。スーパーリロードをお試しください。

loukitamura

2024/08/31 17:23

早速のご返答ありがとうございます！キャッシュの件、記載し忘れておりました。以前各ブラウザーにてスーパーリロードを試したのですが、変化ありませんでした。今一度試してみましたが、やはり解決しませんでした。

dodox86

2024/08/31 19:36

お試しのURLが間違っているように思えます。 > 当該サイト：https://loukitamura.love/home/loukitamura/www/home.html は、https://loukitamura.love/home.html が正しいのでは? CSSも適用されています。 https://loukitamura.love/css/style.css でCSSのファイルにアクセスするとブラウズできるので、読み込めているのが分かります。可能ならば、サーバー側のアクセスログで確認しましょう。

loukitamura

2024/09/01 03:31

解決いたしました!!!!!😢 書き込みしていただいたURLで検索したところ画像、CSSともに正常に表示されました！まったく気が付かなかったです。本当にありがとうございます!!!!!

loukitamura

2024/09/01 03:33

お手数おかけしますが、ベストアンサーに選びたいので同じ内容を回答欄に投稿いただけますでしょうか？

dodox86

2024/09/01 06:07

@質問者 loukitamuraさん解決できたようでよかったです。 > お手数おかけしますが、ベストアンサーに選びたいので同じ内容を回答欄に投稿いただけますでしょうか？せっかくですがベストアンサーは要りませんのでご自身で情報と共に回答を投稿し、自己解決として質問を閉じてください。コメントの経緯としては、 > ディレクトリ①：/home/loukitamura/www/　　 →htmlファイルをアップロードと言うところから、WEBサーバーのDocumentRoot相当の指定が/home/loukitamura/www/ になっているものと考えました。なので、URLとしては、https://loukitamura.love/home.html になるはずですね。ちなみに別件で、https://loukitamura.love/home/loukitamura/www/hoge.htmlなどと存在しない、不正なURLを入力してもCSSが適用されていないページが返ります。不正なURLだとトップページを返すようにしているのだと思いますが、 https://loukitamura.love/hoge.html だと"404 Not Found" が返るので、これはこれでおかしいような。サーバー側の設定の問題だと思いますので、必要なら確認してみてください。

loukitamura

2024/09/02 06:23

ベストアンサーの件、承知いたしました！コメント経緯の詳細も大変助かります。そもそもWebサーバーのDocumentRootについて全くの知識不足でした。 dodox86様のコメントを参考に、もう少し自分でも勉強させていただきます。また不正なURL入力時にトップページへ返すはずがそうならない件については、サーバー側の設定等、再度確認してみたいと思います。本件のみならず周辺知識の補足までしていただき、本当にありがとうございました。周りに詳しい人間がおらず困っていたので、大変助かりました。重ねてお礼申し上げます。

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

回答1件

自己解決

dodox86様のコメントにて解決いたしました。
ベストアンサーを辞退されたのでdodox86様の代わりに解決方法を私なりにまとめて投稿させていただきます。

〇解決方法

htmlおよびcssの記述に問題はなく、URLの指定がそもそも間違っていた。
正しくはhttps://loukitamura.love/home.html

〇理由
当初私が検索する際入力していた/home/loukitamura/www/は、あくまでさくらサーバー上のディレクトリ構造であり、実際にURLとして入力する必要がなかった。
なぜなら、さくらのサーバーにおいてドキュメント・ルートはwwwになるためである（ドキュメント・ルートはそのドメインで公開するディレクトリの起点であるため、入力する必要がそもそもなかった）。

〇別件補足
不正なURLで検索した際、正しいトップページへ返さず、cssが適用されていないページが返ってくるのは
おかしい。サーバー設定を見直した方がよい。→今後確認予定

投稿2024/09/02 06:50

loukitamura

総合スコア3