質問編集履歴

1

質問内容が明確になるように、コードを簡素化しました。

2020/06/16 01:59

投稿

pokenasu11
pokenasu11

スコア23

test CHANGED
@@ -1 +1 @@
1
- [Airbnb模写]重なってしまいます
1
+ [Airbnb模写]重なってしまいます
test CHANGED
@@ -4,7 +4,13 @@
4
4
 
5
5
 
6
6
 
7
- レスポンシブにして面を小さくする、.desc上にきてしまいます(わかりやすいよに色をつけてありす)。小さする際に、画像を下にもぐらせたり、position:absoluteで画像の上にしてた部分を戻したりしたので、z-indexの問題かと思い、いじってはみたのですが解決できませんでした.descのトップマージンを大きくして強引に見えるようにする方法以外思いつかず(それだと崩れやすいような)、相談させていただきます。
7
+ トップの文字の関係がうまくいきません。
8
+
9
+ 簡素化したコードを貼ります。
10
+
11
+ 画面を狭くすると、position:absoluteでベージュの面にのせていた赤色の面を元の位置に戻し、代わりにベージュの面を下にもぐらせるイメージで作りました。しかし、後に続くはずのピンクの面がかぶさってしまいます。ピンクの面を赤(青)の面に続けたいのですが方法はありますか?
12
+
13
+ このやり方では無理であれば、Airbnbのやり方を知りたいのですが、検証で見ても複雑で、解説していただけないでしょうか。
8
14
 
9
15
 
10
16
 
@@ -16,6 +22,8 @@
16
22
 
17
23
 
18
24
 
25
+
26
+
19
27
  ```html
20
28
 
21
29
  <body>
@@ -24,100 +32,24 @@
24
32
 
25
33
  <section class="landing">
26
34
 
35
+ <div class="img"></div>
36
+
37
+ <div class="sqrRed">
38
+
39
+ <h2>あいうえおかきくけこさしすせそたちつてとなにぬねのは</h2>
40
+
27
- <div class="landing-img">
41
+ <div class="sqrBlue">
42
+
43
+
44
+
45
+ </div>
28
46
 
29
47
  </div>
30
48
 
31
- <div class="search-pc">
49
+ <div class="sqrPink">
32
-
33
- <h2>Airbnbホストになって、暮らしをレベルアップ</h2>
34
-
35
- <div class="search-sp">
36
-
37
- <div class="search-form">
38
-
39
- <p>宿泊施設の内容を記入</p>
40
-
41
- <input type="text" placeholder="ロケーション" />
42
-
43
- <div class="labels">
44
-
45
- <label class="lb staytype" for="staytype">
46
-
47
- <select name="" id="staytype">
48
-
49
- <option value="charter">まるまる貸切</option>
50
-
51
- <option value="private">個室</option>
52
-
53
- <option value="share">シェアルーム</option>
54
-
55
- </select></label
56
-
57
- >
58
-
59
-
60
-
61
- <label class="lb people" for="people">
62
-
63
- <select name="" id="people">
64
-
65
- <option value="one">ゲスト1人</option>
66
-
67
- <option value="two">ゲスト2人</option>
68
-
69
- <option value="three">ゲスト3人</option>
70
-
71
- <option value="four">ゲスト4人</option>
72
-
73
- <option value="five">ゲスト5人</option>
74
-
75
- <option value="six">ゲスト6人</option>
76
-
77
- </select></label
78
-
79
- >
80
-
81
- </div>
82
-
83
- <button>はじめる</button>
84
-
85
- </div>
86
-
87
- </div>
88
50
 
89
51
  </div>
90
52
 
91
- <div class="desc main-wrapper">
92
-
93
- <div class="sub-wrapper2">
94
-
95
- <h3>なぜAirbnbでホスト?</h3>
96
-
97
- <p>
98
-
99
- どんなお家やお部屋でも、Airbnbなら簡単かつ安全にシェアして、世界中の旅好きな仲間とつながれます。
100
-
101
- 予約可能日から料金、ハウスルール、ゲストとの交流頻度まで、すべて自分で決めることができます。
102
-
103
- </p>
104
-
105
- </div>
106
-
107
- <div class="sub-wrapper2">
108
-
109
- <h3>困ったときも安心</h3>
110
-
111
- <p>
112
-
113
- 万一に備えるUS$1,000,000の財物補償、US$1,000,000の賠償責任保険が全予約に自動付帯。ホストのみなさまと建物・家財の安全をお守りするため全力で取り組んでいます。
114
-
115
- </p>
116
-
117
- </div>
118
-
119
- </div>
120
-
121
53
  </section>
122
54
 
123
55
 
@@ -128,474 +60,150 @@
128
60
 
129
61
  ```sass
130
62
 
131
-
132
-
133
- $green: #008489;
134
-
135
- $blue: #006c70;
136
-
137
- $yellow: #fdb32b;
138
-
139
- $grey: #767676;
140
-
141
- $red: #dd0f63;
142
-
143
63
  body {
144
64
 
145
- font-family: "メイリオ", "Meiryo", "MS PGothic";
146
-
147
- font-size: 16px;
148
-
149
65
  position: relative;
150
66
 
151
67
  }
152
68
 
153
69
 
154
70
 
155
- h1 {
71
+ h2 {
156
-
72
+
157
- font-size: 60px;
73
+ font-size: 40px;
158
-
74
+
159
- line-height: 64px;
75
+ line-height: 40px;
160
-
76
+
161
- font-weight: 900;
77
+ font-weight: 800;
162
78
 
163
79
  color: #333;
164
80
 
165
81
  }
166
82
 
167
- h2 {
83
+ .container {
168
-
84
+
169
- font-size: 40px;
85
+ width: 1032px;
86
+
170
-
87
+ }
88
+
89
+
90
+
91
+ .landing {
92
+
93
+ .img {
94
+
95
+ position: relative;
96
+
97
+ text-align: center;
98
+
99
+ margin: 0 auto;
100
+
101
+ background-color: beige;
102
+
103
+ width: 100%;
104
+
171
- line-height: 40px;
105
+ height: 600px;
172
-
173
- font-weight: 800;
106
+
174
-
175
- color: #333;
107
+
176
-
177
-
178
-
108
+
179
- @media (max-width: 744px) {
109
+ @media (max-width: 1128px) {
180
-
110
+
181
- font-size: 34px;
111
+ position: absolute;
112
+
113
+ z-index: -1;
114
+
115
+ }
182
116
 
183
117
  }
184
118
 
119
+ .sqrRed {
120
+
121
+ position: absolute;
122
+
123
+ width: 460px;
124
+
125
+ height: 420px;
126
+
127
+ background-color:red;
128
+
129
+ top: 140px;
130
+
131
+ right: 90px;
132
+
133
+ border: 2px solid red;
134
+
135
+
136
+
137
+ @media (max-width: 1128px) {
138
+
139
+ position: relative;
140
+
141
+ background-color: transparent;
142
+
143
+ width: 100%;
144
+
145
+ height: 100%;
146
+
147
+ top: 260px;
148
+
149
+ right: 0;
150
+
185
- }
151
+ }
186
-
152
+
153
+
154
+
187
- h3 {
155
+ h2 {
188
-
156
+
189
- font-size: 24px;
157
+ width: 400px;
190
-
158
+
191
- line-height: 1.25;
159
+ margin: 0 auto 20px;
160
+
192
-
161
+ @media (max-width: 1128px) {
162
+
193
- font-weight: 800;
163
+ width: 100%;
194
-
164
+
195
- color: #484848;
165
+ color: #fff;
196
-
166
+
197
- }
167
+ }
168
+
198
-
169
+ }
170
+
199
- .container {
171
+ .sqrBlue {
172
+
200
-
173
+ background-color: skyblue;
174
+
201
- width: 1032px;
175
+ width: 90%;
176
+
202
-
177
+ height: 60%;
178
+
203
- margin: 0 auto;
179
+ margin: 0 auto;
204
-
180
+
205
- @media (max-width: 744px) {
181
+ @media (max-width: 1128px) {
182
+
206
-
183
+ width: 100%;
184
+
207
- padding: 0 25px;
185
+ height: 400px;
186
+
187
+ }
188
+
189
+ }
208
190
 
209
191
  }
210
192
 
211
- }
193
+
212
-
194
+
213
- .main-wrapper {
195
+ .sqrPink {
214
-
215
- display: flex;
196
+
216
-
217
- width: 1032px;
218
-
219
- margin: 0 auto;
220
-
221
-
222
-
223
- @media (max-width: 1128px) {
224
-
225
- flex-direction: column;
197
+ background-color: pink;
226
-
198
+
227
- width: 530px;
199
+ height: 400px;
200
+
201
+ position: relative;
228
202
 
229
203
  }
230
204
 
231
- @media (max-width: 744px) {
232
-
233
- width: 100%;
234
-
235
- }
205
+ }
236
-
237
- .sub-wrapper2 {
206
+
238
-
239
- width: 50%;
207
+
240
-
241
- padding-right: 80px;
242
-
243
- @media (max-width: 1128px) {
244
-
245
- width: 100%;
246
-
247
- }
248
-
249
- }
250
-
251
- .sub-wrapper3 {
252
-
253
- width: 33.3%;
254
-
255
- padding-right: 56px;
256
-
257
- @media (max-width: 1128px) {
258
-
259
- width: 100%;
260
-
261
- }
262
-
263
- }
264
-
265
- }
266
-
267
- .landing {
268
-
269
- margin-bottom: 100px;
270
-
271
- padding-top: 83px;
272
-
273
-
274
-
275
- @media (max-width: 1128px) {
276
-
277
- padding-top: 0;
278
-
279
- }
280
-
281
-
282
-
283
- .landing-img {
284
-
285
- position: relative;
286
-
287
- text-align: center;
288
-
289
- margin: 0 auto;
290
-
291
- background-image:
292
-
293
- url(https://a0.muscache.com/4ea/air/v2/pictures/9d08d356-59b9-4ac4-9f41-5b9c13c2b211.jpg?t=r:w1440-h960-sfit,e:fwebp-c75);
294
-
295
- width: 100%;
296
-
297
- height: 600px;
298
-
299
- background-position: top center;
300
-
301
- background-repeat: no-repeat;
302
-
303
- background-size: cover;
304
-
305
- margin-bottom: 70px;
306
-
307
-
308
-
309
- @media (max-width: 1128px) {
310
-
311
- margin-bottom: 0px;
312
-
313
- height: 0;
314
-
315
- padding-top: 48%;
316
-
317
- position: absolute;
318
-
319
- z-index: -1;
320
-
321
- }
322
-
323
-
324
-
325
- @media (max-width: 744px) {
326
-
327
- width: 100%;
328
-
329
- }
330
-
331
- }
332
-
333
- .search-pc {
334
-
335
- position: absolute;
336
-
337
- width: 460px;
338
-
339
- height: 420px;
340
-
341
- background-color: #fff;
342
-
343
- top: 140px;
344
-
345
- right: 90px;
346
-
347
- border-radius: 5px;
348
-
349
- padding: 33px 0;
350
-
351
-
352
-
353
- @media (max-width: 1128px) {
354
-
355
- position: relative;
356
-
357
- width: 100%;
358
-
359
- height: 100%;
360
-
361
- padding: 0;
362
-
363
- top: 220px;
364
-
365
- border-radius: 0;
366
-
367
- background-color: transparent;
368
-
369
- right: 0;
370
-
371
- }
372
-
373
- @media (max-width: 744px) {
374
-
375
- top: 140px;
376
-
377
- }
378
-
379
- h2 {
380
-
381
- width: 400px;
382
-
383
- margin: 0 auto 20px;
384
-
385
- @media (max-width: 1128px) {
386
-
387
- width: 100%;
388
-
389
- color: #fff;
390
-
391
- padding: 0 100px;
392
-
393
- }
394
-
395
- @media (max-width: 744px) {
396
-
397
- padding: 0 25px;
398
-
399
- }
400
-
401
- }
402
-
403
- .search-sp {
404
-
405
- @media (max-width: 1128px) {
406
-
407
- width: 100%;
408
-
409
- padding: 25px 90px 83px;
410
-
411
- background-color: #fff;
412
-
413
- }
414
-
415
- @media (max-width: 744px) {
416
-
417
- padding-left: 25px;
418
-
419
- padding-right: 25px;
420
-
421
- }
422
-
423
- .search-form {
424
-
425
- width: 400px;
426
-
427
- margin: 0 auto;
428
-
429
- @media (max-width: 1128px) {
430
-
431
- max-width: 700px;
432
-
433
- width: 100%;
434
-
435
- z-index: auto;
436
-
437
- }
438
-
439
- @media (max-width: 744px) {
440
-
441
- max-width: 100%;
442
-
443
- }
444
-
445
- p {
446
-
447
- font-weight: 600;
448
-
449
- }
450
-
451
- input,
452
-
453
- select {
454
-
455
- border: 0.3px solid #ebebeb;
456
-
457
- border-radius: 5px;
458
-
459
- padding: 10px;
460
-
461
- height: 48px;
462
-
463
- @media (max-width: 744px) {
464
-
465
- height: 38px;
466
-
467
- font-size: 14px;
468
-
469
- }
470
-
471
-
472
-
473
- &:focus {
474
-
475
- border-color: $blue;
476
-
477
- }
478
-
479
- }
480
-
481
- input {
482
-
483
- width: 100%;
484
-
485
- margin-bottom: 10px;
486
-
487
- }
488
-
489
- .labels {
490
-
491
- display: flex;
492
-
493
- justify-content: space-between;
494
-
495
- @media (max-width: 744px) {
496
-
497
- flex-direction: column;
498
-
499
- }
500
-
501
- .staytype {
502
-
503
- width: 58%;
504
-
505
- @media (max-width: 744px) {
506
-
507
- width: 100%;
508
-
509
- margin-bottom: 10px;
510
-
511
- }
512
-
513
- }
514
-
515
- .people {
516
-
517
- width: 40%;
518
-
519
- margin-bottom: 35px;
520
-
521
- @media (max-width: 744px) {
522
-
523
- width: 100%;
524
-
525
- margin-bottom: 20px;
526
-
527
- }
528
-
529
- }
530
-
531
- label {
532
-
533
- position: relative;
534
-
535
- select {
536
-
537
- width: 100%;
538
-
539
- }
540
-
541
- &::before {
542
-
543
- position: absolute;
544
-
545
- content: "^";
546
-
547
- font-size: 25px;
548
-
549
- pointer-events: none;
550
-
551
- transform: rotate(180deg);
552
-
553
- right: 5%;
554
-
555
- }
556
-
557
- }
558
-
559
- }
560
-
561
- button {
562
-
563
- text-align: center;
564
-
565
- width: 100%;
566
-
567
- height: 48px;
568
-
569
- background-color: $red;
570
-
571
- font-weight: 600;
572
-
573
- color: #fff;
574
-
575
- border-radius: 5px;
576
-
577
- line-height: 48px;
578
-
579
- }
580
-
581
- }
582
-
583
- }
584
-
585
- }
586
-
587
-
588
-
589
- .desc {
590
-
591
- background-color: pink;
592
-
593
- opacity: 0.8;
594
-
595
- position: relative;
596
-
597
- }
598
-
599
- }
600
208
 
601
209
  ```