質問編集履歴

6

コード、画像の更新

2020/05/06 22:56

投稿

writegrint
writegrint

スコア22

test CHANGED
File without changes
test CHANGED
@@ -1,320 +1,634 @@
1
+ サイトの模写をしているのですが、
2
+
1
- htmlでクラスを指定して、CSSでurlを書いたのに画像が表示されません。なぜでしょうか。コード載せます。
3
+ bootstrap, htmlでクラスを指定して、CSSでurlを書いたのに画像が表示されません。なぜでしょうか。コード載せます。
2
4
 
3
5
  ```ここに言語を入力
4
6
 
7
+ <!DOCTYPE html>
8
+
9
+ <html lang="ja">
10
+
11
+ <head>
12
+
13
+ <meta charset="utf-8">
14
+
15
+ <title>Bootstrapの練習</title>
16
+
17
+ <meta name="viewport" content="width=device-width, initial-scale=1">
18
+
19
+ <link rel="stylesheet" href="css/bootstrap.css">
20
+
21
+ <link rel="stylesheet" href="css/Bootstrap-practice.css">
22
+
23
+ <script type="text/javascript" src="js/jquery-3.5.0.min.js"></script>
24
+
25
+ <script type="text/javascript" src="js/bootstrap.js"></script>
26
+
27
+ <link href="https://fonts.googleapis.com/css2?family=Jost&family=Montserrat&display=swap" rel="stylesheet">
28
+
29
+
30
+
31
+ </head>
32
+
33
+ <body>
34
+
35
+ <h1></h1>
36
+
37
+ <button type="button" class="btn btn-default">概要</button>
38
+
39
+ <button type="button" class="btn btn-default">準備</button>
40
+
41
+ <button type="button" class="btn btn-default">安全</button>
42
+
43
+ <button type="button" class="btn btn-default">マネープラン</button>
44
+
5
- <div class="background-image">
45
+ <div class="text-right pr-5">
46
+
6
-
47
+ <button type="submit" class="btn btn-danger">はじめる</button>
7
-
8
48
 
9
49
  </div>
10
50
 
51
+ <div class="background-image">
52
+
53
+
54
+
55
+ <div class="row justify-content-end">
56
+
57
+ <div class="border col-5">
58
+
59
+ <br>
60
+
61
+ <h1 class="font-weight-bold">Airbnbホストになって、暮らしをレベルアップ</h1>
62
+
63
+ <h2 class="size1"><b>宿泊施設の内容を記入</b></h2>
64
+
65
+ <br>
66
+
67
+ <div class="row clear_form">
68
+
69
+ <div class="col-md">
70
+
71
+ <form>
72
+
73
+ <div class="form-group">
74
+
75
+ <input type="text" class="form-control">
76
+
77
+ <div class="d-flex">
78
+
79
+ <select class="form-control w-50">
80
+
81
+ <option>まるまる貸切</option>
82
+
83
+ <option>個室</option>
84
+
85
+ <option>シェアルーム</option>
86
+
87
+ </select>
88
+
89
+ <select class="form-control w-50">
90
+
91
+ <option>ゲスト1人</option>
92
+
93
+ <option>ゲスト2人</option>
94
+
95
+ <option>ゲスト3人</option>
96
+
97
+ <option>ゲスト4人</option>
98
+
99
+ <option>ゲスト5人</option>
100
+
101
+ <option>ゲスト6人</option>
102
+
103
+ <option>ゲスト7人</option>
104
+
105
+ <option>ゲスト8人</option>
106
+
107
+ <option>ゲスト9人</option>
108
+
109
+ <option>ゲスト10人</option>
110
+
111
+ <option>ゲスト11人</option>
112
+
113
+ <option>ゲスト12人</option>
114
+
115
+ <option>ゲスト13人</option>
116
+
117
+ <option>ゲスト14人</option>
118
+
119
+ <option>ゲスト15人</option>
120
+
121
+ <option>ゲスト16人</option>
122
+
123
+ </select>
124
+
125
+ </div>
126
+
127
+ <button type="submit" class="btn btn-danger ">はじめる</button>
128
+
129
+ </form>
130
+
131
+ </div>
132
+
133
+ </div>
134
+
135
+ </div>
136
+
137
+ </div>
138
+
139
+ </div>
140
+
141
+ </div>
142
+
143
+
144
+
145
+ <div class="flex1_div">
146
+
147
+ <div class="first_div">
148
+
149
+ <h2 style="text-align:center" class="size2" ><b>Airbnbでホストするこれだけの理由</b></h2>
150
+
151
+ <p style="text-align:center">どんなお家やお部屋でも、Airbnbなら簡単かつ安全にシェアでき、世界中の旅好きな仲間とつながれます。 予約可能日から料金、ハウスルール、ゲストとの交流程度まで、すべて自分で決めることができます。</p>
152
+
153
+ </div>
154
+
155
+ <div class="second_div">
156
+
157
+ <h2 style="text-align:center" class="size3"><b>困った時も安心</b></h2>
158
+
159
+ <p style="text-align:center">万一に備えるUS$1,000,000の財物補償、US$1,000,000の賠償責任保険が全予約に自動付帯。ホストのみなさまと建物・家財の安全をお守りするため全力で取り組んでいます。</p>
160
+
161
+ </div>
162
+
163
+ </div>
164
+
165
+
166
+
167
+
168
+
169
+ <h2 style="text-align:center" class="px"><b>3ステップでホスティング</b></h2>
170
+
171
+ <div class="flex1_div">
172
+
173
+ <div class="third_div">
174
+
175
+ <h3><b>無料でお部屋を掲載</b></h3>
176
+
177
+ <p>共有のリビングルームから別荘に至るまで、どんなスペースでも登録料なしで共有しましょう。</p>
178
+
179
+ </div>
180
+
181
+ <div class="f4_div">
182
+
183
+ <h3><b>ホスティング方法を設定</b></h3>
184
+
185
+ <p>スケジュール、料金、ゲストへの要件をご自身で選択しましょう。 お困りの際にはいつでもサポートいたします。
186
+
187
+ </p>
188
+
189
+ </div>
190
+
191
+ <div class="f5_div">
192
+
193
+ <h3><b>はじめてのゲストが来ます!</b></h3>
194
+
195
+ <p>リスティングが掲載されると、条件にかなったゲストから連絡を受けとることができます。 ゲストの到着前に質問があればメッセージを送信できます。</p>
196
+
197
+ <button type="button" class="btn btn-link mt-1">ホストを始める方法をチェック</button>
198
+
199
+ </div>
200
+
201
+ </div>
202
+
203
+ <div><p class="px3">“</p>
204
+
205
+ <h2 style="text-align:left" class="px1" >
206
+
207
+ 「ホスト保証」があったからAirbnb参加を決めたといっても過言でないほどで、被害やトラブルがあったときに頼れるサポートがあるのは本当にありがたいですね。</h2>
208
+
209
+ <p style="text-align:left" class="px1">Dennisさんはロンドンのホスト。自由度の高さに魅力を感じています</p>
210
+
211
+ <button type="submit" class="btn btn-outline-dark px1" >ホスト実践例をチェック</button>
212
+
213
+ </div>
214
+
215
+ <div class="background-image1">
216
+
217
+ </div>
218
+
219
+ <h2 style="text-align: center"class="px"><b>万一の時も安心です</b></h2>
220
+
221
+ <div class="flex_div">
222
+
223
+ <div class="f6_div">
224
+
225
+
226
+
227
+ <p class="px4">大切なお家にお迎えする相手選びは、信頼第一で進めたいですよね。 その思いに応えるため、Airbnbでは宿泊者に求める厳格な要件をホスト自身の手で設定し、滞在前にお互い交流できるシステムを採用しています。 万一のトラブルのときには、Airbnbが全力でサポートします。 建物・家財の被害は「ホスト保証」、賠償責任は「ホスト補償保険」でカバー。ホストのみなさまのあらゆるシチュエーションに対処しています。</p>
228
+
229
+ <button type="button" class="btn btn-link mt-1 px2">ホストを守るAirbnbの仕組みをチェック</button>
230
+
231
+ </div>
232
+
233
+ <div class="f7_div">
234
+
235
+ <ul>
236
+
237
+ <li>予約前に政府発行の身分証明書を求める権限</li>
238
+
239
+ <li>ハウスルールに同意しないと泊まれない</li>
240
+
241
+ <li>過去の宿泊のレビューもばっちり読める</li>
242
+
243
+ <li>財物損害は¥100,000,000まで無料で補償</li>
244
+
245
+ <li>$1,000,000の賠償責任保険が無料で付帯</li>
246
+
247
+ <li>24時間365日対応グローバルカスタマーサポート</li>
248
+
249
+
250
+
251
+ </ul>
252
+
253
+
254
+
255
+
256
+
257
+ </div>
258
+
259
+
260
+
261
+
262
+
263
+ </div>
264
+
265
+
266
+
267
+
268
+
269
+ </div>
270
+
271
+ <div class="background-image2">
272
+
273
+ </div>
274
+
275
+
276
+
277
+ </body>
278
+
279
+ </html>
280
+
281
+
282
+
11
283
  ```
12
284
 
285
+
286
+
287
+
288
+
13
289
  ```ここに言語を入力
14
290
 
291
+ .px {
292
+
293
+ font-size: 320%;
294
+
295
+ padding-top: 8%;
296
+
297
+ padding-bottom: 5%;
298
+
299
+ }
300
+
301
+ .size1{
302
+
303
+ font-size: 100%;
304
+
305
+ }
306
+
307
+ .size2{
308
+
309
+ font-size: 170%;
310
+
311
+
312
+
313
+ }
314
+
315
+ .size3{
316
+
317
+ font-size: 170%;
318
+
319
+ }
320
+
15
321
  .background-image{
16
322
 
17
- background-image:url(airbnb.png);
323
+ background-image: url(../airbnb.png);
324
+
325
+ background-repeat: no-repeat;
326
+
327
+ background-position: center center;
328
+
329
+ background-size: cover;
330
+
331
+ padding-bottom:33%
332
+
333
+ }
334
+
335
+ .flex1_div {
336
+
337
+ display: flex;
338
+
339
+ justify-content: center;
340
+
341
+ }
342
+
343
+ .first_div {
344
+
345
+ display: inline-block;
346
+
347
+ width: 24%;
348
+
349
+ padding:0.3%;
350
+
351
+ margin: 0 10px 0 0;
352
+
353
+ }
354
+
355
+ .second_div {
356
+
357
+ display: inline-block;
358
+
359
+ width: 24%;
360
+
361
+ padding:0.3%;
362
+
363
+ margin: 0 10px 0 0;
364
+
365
+ }
366
+
367
+ .third_div{
368
+
369
+ display: inline-block;
370
+
371
+ width: 16%;
372
+
373
+ padding:0.3%;
374
+
375
+ margin: 0 10px 0 0;
376
+
377
+ }
378
+
379
+ .f4_div{
380
+
381
+ display: inline-block;
382
+
383
+ width: 16%;
384
+
385
+ padding:0.3%;
386
+
387
+ margin: 0 10px 0 0;
388
+
389
+ }
390
+
391
+ .f5_div{
392
+
393
+ display: inline-block;
394
+
395
+ width: 16%;
396
+
397
+ padding:0.3%;
398
+
399
+ margin: 0 10px 0 0;
400
+
401
+ }
402
+
403
+ .px1{
404
+
405
+ width: 32%;
406
+
407
+ padding-left: 10%;
408
+
409
+ }
410
+
411
+ .px2{
412
+
413
+ padding-left: 10%;
414
+
415
+ }
416
+
417
+ .background-image1{
418
+
419
+ background-image:url(../airbnb3.png);
420
+
421
+ height:80%;
422
+
423
+ }
424
+
425
+ .form-control{
426
+
427
+ text-align: left
428
+
429
+ }
430
+
431
+ .form-group{
432
+
433
+ width: 100%;
434
+
435
+ }
436
+
437
+ .clear_form:after{
438
+
439
+ content: "";
440
+
441
+ display: block;
442
+
443
+ clear: both;
444
+
445
+ }
446
+
447
+ .px3{
448
+
449
+ font-size: 500%;
450
+
451
+ color:orange;
452
+
453
+ padding-left: 10%;
454
+
455
+ }
456
+
457
+ ul {
458
+
459
+ background: white;
460
+
461
+ padding: 0 0.5em;
462
+
463
+ position: relative;
464
+
465
+ }
466
+
467
+
468
+
469
+ ul li {
470
+
471
+ line-height: 1.5;
472
+
473
+ padding: 0.5em 0 0.5em 1.5em;
474
+
475
+ border-bottom: 2px solid white;
476
+
477
+ list-style-type: none!important;
478
+
479
+ }
480
+
481
+
482
+
483
+ ul li:before {
484
+
485
+ font-family: "Font Awesome 5 Free";
486
+
487
+ content: "\f00c";/*アイコン種類*/
488
+
489
+ position: absolute;
490
+
491
+ left : 1.0em; /*左端からのアイコンまで*/
492
+
493
+ color: #668ad8; /*アイコン色*/
494
+
495
+ }
496
+
497
+
498
+
499
+ ul li:last-of-type {
500
+
501
+ border-bottom: none;/*最後の線だけ消す*/
502
+
503
+ }
504
+
505
+
506
+
507
+ .f6_div{
508
+
509
+ /* display: inline-block;*/
510
+
511
+ width: 45%;
512
+
513
+ padding:0.3%;
514
+
515
+ margin: 0 10px 0 0;
516
+
517
+ }
518
+
519
+ .f7_div{
520
+
521
+ /*display: inline-block;*/
522
+
523
+ width: 30%;
524
+
525
+ padding:0.3%;
526
+
527
+ margin: 0 10px 0 0;
528
+
529
+ }
530
+
531
+
532
+
533
+ /*.px4{
534
+
535
+ width: 34%;
536
+
537
+ padding-left: 10%;
538
+
539
+ }*/
540
+
541
+
542
+
543
+ h2.px{
544
+
545
+ text-align: center;
546
+
547
+ }
548
+
549
+ .flex_div{
550
+
551
+ max-width: 1000px;
552
+
553
+ margin: 0 auto;
554
+
555
+ display: flex;
556
+
557
+ justify-content: space-evenly;
558
+
559
+ }
560
+
561
+ .background-image2{
562
+
563
+ background-image:url(../airbnb6.png);
564
+
565
+ height: 80%;
566
+
567
+ }
568
+
569
+ .f8_div{
570
+
571
+ display: inline-block;
572
+
573
+ width: 16%;
574
+
575
+ padding:0.3%;
576
+
577
+ margin: 0 10px 0 0;
578
+
579
+ }
580
+
581
+ .f9_div{
582
+
583
+ display: inline-block;
584
+
585
+ width: 25%;
586
+
587
+ padding:0.3%;
588
+
589
+ margin: 0 10px 0 0;
590
+
591
+ }
592
+
593
+ .f10_div{
594
+
595
+ display: inline-block;
596
+
597
+ width: 22%;
598
+
599
+ padding:0.3%;
600
+
601
+ margin: 0 10px 0 0;
602
+
603
+ }
604
+
605
+ .font1{
606
+
607
+ font-family: 'Jost', sans-serif;
608
+
609
+ font-family: 'Montserrat', sans-serif;
610
+
611
+ font-size: 300%;
18
612
 
19
613
  }
20
614
 
21
615
  ```
22
616
 
23
- ![イメージ説明](6c2123993e5af7242019efa970b27ea4.png)
24
-
25
- ![イメージ説明](b4fb4b643f10e6830d42f494090f28b8.png)
26
-
27
- 写真の通り、画像は同じ階層に保存してます。
28
-
29
-
30
-
31
- 一方の画像は表示できたのですが、もう一方の写真は表示できません。なぜなのでしょうか・・・?(backgroundの方はできて、新たに追加したbackground1の方は表示できません・・・)もちろん写真は同じ階層にあります
32
-
33
- ```
34
-
35
- ここに言語を入力
36
-
37
- <div class="background-image">
38
-
39
-
40
-
41
- <div class="row justify-content-end">
42
-
43
- <div class="border col-5">
44
-
45
- <br>
46
-
47
- <h1 class="font-weight-bold">Airbnbホストになって、暮らしをレベルアップ<h1>
48
-
49
- <h2 class="size1"><b>宿泊施設の内容を記入</b></h2>
50
-
51
- <br>
52
-
53
- <div class="row">
54
-
55
- <div class="col-md">
56
-
57
- <form>
58
-
59
- <div class="form-group">
60
-
61
- <input type="text" class="form-control">
62
-
63
- <div class="d-flex">
64
-
65
- <select class="form-control w-50">
66
-
67
- <option>まるまる貸切</option>
68
-
69
- <option>個室</option>
70
-
71
- <option>シェアルーム</option>
72
-
73
- </select>
74
-
75
- <select class="form-control w-50">
76
-
77
- <option>ゲスト1人</option>
78
-
79
- <option>ゲスト2人</option>
80
-
81
- <option>ゲスト3人</option>
82
-
83
- <option>ゲスト4人</option>
84
-
85
- <option>ゲスト5人</option>
86
-
87
- <option>ゲスト6人</option>
88
-
89
- <option>ゲスト7人</option>
90
-
91
- <option>ゲスト8人</option>
92
-
93
- <option>ゲスト9人</option>
94
-
95
- <option>ゲスト10人</option>
96
-
97
- <option>ゲスト11人</option>
98
-
99
- <option>ゲスト12人</option>
100
-
101
- <option>ゲスト13人</option>
102
-
103
- <option>ゲスト14人</option>
104
-
105
- <option>ゲスト15人</option>
106
-
107
- <option>ゲスト16人</option>
108
-
109
- </select>
110
-
111
- <button type="submit" class="btn btn-danger">はじめる</button>
112
-
113
- </div>
114
-
115
- </form>
116
-
117
- </div>
118
-
119
- </div>
120
-
121
- </div>
122
-
123
- </div>
124
-
125
- </div>
126
-
127
-
128
-
129
-
130
-
131
- </div>
132
-
133
-
134
-
135
- <div class="flex_div">
136
-
137
- <div class="first_div">
138
-
139
- <h2 style="text-align:center" class="size2" ><b>Airbnbでホストするこれだけの理由</b></h2>
140
-
141
- <p style="text-align:center">どんなお家やお部屋でも、Airbnbなら簡単かつ安全にシェアでき、世界中の旅好きな仲間とつながれます。 予約可能日から料金、ハウスルール、ゲストとの交流程度まで、すべて自分で決めることができます。</p>
142
-
143
- </div>
144
-
145
- <div class="second_div">
146
-
147
- <h2 style="text-align:center" class="size3"><b>困った時も安心</b></h2>
148
-
149
- <p style="text-align:center">万一に備えるUS$1,000,000の財物補償、US$1,000,000の賠償責任保険が全予約に自動付帯。ホストのみなさまと建物・家財の安全をお守りするため全力で取り組んでいます。</p>
150
-
151
- </div>
152
-
153
- </div>
154
-
155
-
156
-
157
-
158
-
159
- <h2 style="text-align:center" class="px"><b>3ステップでホスティング</b></h2>
160
-
161
- <div class="flex_div">
162
-
163
- <div class="third_div">
164
-
165
- <h3><b>無料でお部屋を掲載</b></h3>
166
-
167
- <p>共有のリビングルームから別荘に至るまで、どんなスペースでも登録料なしで共有しましょう。</p>
168
-
169
- </div>
170
-
171
- <div class="f4_div">
172
-
173
- <h3><b>ホスティング方法を設定</b></h3>
174
-
175
- <p>スケジュール、料金、ゲストへの要件をご自身で選択しましょう。 お困りの際にはいつでもサポートいたします。
176
-
177
- </p>
178
-
179
- </div>
180
-
181
- <div class="f5_div">
182
-
183
- <h3><b>はじめてのゲストが来ます!</b></h3>
184
-
185
- <p>リスティングが掲載されると、条件にかなったゲストから連絡を受けとることができます。 ゲストの到着前に質問があればメッセージを送信できます。</p>
186
-
187
- <button type="button" class="btn btn-link mt-1">ホストを始める方法をチェック</button>
188
-
189
- </div>
190
-
191
- </div>
192
-
193
- <div>
194
-
195
- <h2 style="text-align:left"class="px1" >“
196
-
197
- 「ホスト保証」があったからAirbnb参加を決めたといっても過言でないほどで、被害やトラブルがあったときに頼れるサポートがあるのは本当にありがたいですね。</h2>
198
-
199
- <p style="text-align:left" class="px1">Dennisさんはロンドンのホスト。自由度の高さに魅力を感じています</p>
200
-
201
- <button type="submit" class="btn btn-outline-dark px1" >ホスト実践例をチェック</button>
202
-
203
- </div>
204
-
205
- <div class="background-image1">
206
-
207
- </div>
208
-
209
- コード
210
-
211
- ```
212
-
213
- ```
214
-
215
- .background-image{
216
-
217
- background-image:url(../airbnb.png);
218
-
219
- background-repeat: no-repeat;
220
-
221
- background-position: center center;
222
-
223
- padding-bottom: 20%;
224
-
225
- }
226
-
227
- .flex_div {
228
-
229
- display: flex;
230
-
231
- justify-content: center;
232
-
233
- }
234
-
235
- .first_div {
236
-
237
- display: inline-block;
238
-
239
- width: 24%;
240
-
241
- padding:0.3%;
242
-
243
- margin: 0 10px 0 0;
244
-
245
- }
246
-
247
- .second_div {
248
-
249
- display: inline-block;
250
-
251
- width: 24%;
252
-
253
- padding:0.3%;
254
-
255
- margin: 0 10px 0 0;
256
-
257
- }
258
-
259
- .third_div{
260
-
261
- display: inline-block;
262
-
263
- width: 16%;
264
-
265
- padding:0.3%;
266
-
267
- margin: 0 10px 0 0;
268
-
269
- }
270
-
271
- .f4_div{
272
-
273
- display: inline-block;
274
-
275
- width: 16%;
276
-
277
- padding:0.3%;
278
-
279
- margin: 0 10px 0 0;
280
-
281
- }
282
-
283
- .f5_div{
284
-
285
- display: inline-block;
286
-
287
- width: 16%;
288
-
289
- padding:0.3%;
290
-
291
- margin: 0 10px 0 0;
292
-
293
- }
294
-
295
- .px1{
296
-
297
- width: 35%;
298
-
299
- padding-left: 10%;
300
-
301
- }
302
-
303
- .background-image1{
304
-
305
- background-image:url(../airbnb3.png);
306
-
307
- }
308
-
309
-
310
-
311
- こに言語を入力
312
-
313
-
314
-
315
- コード
316
-
317
- ```
617
+
618
+
619
+ ![イメージ説明](eaa2c3da35f0b0c759e95f1c7d7e5fb7.png)
620
+
621
+ ![イメージ説明](41ec67bb37fafc43b157ee0b25460e47.png)
622
+
623
+ ![イメージ説明](d4592832f7fbb8e4e74f7babd1f68aae.png)
624
+
625
+ ![イメージ説明](7d39293fd833daa2af47dc7814b15817.png)
626
+
627
+ ![イメージ説明](f24f57598b8bd9c4b42f9b8810f19990.png)
628
+
629
+ ![イメージ説明](3014fea011e3b84ae4b5abe3f5a0bdd7.png)
630
+
631
+ ![イメージ説明](a710c0571a00b14935ded6097764547a.png)
318
632
 
319
633
  追記:読み込み権限の画像の追記しました。
320
634
 

5

画像の追加

2020/05/06 22:56

投稿

writegrint
writegrint

スコア22

test CHANGED
File without changes
test CHANGED
@@ -315,3 +315,7 @@
315
315
  コード
316
316
 
317
317
  ```
318
+
319
+ 追記:読み込み権限の画像の追記しました。
320
+
321
+ ![イメージ説明](31796c87cdb54cfd8f8b15eedea52c34.png)

4

CSSのコード変更

2020/05/06 20:39

投稿

writegrint
writegrint

スコア22

test CHANGED
File without changes
test CHANGED
@@ -210,7 +210,9 @@
210
210
 
211
211
  ```
212
212
 
213
+ ```
214
+
213
- ```こ.background-image{
215
+ .background-image{
214
216
 
215
217
  background-image:url(../airbnb.png);
216
218
 

3

文章の追加

2020/05/02 04:36

投稿

writegrint
writegrint

スコア22

test CHANGED
File without changes
test CHANGED
@@ -28,7 +28,7 @@
28
28
 
29
29
 
30
30
 
31
- 一方の画像は表示できたのですが、もう一方の写真は表示できません。なぜなのでしょうか・・・?(backgroundの方はできて、新たに追加したbackground1の方は表示できません・・・)
31
+ 一方の画像は表示できたのですが、もう一方の写真は表示できません。なぜなのでしょうか・・・?(backgroundの方はできて、新たに追加したbackground1の方は表示できません・・・)もちろん写真は同じ階層にあります
32
32
 
33
33
  ```
34
34
 

2

新たな背景画像のコードの追加

2020/05/01 18:45

投稿

writegrint
writegrint

スコア22

test CHANGED
File without changes
test CHANGED
@@ -25,3 +25,291 @@
25
25
  ![イメージ説明](b4fb4b643f10e6830d42f494090f28b8.png)
26
26
 
27
27
  写真の通り、画像は同じ階層に保存してます。
28
+
29
+
30
+
31
+ 一方の画像は表示できたのですが、もう一方の写真は表示できません。なぜなのでしょうか・・・?(backgroundの方はできて、新たに追加したbackground1の方は表示できません・・・)
32
+
33
+ ```
34
+
35
+ ここに言語を入力
36
+
37
+ <div class="background-image">
38
+
39
+
40
+
41
+ <div class="row justify-content-end">
42
+
43
+ <div class="border col-5">
44
+
45
+ <br>
46
+
47
+ <h1 class="font-weight-bold">Airbnbホストになって、暮らしをレベルアップ<h1>
48
+
49
+ <h2 class="size1"><b>宿泊施設の内容を記入</b></h2>
50
+
51
+ <br>
52
+
53
+ <div class="row">
54
+
55
+ <div class="col-md">
56
+
57
+ <form>
58
+
59
+ <div class="form-group">
60
+
61
+ <input type="text" class="form-control">
62
+
63
+ <div class="d-flex">
64
+
65
+ <select class="form-control w-50">
66
+
67
+ <option>まるまる貸切</option>
68
+
69
+ <option>個室</option>
70
+
71
+ <option>シェアルーム</option>
72
+
73
+ </select>
74
+
75
+ <select class="form-control w-50">
76
+
77
+ <option>ゲスト1人</option>
78
+
79
+ <option>ゲスト2人</option>
80
+
81
+ <option>ゲスト3人</option>
82
+
83
+ <option>ゲスト4人</option>
84
+
85
+ <option>ゲスト5人</option>
86
+
87
+ <option>ゲスト6人</option>
88
+
89
+ <option>ゲスト7人</option>
90
+
91
+ <option>ゲスト8人</option>
92
+
93
+ <option>ゲスト9人</option>
94
+
95
+ <option>ゲスト10人</option>
96
+
97
+ <option>ゲスト11人</option>
98
+
99
+ <option>ゲスト12人</option>
100
+
101
+ <option>ゲスト13人</option>
102
+
103
+ <option>ゲスト14人</option>
104
+
105
+ <option>ゲスト15人</option>
106
+
107
+ <option>ゲスト16人</option>
108
+
109
+ </select>
110
+
111
+ <button type="submit" class="btn btn-danger">はじめる</button>
112
+
113
+ </div>
114
+
115
+ </form>
116
+
117
+ </div>
118
+
119
+ </div>
120
+
121
+ </div>
122
+
123
+ </div>
124
+
125
+ </div>
126
+
127
+
128
+
129
+
130
+
131
+ </div>
132
+
133
+
134
+
135
+ <div class="flex_div">
136
+
137
+ <div class="first_div">
138
+
139
+ <h2 style="text-align:center" class="size2" ><b>Airbnbでホストするこれだけの理由</b></h2>
140
+
141
+ <p style="text-align:center">どんなお家やお部屋でも、Airbnbなら簡単かつ安全にシェアでき、世界中の旅好きな仲間とつながれます。 予約可能日から料金、ハウスルール、ゲストとの交流程度まで、すべて自分で決めることができます。</p>
142
+
143
+ </div>
144
+
145
+ <div class="second_div">
146
+
147
+ <h2 style="text-align:center" class="size3"><b>困った時も安心</b></h2>
148
+
149
+ <p style="text-align:center">万一に備えるUS$1,000,000の財物補償、US$1,000,000の賠償責任保険が全予約に自動付帯。ホストのみなさまと建物・家財の安全をお守りするため全力で取り組んでいます。</p>
150
+
151
+ </div>
152
+
153
+ </div>
154
+
155
+
156
+
157
+
158
+
159
+ <h2 style="text-align:center" class="px"><b>3ステップでホスティング</b></h2>
160
+
161
+ <div class="flex_div">
162
+
163
+ <div class="third_div">
164
+
165
+ <h3><b>無料でお部屋を掲載</b></h3>
166
+
167
+ <p>共有のリビングルームから別荘に至るまで、どんなスペースでも登録料なしで共有しましょう。</p>
168
+
169
+ </div>
170
+
171
+ <div class="f4_div">
172
+
173
+ <h3><b>ホスティング方法を設定</b></h3>
174
+
175
+ <p>スケジュール、料金、ゲストへの要件をご自身で選択しましょう。 お困りの際にはいつでもサポートいたします。
176
+
177
+ </p>
178
+
179
+ </div>
180
+
181
+ <div class="f5_div">
182
+
183
+ <h3><b>はじめてのゲストが来ます!</b></h3>
184
+
185
+ <p>リスティングが掲載されると、条件にかなったゲストから連絡を受けとることができます。 ゲストの到着前に質問があればメッセージを送信できます。</p>
186
+
187
+ <button type="button" class="btn btn-link mt-1">ホストを始める方法をチェック</button>
188
+
189
+ </div>
190
+
191
+ </div>
192
+
193
+ <div>
194
+
195
+ <h2 style="text-align:left"class="px1" >“
196
+
197
+ 「ホスト保証」があったからAirbnb参加を決めたといっても過言でないほどで、被害やトラブルがあったときに頼れるサポートがあるのは本当にありがたいですね。</h2>
198
+
199
+ <p style="text-align:left" class="px1">Dennisさんはロンドンのホスト。自由度の高さに魅力を感じています</p>
200
+
201
+ <button type="submit" class="btn btn-outline-dark px1" >ホスト実践例をチェック</button>
202
+
203
+ </div>
204
+
205
+ <div class="background-image1">
206
+
207
+ </div>
208
+
209
+ コード
210
+
211
+ ```
212
+
213
+ ```こ.background-image{
214
+
215
+ background-image:url(../airbnb.png);
216
+
217
+ background-repeat: no-repeat;
218
+
219
+ background-position: center center;
220
+
221
+ padding-bottom: 20%;
222
+
223
+ }
224
+
225
+ .flex_div {
226
+
227
+ display: flex;
228
+
229
+ justify-content: center;
230
+
231
+ }
232
+
233
+ .first_div {
234
+
235
+ display: inline-block;
236
+
237
+ width: 24%;
238
+
239
+ padding:0.3%;
240
+
241
+ margin: 0 10px 0 0;
242
+
243
+ }
244
+
245
+ .second_div {
246
+
247
+ display: inline-block;
248
+
249
+ width: 24%;
250
+
251
+ padding:0.3%;
252
+
253
+ margin: 0 10px 0 0;
254
+
255
+ }
256
+
257
+ .third_div{
258
+
259
+ display: inline-block;
260
+
261
+ width: 16%;
262
+
263
+ padding:0.3%;
264
+
265
+ margin: 0 10px 0 0;
266
+
267
+ }
268
+
269
+ .f4_div{
270
+
271
+ display: inline-block;
272
+
273
+ width: 16%;
274
+
275
+ padding:0.3%;
276
+
277
+ margin: 0 10px 0 0;
278
+
279
+ }
280
+
281
+ .f5_div{
282
+
283
+ display: inline-block;
284
+
285
+ width: 16%;
286
+
287
+ padding:0.3%;
288
+
289
+ margin: 0 10px 0 0;
290
+
291
+ }
292
+
293
+ .px1{
294
+
295
+ width: 35%;
296
+
297
+ padding-left: 10%;
298
+
299
+ }
300
+
301
+ .background-image1{
302
+
303
+ background-image:url(../airbnb3.png);
304
+
305
+ }
306
+
307
+
308
+
309
+ こに言語を入力
310
+
311
+
312
+
313
+ コード
314
+
315
+ ```

1

画像の追加

2020/05/01 18:44

投稿

writegrint
writegrint

スコア22

test CHANGED
File without changes
test CHANGED
@@ -19,3 +19,9 @@
19
19
  }
20
20
 
21
21
  ```
22
+
23
+ ![イメージ説明](6c2123993e5af7242019efa970b27ea4.png)
24
+
25
+ ![イメージ説明](b4fb4b643f10e6830d42f494090f28b8.png)
26
+
27
+ 写真の通り、画像は同じ階層に保存してます。