エックスサーバーにアップロードしたら、スライダーが崩れました。

vscodeで作成したWebサイトを、エックスサーバーにアップロードしたら、jqueryのslickのスライダーが表示されません。
ローカルだと問題なく表示されるので、原因がわかりません。
拡張機能のSFTPで、ftp設定でのアップロードを終えたばかりです。

自分でスライダーを作ったのが初めてなので、色々わからないことがあるのですが、ローカルだと問題なく表示されるので何が悪いのかよくわかりません。
アップロードでの不具合が始めてなので、原因がわかりません。
ｆ１２キーで見る限りは、スライダーの画像の２個めにdisplay:flexが効いていないような感じなのかなと思います。
ローカルとリモートでの挙動がよくわかりません。
経験者の方に教えていただきたいです。
ご回答よろしくおねがいします。

自分のサイトの状態はこんな感じです。　https://siteofearth.com/2/　

vscodeの画面の状態はこれです。
２のフォルダが今困っているサイトのものです。

HTMLとCSSのコードを貼ります。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=, initial-scale=1.0">
6    <link rel="stylesheet" type="text/css" href="css/slick.css"/>
7    <link rel="stylesheet" href="2\css\stylesheet.css">
8    <script src="C:\Users\正人.vscode\mosya\2\js\jquery-3.5.1.min.js"></script>
9    <title>Document</title>
10</head>
11<body>
12    <div class="base">
13        <header>
14            <ul>
15                <li class="li-1">NEW IN</li>
16                <li class="li-2">COLLECTION</li>
17                <li class="li-3">LOOK BOOK</li>
18                <li class="li-4">LAMINA</li>
19                <li class="li-5">OUR STORY</li>
20                <li class="li-6">NEWS</li>
21                <li class="li-7">STORE</li>    
22            </ul>
23
24        </header>
25        <div class="sec-1">
26            <div class="slick01">
27                <div class="cont1 bot">
28                    <div class="text-all">
29                        <div class="text1">
30                            primitive
31                        </div>
32                        <div class="text2">
33                            太古の誇りを
34                        </div>
35                        <div class="text3">
36                            <u>Discover the Collection</u>
37                        </div>
38                    </div>
39                    <div class="circle1">
40                            
41                    </div>
42                </div>
43                <div class="cont2 bot"><img alt="画像2" src="C:\Users\正人.vscode\mosya\2\image\14.jpg" /></div>
44                <div class="cont3 bot"><img alt="画像3" src="C:\Users\正人.vscode\mosya\2\image\15.jpg" /></div>
45            </div>
46        </div>
47        <section class="section-2">
48            <div class="bot">
49                <div class="sikaku1"></div>
50                <div class="sikaku2"></div>
51            </div>
52
53        </section>
54
55    </div>   
56  <script type="text/javascript" src="js/slick.min.js"></script>
57  <script type="text/javascript" src="js/common.js"></script>
58</body>
59</html>

CSS
1body {
2  background-color: black;
3}
4
5* {
6  box-sizing: border-box;
7}
8
9.base {
10  width: 1600px;
11  height: 1200px;
12  margin: auto;
13  background-color: white;
14}
15
16header {
17  width: auto;
18  height: 120px;
19}
20
21.sec-1 {
22  width: 1600px;
23  height: 710px;
24  /*display: flexbox;*/
25  overflow: hidden;
26}
27
28.section-2 {
29  width: auto;
30  height: 375px;
31}
32
33ul {
34  list-style: none;
35  /*text-align: center;*/
36}
37
38li {
39  font-size: 15px;
40  display: inline-block;
41  margin: 0px;
42  /*margin-top: 50px;*/
43}
44
45.li-1 {
46  margin-left: 243px;
47}
48
49.li-2 {
50  margin-left: 45px;
51}
52
53.li-3 {
54  margin-left: 45px;
55}
56
57.li-4 {
58  margin-left: 110px;
59  font-size: 36px;
60  font-family: Georgia, "Times New Roman", Times, serif;
61  margin-top: 36px;
62}
63
64.li-5 {
65  margin-left: 100px;
66}
67
68.li-6 {
69  margin-left: 53px;
70}
71
72.li-7 {
73  margin-left: 48px;
74}
75
76.cont {
77  width: 4800px;
78  height: 710px;
79  display: flex;
80  /*overflow: hidden;*/
81}
82
83.cont-size {
84  width: 1600px;
85  height: 710px;
86}
87
88.cont1 {
89  /*background-color: #f1dfc8;*/
90  /*display: flex;*/
91  /*position: relative;*/
92}
93
94.text-all {
95  width: 900px;
96  height: 710px;
97  background-color: khaki;
98}
99
100.circle1 {
101  width: 388px;
102  height: 982px;
103  border-radius: 50%;
104  background-color: hotpink;
105  /*padding: 0 0 0 0;*/
106}
107
108.cont2 {
109  background-color: blue;
110}
111
112.cont3 {
113  background-color: chartreuse;
114}
115
116img {
117  width: 1600px;
118  height: 710px;
119  margin: 0px;
120}
121

CSS
1body {
2  background-color: black;
3}
4
5* {
6  box-sizing: border-box;
7}
8
9.base {
10  width: 1600px;
11  height: 1200px;
12  margin: auto;
13  background-color: white;
14}
15
16header {
17  width: auto;
18  height: 120px;
19}
20
21.sectioin-1 {
22  width: 1600px;
23  height: 710px;
24  display: flexbox;
25  overflow: hidden;
26}
27
28.section-2 {
29  width: auto;
30  height: 375px;
31}
32
33ul {
34  list-style: none;
35  /*text-align: center;*/
36}
37
38li {
39  font-size: 15px;
40  display: inline-block;
41  margin: 0px;
42  /*margin-top: 50px;*/
43}
44
45.li-1 {
46  margin-left: 243px;
47}
48
49.li-2 {
50  margin-left: 45px;
51}
52
53.li-3 {
54  margin-left: 45px;
55}
56
57.li-4 {
58  margin-left: 110px;
59  font-size: 36px;
60  font-family: Georgia, "Times New Roman", Times, serif;
61  margin-top: 36px;
62}
63
64.li-5 {
65  margin-left: 100px;
66}
67
68.li-6 {
69  margin-left: 53px;
70}
71
72.li-7 {
73  margin-left: 48px;
74}
75
76.cont {
77  width: 4800px;
78  height: 710px;
79  display: flex;
80  /*overflow: hidden;*/
81}
82
83.cont-size {
84  width: 1600px;
85  height: 710px;
86}
87
88.cont1 {
89  background-color: #f1dfc8;
90}
91
92.cont2 {
93  background-color: blue;
94}
95
96.cont3 {
97  background-color: chartreuse;
98}
99
100img {
101  width: 1600px;
102  height: 710px;
103  margin: 0px;
104}
105

m.ts10806

2021/04/08 09:39

1つ前の質問が解決していれば質問せずに済む問題です。 https://teratail.com/questions/332241

iceforest

2021/04/09 14:56

申し訳ありません。一気に解決したくて焦りました。

退会済みユーザー

2021/04/11 11:01

そういうのは自分さえよければ良いという自分勝手な考え方だとは分からないのかな？

iceforest

2021/04/11 12:20

原因が違うと思っていませんでした。申し訳ありません。

iceforest

2021/04/11 13:05

かなり急いでいたので、自分が楽で簡単な方法を使ってしまいご迷惑をおかけしました。これからは、もっと調べて勉強してから要点を絞って質問したいと思います。貴重なお時間を浪費させてしまい申し訳ありませんでした。ありがとうございました。

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

回答2件

ベストアンサー

質問者さんのPCにあるファイルへは通常外部からのアクセスは許可されておりません。
ローカルで作成したフォルダを個人情報等に十分注意してエックスサーバーへアップロードして下さい。

以下のコードはCDNという仕組みを利用した記述に変更された方が良いかなと思います。

html
1<script src="C:\Users\名前.vscode\mosya\2\js\jquery-3.5.1.min.js"></script>

投稿2021/04/09 00:42

退会済みユーザー

総合スコア0

iceforest

2021/04/09 14:53

ありがとうございます。調べてやってみます。

iceforest

2021/04/09 15:36

画像を相対パスにしたらサーバー上のスライダーが復活しました。ただ、スライダーの2個めと3個めの画像が表示されません。なぜなのでしょうか。 CDNはググって勉強したので、エックスサーバーに聞いてみます。ありがとうございます。

退会済みユーザー

2021/04/10 11:26

他の方への返答を見るに、パスの書き方が違うから画像が出ないのだと思いますよ。相対パスについてもう少し勉強してみてください。 htmlファイルとフォルダ名2の位置関係が分からないので、一般論でしかお返事できません。それからjQueryのファイルも画像ファイルと同じく、基本的には質問者さんのPCのファイルを読みに行くことはできません。一般的にCDNという仕組みで提供されている別のサーバーのファイルを読み込ませます。

iceforest

2021/04/11 12:34 編集

ありがとうございます。原因がやっと理解できてきました。色々やってみます。

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

画像のパスを相対パスにしてください

投稿2021/04/08 09:29

black-ddd

総合スコア74

iceforest

2021/04/09 14:54

ありがとうございます。すぐにやってみます。

iceforest

2021/04/09 15:37

ありがとうございます。言われたとおりやってみたら、スライダーが復活しました。下が変更したコードです。 <div class="cont2 bot"><img alt="画像2" src="2\image\14.jpg" /></div> <div class="cont3 bot"><img alt="画像3" src="2\image\15.jpg" /></div> ただ、スライダーが復活したのですが、画像が表示されません。 <script src="C:\Users\正人.vscode\mosya\2\js\jquery-3.5.1.min.js"></script> この部分の問題なのでしょうか、それとももっと単純な問題なのでしょうか。教えて頂けるととてもありがたいです。

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

あなたの回答