質問編集履歴

8

修正いたしました

2021/12/18 06:37

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
@@ -214,7 +214,7 @@
214
214
 
215
215
  1
216
216
 
217
- ![FTPエラー詳細](ada37a12d701ce40226f32f99558ec25.jpeg)
217
+
218
218
 
219
219
  [エラーがこれに値するかも](https://qiita.com/peco4107/items/6c8fba1a13c54a5447a7)
220
220
 

7

修正いたしました

2021/12/18 06:37

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
@@ -194,12 +194,26 @@
194
194
 
195
195
  ローカルではきちんと保存されています。
196
196
 
197
+ ![画像2](90bcc4a0bc8090935df2c05959c0febd.jpeg)
198
+
199
+
200
+
201
+ 画像2は、background-imgの相対パスと左の状況を示しています。
202
+
197
- [フォルダー構造](https://25.gigafile.nu/1219-c8aef601b0a6c27bbc91dd9abf8525549)
203
+ 相対パスは正しいですが(画像3を見ればわかります)、非表示です。「../../」→「./../」に変更することでgoogle
204
+
205
+ ツール上では見れます。ここに違和感とfilezillaを使って、何回やってもできないため、質問しています。
206
+
207
+
208
+
209
+ 本当にいろいろ試していますが、できないです。↓
198
210
 
199
211
 
200
212
 
201
213
  ### 追記
202
214
 
215
+ 1
216
+
203
217
  ![FTPエラー詳細](ada37a12d701ce40226f32f99558ec25.jpeg)
204
218
 
205
219
  [エラーがこれに値するかも](https://qiita.com/peco4107/items/6c8fba1a13c54a5447a7)
@@ -216,4 +230,16 @@
216
230
 
217
231
  ※しかし、「#{@user.id}.jpg,png」を書いたところは
218
232
 
219
- 「Failed to load resource: the server responded with a status of 404 」は消えましたが、結論反映されません。
233
+ 「Failed to load resource: the server responded with a status of 404 」は消えましたが、結論反映されません。
234
+
235
+
236
+
237
+ 2.filezillaを自動選択設定にして、修正→できない
238
+
239
+
240
+
241
+
242
+
243
+ 根本的に何が原因でどんな改善策があるのか、ここまでしてできないとわからないです。ご教授お願い致します
244
+
245
+ ※初めは、相対パスだと思いましたが、、

6

修正しました

2021/12/18 06:36

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
@@ -58,8 +58,6 @@
58
58
 
59
59
  ### 該当のソースコード
60
60
 
61
-
62
-
63
61
  ```HTML
64
62
 
65
63
  <!DOCTYPE html>
@@ -146,254 +144,10 @@
146
144
 
147
145
 
148
146
 
149
- ```css
150
-
151
-
152
-
153
- .access {
154
-
155
- background-image: url(../img/bg-japanese-paper.png);
156
-
157
- background-position: center;
158
-
159
- background-repeat: no-repeat;
160
-
161
- background-size: cover;
162
-
163
- }
164
-
165
-
166
-
167
- .access-flex {
168
-
169
- display: -webkit-box;
170
-
171
- display: -webkit-flex;
172
-
173
- display: -ms-flexbox;
174
-
175
- display: flex;
176
-
177
- }
178
-
179
-
180
-
181
- @media screen and (max-width: 1100px) {
182
-
183
- .access-flex {
184
-
185
- display: -webkit-box;
186
-
187
- display: -webkit-flex;
188
-
189
- display: -ms-flexbox;
190
-
191
- display: flex;
192
-
193
- -webkit-box-orient: vertical;
194
-
195
- -webkit-box-direction: normal;
196
-
197
- -webkit-flex-direction: column;
198
-
199
- -ms-flex-direction: column;
200
-
201
- flex-direction: column;
202
-
203
- width: 100%;
204
-
205
- -webkit-box-sizing: border-box;
206
-
207
- box-sizing: border-box;
208
-
209
- padding: 0px 20px;
210
-
211
- }
212
-
213
- }
214
-
215
-
216
-
217
- .access-flex > img {
218
-
219
- width: calc(656/1180*100%);
220
-
221
- height: calc(370/1381*100%);
222
-
223
- padding-top: 50px;
224
-
225
- padding-left: 350px;
226
-
227
- }
228
-
229
-
230
-
231
- @media screen and (max-width: 1100px) {
232
-
233
- .access-flex > img {
234
-
235
- width: 95%;
236
-
237
- height: 100%;
238
-
239
- padding: 20px 15px;
240
-
241
- margin: 0 auto;
242
-
243
- }
244
-
245
- }
246
-
247
-
248
-
249
- .access-flex .access-txt {
250
-
251
- padding-top: 50px;
252
-
253
- padding-left: 83px;
254
-
255
- }
256
-
257
-
258
-
259
- .access-flex .access-txt p {
260
-
261
- padding-top: 24px;
262
-
263
- }
264
-
265
-
266
-
267
- .access-flex .access-txt .extra-bold {
268
-
269
- font-weight: bold;
270
-
271
- }
272
-
273
-
274
-
275
- @media screen and (max-width: 1100px) {
276
-
277
- .access-flex .access-txt {
278
-
279
- padding: 0;
280
-
281
- margin: 30px auto 0 auto;
282
-
283
- width: 80%;
284
-
285
- }
286
-
287
- }
288
-
289
-
290
-
291
- .access .map {
292
-
293
- position: relative;
294
-
295
- width: 100%;
296
-
297
- padding-top: 50%;
298
-
299
- /* = height ÷ width × 100 */
300
-
301
- max-width: 765px;
302
-
303
- margin: 0 auto;
304
-
305
- }
306
-
307
-
308
-
309
- @media screen and (max-width: 1100px) {
310
-
311
- .access .map {
312
-
313
- width: 95%;
314
-
315
- height: 100%;
316
-
317
- padding: 20px 15px;
318
-
319
- margin: 0 auto;
320
-
321
- padding-top: 50%;
322
-
323
- }
324
-
325
- }
326
-
327
-
328
-
329
- .access .map > iframe {
330
-
331
- position: absolute;
332
-
333
- top: 0;
334
-
335
- left: 0;
336
-
337
- width: 100%;
338
-
339
- height: 100%;
340
-
341
- padding: 75px 40px;
342
-
343
- }
344
-
345
-
346
-
347
- @media screen and (max-width: 1100px) {
348
-
349
- .access .map > iframe {
350
-
351
- top: 50%;
352
-
353
- left: 50%;
354
-
355
- -webkit-transform: translate(-50%, -50%);
356
-
357
- transform: translate(-50%, -50%);
358
-
359
- width: 70%;
360
-
361
- text-align: center;
362
-
363
- }
364
-
365
- }
366
-
367
-
368
-
369
- @media screen and (max-width: 1100px) {
370
-
371
- .access .map {
372
-
373
- /* position: absolute;
374
-
375
- left: 50%;
376
-
377
- top: 50%; */
378
-
379
- }
380
-
381
- }
382
-
383
-
384
-
385
- ```
386
-
387
-
388
-
389
147
  ### 追記 ディレクトリー構造
390
148
 
391
149
  ディレクトリー構図の共有です。よろしくお願いいたします。
392
150
 
393
-
394
-
395
-
396
-
397
151
  coding2
398
152
 
399
153
  ├── css
@@ -456,16 +210,6 @@
456
210
 
457
211
 
458
212
 
459
- この画像について説明します。
460
-
461
- vscodeで表記されているパスコード(../img~)をgoogleツールで書くと、画像が反映されます。従って、scssファイルに左側のパスコードで書きました。しかし、右側を見ると、(../../img~)のような表記になっています。
462
-
463
-
464
-
465
- 何が起こっているのか、原因もつかめず、この原因に2~3日苦戦しています。
466
-
467
-
468
-
469
213
  いろいろ調べると、サーバーを通して画像が表示されないような記事が見つかり、こちらを参考に「img/」の後ろに
470
214
 
471
215
  「#{@user.id}.jpg,png」を書いてますが、こちらも表示できませんでした。
@@ -473,11 +217,3 @@
473
217
  ※しかし、「#{@user.id}.jpg,png」を書いたところは
474
218
 
475
219
  「Failed to load resource: the server responded with a status of 404 」は消えました→が、結論は反映されません。
476
-
477
- 恐れ入りますが、原因と解決策をご教授頂けると幸いです。
478
-
479
-
480
-
481
- 何卒よろしくお願いいたします。
482
-
483
- を書きました

5

追記しました

2021/12/18 06:29

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
@@ -441,3 +441,43 @@
441
441
  ローカルではきちんと保存されています。
442
442
 
443
443
  [フォルダー構造](https://25.gigafile.nu/1219-c8aef601b0a6c27bbc91dd9abf8525549)
444
+
445
+
446
+
447
+ ### 追記
448
+
449
+ ![FTPエラー詳細](ada37a12d701ce40226f32f99558ec25.jpeg)
450
+
451
+ [エラーがこれに値するかも](https://qiita.com/peco4107/items/6c8fba1a13c54a5447a7)
452
+
453
+
454
+
455
+ googleツールで見るとエラー:「Failed to load resource: the server responded with a status of 404 ()」です。
456
+
457
+
458
+
459
+ この画像について説明します。
460
+
461
+ vscodeで表記されているパスコード(../img~)をgoogleツールで書くと、画像が反映されます。従って、scssファイルに左側のパスコードで書きました。しかし、右側を見ると、(../../img~)のような表記になっています。
462
+
463
+
464
+
465
+ 何が起こっているのか、原因もつかめず、この原因に2~3日苦戦しています。
466
+
467
+
468
+
469
+ いろいろ調べると、サーバーを通して画像が表示されないような記事が見つかり、こちらを参考に「img/」の後ろに
470
+
471
+ 「#{@user.id}.jpg,png」を書いてますが、こちらも表示できませんでした。
472
+
473
+ ※しかし、「#{@user.id}.jpg,png」を書いたところは
474
+
475
+ 「Failed to load resource: the server responded with a status of 404 」は消えました→が、結論は反映されません。
476
+
477
+ 恐れ入りますが、原因と解決策をご教授頂けると幸いです。
478
+
479
+
480
+
481
+ 何卒よろしくお願いいたします。
482
+
483
+ を書きました

4

修正しました。

2021/12/15 17:13

投稿

free_teku
free_teku

スコア103

test CHANGED
@@ -1 +1 @@
1
- FTPを使うと、一部の画像が表示されない
1
+ Filezillaを使うと、一部の画像が表示されない
test CHANGED
@@ -436,4 +436,8 @@
436
436
 
437
437
 
438
438
 
439
+ FTPソフトはFilezillaのことを指いています。
440
+
441
+ ローカルではきちんと保存されています。
442
+
439
443
  [フォルダー構造](https://25.gigafile.nu/1219-c8aef601b0a6c27bbc91dd9abf8525549)

3

修正しました

2021/12/14 05:45

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
@@ -40,7 +40,7 @@
40
40
 
41
41
  ```
42
42
 
43
- bg-img:;URL ();の時に起こります
43
+ background-img:;URL ();の時に起こります
44
44
 
45
45
  ```
46
46
 
@@ -429,3 +429,11 @@
429
429
 
430
430
 
431
431
  ### 補足情報(FW/ツールのバージョンなど)
432
+
433
+ 下記にフォルダー添付します。ご教授頂けると幸いです。
434
+
435
+ 何卒よろしくお願いいたします。(__)
436
+
437
+
438
+
439
+ [フォルダー構造](https://25.gigafile.nu/1219-c8aef601b0a6c27bbc91dd9abf8525549)

2

追記しました

2021/12/14 05:42

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
@@ -386,7 +386,41 @@
386
386
 
387
387
 
388
388
 
389
-
389
+ ### 追記 ディレクトリー構造
390
+
391
+ ディレクトリー構図の共有です。よろしくお願いいたします。
392
+
393
+
394
+
395
+
396
+
397
+ coding2
398
+
399
+ ├── css
400
+
401
+ │ ├──style.css
402
+
403
+ │ ├──destyle.css
404
+
405
+
406
+
407
+
408
+
409
+ ├── scss
410
+
411
+ │ ├── layout
412
+
413
+ │ └── foundation
414
+
415
+ │ └── content
416
+
417
+ │ └──access.scss
418
+
419
+
420
+
421
+ ├──img
422
+
423
+ ├── bg-japanese-paper.png
390
424
 
391
425
 
392
426
 

1

修正しました

2021/12/11 08:54

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
@@ -70,6 +70,8 @@
70
70
 
71
71
  <title></title>
72
72
 
73
+ <link href="./css/style.css" rel="stylesheet">
74
+
73
75
  </head>
74
76
 
75
77
  <body>