質問編集履歴

4

タグの変更

2017/09/10 12:52

投稿

Ryo310
Ryo310

スコア14

test CHANGED
File without changes
test CHANGED
@@ -210,7 +210,7 @@
210
210
 
211
211
 
212
212
 
213
- ```CSS
213
+ ```Sass
214
214
 
215
215
  main {
216
216
 

3

コードの編集

2017/09/10 12:52

投稿

Ryo310
Ryo310

スコア14

test CHANGED
File without changes
test CHANGED
@@ -26,8 +26,6 @@
26
26
 
27
27
  <main>
28
28
 
29
- <h3 class="pickup">pickup商品</h3>
30
-
31
29
  <div class="item_wrapper">
32
30
 
33
31
  <div id="top"></div>

2

コードの修正

2017/09/10 12:38

投稿

Ryo310
Ryo310

スコア14

test CHANGED
File without changes
test CHANGED
@@ -536,7 +536,7 @@
536
536
 
537
537
  height: 21px;
538
538
 
539
- background: url(data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%0A%09%20id%3D%22svg2%22%20xmlns%3Adc%3D%22http%3A//purl.org/dc/elements/1.1/%22%20xmlns%3Acc%3D%22http%3A//creativecommons.org/ns%23%22%20xmlns%3Ardf%3D%22http%3A//www.w3.org/1999/02/22-rdf-syntax-ns%23%22%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%0A%09%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2021%2021%22%0A%09%20enable-background%3D%22new%200%200%2021%2021%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20id%3D%22layer1%22%20transform%3D%22translate%280%2C-1031.3622%29%22%3E%0A%09%3Cpath%20id%3D%22path2987%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20d%3D%22M0%2C1031.4l21%2C21%22/%3E%0A%09%3Cpath%20id%3D%22path2989%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20d%3D%22M21%2C1031.4l-21%2C21%22/%3E%0A%3C/g%3E%0A%3C/svg%3E%0A%0A) no-repeat;
539
+ background: url(長いので省略)no-repeat;
540
540
 
541
541
  position: absolute;
542
542
 

1

コードの追加

2017/09/10 12:37

投稿

Ryo310
Ryo310

スコア14

test CHANGED
File without changes
test CHANGED
@@ -12,10 +12,564 @@
12
12
 
13
13
  下記写真のようにレイアウトが崩れてしまいます。検証をしたのですが原因がわかりませんでした。。
14
14
 
15
- (下2つの写真です)
15
+ (下2つの写真です)---
16
16
 
17
17
  ![イメージ説明](5d5c92ff106f0556628253e264866190.png)
18
18
 
19
19
 
20
20
 
21
21
  プログラミングについてはまだ初心者でわからないことが多いのでどなたかお助けいただけますと嬉しいです。。!!
22
+
23
+
24
+
25
+ ```HTML
26
+
27
+ <main>
28
+
29
+ <h3 class="pickup">pickup商品</h3>
30
+
31
+ <div class="item_wrapper">
32
+
33
+ <div id="top"></div>
34
+
35
+ <section class="gallery">
36
+
37
+ <div class="row">
38
+
39
+ <ul>
40
+
41
+ <a href="#" class="close"></a>
42
+
43
+ <li>
44
+
45
+ <a href="#item02">
46
+
47
+ <img src="/img1.jpg" alt="">
48
+
49
+ </a>
50
+
51
+ </li>
52
+
53
+ <li>
54
+
55
+ <a href="#item02">
56
+
57
+ <img src="/img2.jpg" alt="">
58
+
59
+ </a>
60
+
61
+ </li>
62
+
63
+ <li>
64
+
65
+ <a href="#item02">
66
+
67
+ <img src="/img3.jpg" alt="">
68
+
69
+ </a>
70
+
71
+ </li>
72
+
73
+ <li>
74
+
75
+ <a class="image" href="#item01">
76
+
77
+ <img src="/img4.jpg" alt="">
78
+
79
+ </a>
80
+
81
+ </li>
82
+
83
+ <li>
84
+
85
+ <a class="image" href="#item02">
86
+
87
+ <img src="/img5.jpg" alt="">
88
+
89
+ </a>
90
+
91
+ </li>
92
+
93
+ <li>
94
+
95
+ <a class="image" href="#item01">
96
+
97
+ <img src="/img6.jpg" alt="">
98
+
99
+ </a>
100
+
101
+ </li>
102
+
103
+ <li>
104
+
105
+ <a class="image" href="#item01">
106
+
107
+ <img src="/img7.jpg" alt="">
108
+
109
+ </a>
110
+
111
+ </li>
112
+
113
+ <li>
114
+
115
+ <a class="image" href="#item01">
116
+
117
+ <img src="/img8.jpg" alt="">
118
+
119
+ </a>
120
+
121
+ </li>
122
+
123
+
124
+
125
+ <li>
126
+
127
+ <a href="#item02">
128
+
129
+ <img src="/img1.jpg" alt="">
130
+
131
+ </a>
132
+
133
+ </li>
134
+
135
+ <li>
136
+
137
+ <a href="#item02">
138
+
139
+ <img src="/img2.jpg" alt="">
140
+
141
+ </a>
142
+
143
+ </li>
144
+
145
+
146
+
147
+ </ul>
148
+
149
+ </div> <!-- / row -->
150
+
151
+
152
+
153
+
154
+
155
+
156
+
157
+ <!-- Item 01 -->
158
+
159
+ <div id="item01" class="port">
160
+
161
+ <div class="row">
162
+
163
+ <div class="description">
164
+
165
+ <h1>Item 01</h1>
166
+
167
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis libero erat. Integer ac purus est. Proin erat mi, pulvinar ut magna eget, consectetur auctor turpis.</p>
168
+
169
+ <br><a href="/items/1">もっと見る</a>
170
+
171
+ </div>
172
+
173
+ <img src="https://d13yacurqjgara.cloudfront.net/users/22177/screenshots/1379781/winterletters-jeremiahbritton-dribbble.png" alt="">
174
+
175
+ </div> <!-- / row -->
176
+
177
+ </div> <!-- / Item 01 -->
178
+
179
+
180
+
181
+ <!-- Item 02 -->
182
+
183
+ <div id="item02" class="port">
184
+
185
+ <div class="row">
186
+
187
+ <div class="description">
188
+
189
+ <h1>Item 02</h1>
190
+
191
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis libero erat. Integer ac purus est. Proin erat mi, pulvinar ut magna eget, consectetur auctor turpis.</p>
192
+
193
+ <br><a href="/items/2">もっと見る</a>
194
+
195
+ </div>
196
+
197
+ <img src="https://d13yacurqjgara.cloudfront.net/users/22177/screenshots/404704/wontstopblue-womens-jeremiahbritton.jpg" alt="">
198
+
199
+ </div> <!-- / row -->
200
+
201
+ </div> <!-- / Item 02 -->
202
+
203
+
204
+
205
+ </section> <!-- / projects -->
206
+
207
+ </div>
208
+
209
+ </main>
210
+
211
+ ```
212
+
213
+
214
+
215
+ ```CSS
216
+
217
+ main {
218
+
219
+ .item_wrapper {
220
+
221
+ * {
222
+
223
+ -webkit-box-sizing: border-box;
224
+
225
+ -moz-box-sizing: border-box;
226
+
227
+ box-sizing: border-box;
228
+
229
+
230
+
231
+ &:before, &:after {
232
+
233
+ -webkit-box-sizing: border-box;
234
+
235
+ -moz-box-sizing: border-box;
236
+
237
+ box-sizing: border-box;
238
+
239
+ }
240
+
241
+ }
242
+
243
+
244
+
245
+ .row {
246
+
247
+ width: 90%;
248
+
249
+ margin: 0 auto;
250
+
251
+ padding: 0;
252
+
253
+ clear: both;
254
+
255
+
256
+
257
+ img {
258
+
259
+ max-width: 100%;
260
+
261
+ height: auto;
262
+
263
+ padding: 0;
264
+
265
+ margin: 0;
266
+
267
+ }
268
+
269
+ }
270
+
271
+
272
+
273
+ %col {
274
+
275
+ float: left;
276
+
277
+ margin: 0 0.8771929825%;
278
+
279
+ overflow: hidden;
280
+
281
+ }
282
+
283
+
284
+
285
+ // PROJECTS
286
+
287
+ .gallery {
288
+
289
+ padding: 0 0 300px;
290
+
291
+ position: relative;
292
+
293
+ overflow: hidden;
294
+
295
+
296
+
297
+ ul {
298
+
299
+ padding: 0;
300
+
301
+ position: relative;
302
+
303
+
304
+
305
+ li {
306
+
307
+ @extend %col;
308
+
309
+
310
+
311
+ margin-bottom: 20px;
312
+
313
+ width: 23.2456140351%;
314
+
315
+
316
+
317
+ position: relative;
318
+
319
+
320
+
321
+ a {
322
+
323
+ display: block;
324
+
325
+ position: relative;
326
+
327
+ width: 100%;
328
+
329
+ height: 100%;
330
+
331
+ margin: 0;
332
+
333
+ padding: 0;
334
+
335
+ line-height: 0;
336
+
337
+
338
+
339
+ &:before {
340
+
341
+ position: absolute;
342
+
343
+ width: 32px;
344
+
345
+ height: 32px;
346
+
347
+ top: 40%;
348
+
349
+ left: 50%;
350
+
351
+ margin: (-14px) 0 0 -16px;
352
+
353
+ background: url(data:長いので省略) no-repeat;
354
+
355
+ content: "";
356
+
357
+ opacity: 0;
358
+
359
+ z-index: 1;
360
+
361
+
362
+
363
+ @include transition(all, 0.3s, linear);
364
+
365
+ }
366
+
367
+
368
+
369
+ &:hover:before {
370
+
371
+ top: 50%;
372
+
373
+ opacity: 1;
374
+
375
+ }
376
+
377
+
378
+
379
+ &:after {
380
+
381
+ position: absolute;
382
+
383
+ width: 100%;
384
+
385
+ top: 0;
386
+
387
+ bottom: 0;
388
+
389
+ background: rgba(0, 0, 0, 0.3);
390
+
391
+ content: "";
392
+
393
+ opacity: 0;
394
+
395
+
396
+
397
+ @include transition(all, 0.3s, linear);
398
+
399
+ }
400
+
401
+
402
+
403
+ &:hover:after {
404
+
405
+ opacity: 1;
406
+
407
+ }
408
+
409
+ }
410
+
411
+ }
412
+
413
+ }
414
+
415
+ }
416
+
417
+
418
+
419
+ // PORT
420
+
421
+ .port {
422
+
423
+ position: absolute;
424
+
425
+ width: 100%;
426
+
427
+ height: 100%;
428
+
429
+ top: 0;
430
+
431
+ left: 0;
432
+
433
+ padding-top: 100px;
434
+
435
+ background: #ffffff;
436
+
437
+ background-color: #fafafa;
438
+
439
+ z-index: 103;
440
+
441
+ visibility: hidden;
442
+
443
+ -webkit-transform: translateY(-100%);
444
+
445
+ transform: translateY(-100%);
446
+
447
+ border-bottom: 1px solid #d0d0d0;
448
+
449
+
450
+
451
+ @include transition(all, 0.5s, ease-in-out);
452
+
453
+
454
+
455
+ img {
456
+
457
+ width: 50%;
458
+
459
+ }
460
+
461
+
462
+
463
+ .description {
464
+
465
+ float: left;
466
+
467
+ width: 50%;
468
+
469
+ max-height: 100%;
470
+
471
+ padding: 0 40px 40px;
472
+
473
+ overflow: auto;
474
+
475
+ }
476
+
477
+
478
+
479
+ h1 {
480
+
481
+ font-size: 35px;
482
+
483
+ line-height: 2.3;
484
+
485
+ padding: 0;
486
+
487
+ }
488
+
489
+
490
+
491
+ > * {
492
+
493
+ opacity: 0;
494
+
495
+
496
+
497
+ @include transition(all, 0.5s, linear);
498
+
499
+ }
500
+
501
+
502
+
503
+ &.item_open {
504
+
505
+ visibility: visible;
506
+
507
+ -webkit-transform: translateY(0%);
508
+
509
+ transform: translateY(0%);
510
+
511
+
512
+
513
+ @include transition(all, 0.4s, ease-in-out);
514
+
515
+ }
516
+
517
+
518
+
519
+ > * {
520
+
521
+ opacity: 1;
522
+
523
+ -webkit-transition-delay: 0.5s;
524
+
525
+ transition-delay: 0.5s;
526
+
527
+ }
528
+
529
+ }
530
+
531
+
532
+
533
+ .close {
534
+
535
+ width: 21px;
536
+
537
+ height: 21px;
538
+
539
+ background: url(data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%0A%09%20id%3D%22svg2%22%20xmlns%3Adc%3D%22http%3A//purl.org/dc/elements/1.1/%22%20xmlns%3Acc%3D%22http%3A//creativecommons.org/ns%23%22%20xmlns%3Ardf%3D%22http%3A//www.w3.org/1999/02/22-rdf-syntax-ns%23%22%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%0A%09%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2021%2021%22%0A%09%20enable-background%3D%22new%200%200%2021%2021%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20id%3D%22layer1%22%20transform%3D%22translate%280%2C-1031.3622%29%22%3E%0A%09%3Cpath%20id%3D%22path2987%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20d%3D%22M0%2C1031.4l21%2C21%22/%3E%0A%09%3Cpath%20id%3D%22path2989%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20d%3D%22M21%2C1031.4l-21%2C21%22/%3E%0A%3C/g%3E%0A%3C/svg%3E%0A%0A) no-repeat;
540
+
541
+ position: absolute;
542
+
543
+ right: 10px;
544
+
545
+ top: -121px;
546
+
547
+ opacity: 1;
548
+
549
+ z-index: 1004;
550
+
551
+
552
+
553
+ @include transition(all, 0.1s, ease-in-out);
554
+
555
+ }
556
+
557
+
558
+
559
+ .item_open .close {
560
+
561
+ opacity: 1;
562
+
563
+ top: 0px;
564
+
565
+ @include transition(all, 0.3s, ease-in-out);
566
+
567
+ }
568
+
569
+
570
+
571
+ }
572
+
573
+ }
574
+
575
+ ```