質問編集履歴

7

コード全体

2017/08/14 14:14

投稿

ryuji000
ryuji000

スコア19

test CHANGED
File without changes
test CHANGED
@@ -14,23 +14,353 @@
14
14
 
15
15
  ```html
16
16
 
17
- <div class="main__item--1">
18
-
19
- <div class="main__item--text">
20
-
21
- <p>心から「きれいに」「かわいく」したいと思っているため、すべての施術にはオススメのトリートメントと前処理と後処理を無料で含めさせて頂きます。</p>
22
-
23
- </div>
17
+ <!DOCTYPE html>
18
+
19
+ <html lang="ja">
20
+
21
+ <head>
22
+
23
+ <meta charset="utf-8">
24
+
25
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
26
+
27
+ <link rel="apple-touch-icon" href="icon/logo.jpg">
28
+
29
+ <link rel="stylesheet" href="css/style.css">
30
+
31
+ <link rel="stylesheet" href="css/normalize.css">
32
+
33
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
34
+
35
+ <script type="text/javascript" src="slick/slick.min.js"></script>
36
+
37
+ <title>lanugo</title>
38
+
39
+ </head>
40
+
41
+ <body>
42
+
43
+ <header>
44
+
45
+ <div class="header__wrap flex">
46
+
47
+ <a href="">
48
+
49
+ <div class="header__left">
50
+
51
+ <div class="header__logo">
52
+
53
+ <img src="img/logo.jpg">
54
+
55
+ </div>
56
+
57
+ </div>
58
+
59
+ </a>
60
+
61
+ <nav class="nav">
62
+
63
+ <ul class="nav__gNav flex">
64
+
65
+ <li><a href="">menu</a></li>
66
+
67
+ <li><a href="">news</a></li>
68
+
69
+ <li><a href="">concept</a></li>
70
+
71
+ <li><a href="">access</a></li>
72
+
73
+ <li><a href="">contact</a></li>
74
+
75
+ </ul>
76
+
77
+ </nav>
78
+
79
+ </div>
80
+
81
+ </header>
82
+
83
+ <div class="mainVisual">
84
+
85
+ <div class="concept">
86
+
87
+ <img src="img/concept.png">
88
+
89
+ </div>
90
+
91
+ </div>
92
+
93
+ <div class="main">
94
+
95
+ <div>
96
+
97
+ <img src="img/main_content.png" class="main__img">
98
+
99
+ <div class="main__item--1">
100
+
101
+ <div class="main__item--text">
102
+
103
+ 心から「きれいに」「かわいく」したいと思っているため、すべての施術にはオススメのトリートメントと前処理と後処理を無料で含めさせて頂きます。
104
+
105
+ </div>
106
+
107
+ </div>
108
+
109
+ <div class="main__item--2">
110
+
111
+ <div class="main__item--text">
112
+
113
+ <p>お客さまと信頼しあえる関係性で一緒に都市を重ねていきたいという思いから、わかりやすい料金メニューにしています。施術に追加でオプションがつくことはありません。</p>
114
+
115
+ </div>
116
+
117
+ </div>
118
+
119
+ <div class="main__item--3">
120
+
121
+ <div class="main__item--text">
122
+
123
+ <p>丁寧な施術ができるように一対一で施術をおこなえるようにしております。丁寧な施術をおこないます。</p>
124
+
125
+ </div>
126
+
127
+ </div>
128
+
129
+ <div class="main__item--4">
130
+
131
+ <div class="main__item--text">
132
+
133
+ <p>LINE@を使ったスタイリングのアドバイスや髪のケアなど、お家に帰った後のご相談もきがるにできます。</p>
134
+
135
+ </div>
136
+
137
+ </div>
138
+
139
+ <div class="main__item--5">
140
+
141
+ <div class="main__item--text">
142
+
143
+ <p>アットホームな空間をご用意させてもらうことで、スタイルやケア、その他のこともお客さまから伝えやすくなる工夫をしています。</p>
144
+
145
+ </div>
146
+
147
+ </div>
148
+
149
+ <div class="main__item--6">
150
+
151
+ <div class="main__item--text">
152
+
153
+ <p>最新のトレンドのスタイルを取り入れながら、お客さまに似合う髪型を提案します。小顔矯正立体カットの資格を持ち、骨格や肩幅から似合せを提供します。</p>
154
+
155
+ </div>
156
+
157
+ </div>
158
+
159
+ </div>
160
+
161
+ </div>
162
+
163
+ <div class="information flex">
164
+
165
+ <div class="information__left">
166
+
167
+ <div class="information__text">
168
+
169
+ <p>営業日 : 火曜日~日曜日(金曜日のみ20:00まで)</p>
170
+
171
+ <p>営業時間 : 11:00~19:00</p>
172
+
173
+ <p>住所 : 和歌山市12番町15島ビル 2F</p>
174
+
175
+ <p>TEL : 0734-88-2668</p>
176
+
177
+ <div class="facebook">
178
+
179
+ <div id="pagePlugin">
180
+
181
+ <div class="fb-page" data-href="https://www.facebook.com/Hairlifedesign-lanugo-1426322340740357/" data-tabs="timeline" data-width="500" data-height="500" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/Hairlifedesign-lanugo-1426322340740357/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/Hairlifedesign-lanugo-1426322340740357/">Hair&amp;lifedesign lanugo</a></blockquote>
182
+
183
+ </div>
184
+
185
+ </div>
186
+
187
+ </div>
188
+
189
+ </div>
190
+
191
+ </div>
192
+
193
+ <div class="information__right">
194
+
195
+ <img src="img/information1.png">
196
+
197
+ <img src="img/information2.png">
198
+
199
+ </div>
24
200
 
25
201
  </div>
26
202
 
203
+ <div class="instagram">
204
+
205
+ <iframe src="https://snapwidget.com/embed/423101" class="snapwidget-widget" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:100%; height:200px"></iframe>
206
+
207
+ </div>
208
+
209
+
210
+
211
+ <div id="fb-root"></div>
212
+
213
+
214
+
215
+ <script>
216
+
217
+ (function(d, s, id) {
218
+
219
+ var js, fjs = d.getElementsByTagName(s)[0];
220
+
221
+ if (d.getElementById(id)) return;
222
+
223
+ js = d.createElement(s); js.id = id;
224
+
225
+ js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.10&appId=1881778235415743";
226
+
227
+ fjs.parentNode.insertBefore(js, fjs);
228
+
229
+ }(document, 'script', 'facebook-jssdk'));</script>
230
+
231
+ </body>
232
+
27
233
  ```
28
234
 
29
235
  ```css
30
236
 
31
-
237
+ body {
238
+
32
-
239
+ letter-spacing: .1em;
240
+
241
+ line-height: 1.5em;
242
+
243
+ font-size: 62.5%;
244
+
245
+ font-weight: 200;
246
+
247
+ font-family: helvetica, arial, 'hiragino kaku gothic pro', meiryo, 'ms pgothic', sans-serif;
248
+
249
+ }
250
+
251
+ header {
252
+
253
+ width: 100%;
254
+
255
+ position: fixed;
256
+
257
+ z-index: 10000;
258
+
259
+ background-color: #fff;
260
+
261
+ }
262
+
263
+ .flex{
264
+
265
+ display: flex;
266
+
267
+ }
268
+
269
+ .header__logo {
270
+
271
+ margin: 0 50px;
272
+
273
+ }
274
+
275
+ .header__wrap {
276
+
277
+ margin: 0 auto;
278
+
279
+ padding: 15px 0;
280
+
281
+ position: relative;
282
+
283
+ justify-content: space-between;
284
+
285
+ flex-wrap: wrap;
286
+
287
+ align-items: center;
288
+
289
+ }
290
+
291
+ .nav__gNav li {
292
+
293
+ margin: 0 10px;
294
+
295
+ padding: 1px 4px;
296
+
297
+ font-size: 2.5rem;
298
+
299
+ color: #4d4d4d;
300
+
301
+ }
302
+
303
+ .mainVisual {
304
+
305
+ background-image: url(../img/main.jpg);
306
+
307
+ width: 100%;
308
+
309
+ height: 650px;
310
+
311
+ position: relative;
312
+
313
+ background-position: center center;
314
+
315
+ background-repeat: no-repeat;
316
+
317
+ background-size: cover;
318
+
319
+ }
320
+
321
+ .concept {
322
+
323
+ width: 900px;
324
+
325
+ top: 490px;
326
+
327
+ bottom: 0;
328
+
329
+ left: 100px;
330
+
331
+ right: 0;
332
+
333
+ position: absolute;
334
+
335
+ margin: 0 auto;
336
+
337
+ }
338
+
339
+ .main {
340
+
341
+ height: 100vh;
342
+
343
+ width: 1200px;
344
+
345
+ margin: 410px auto 0;
346
+
347
+ position: relative;
348
+
349
+ }
350
+
351
+ .main__img {
352
+
353
+ position: absolute;
354
+
355
+ top: 170px;
356
+
357
+ left: 230px;
358
+
359
+ z-index: 100;
360
+
361
+ }
362
+
33
- /*マウスが乗っていない状況*/
363
+ /*マウスが乗っ*/
34
364
 
35
365
  .main__item--1{
36
366
 
@@ -50,6 +380,200 @@
50
380
 
51
381
  }
52
382
 
383
+ .main__item--1:hover {
384
+
385
+ background-image: url(../img/mainitemh1.png);
386
+
387
+ background-repeat: no-repeat;
388
+
389
+ }
390
+
391
+ .main__item--2{
392
+
393
+ background-image: url(../img/mainitem2.png);
394
+
395
+ width: 220px;
396
+
397
+ height: 275px;
398
+
399
+ position: absolute;
400
+
401
+ top: 34px;
402
+
403
+ left: 731px;
404
+
405
+ z-index: 1;
406
+
407
+ }
408
+
409
+ .main__item--2:hover {
410
+
411
+ background-image: url(../img/mainitemh2.png);
412
+
413
+ background-repeat: no-repeat;
414
+
415
+ }
416
+
417
+ .main__item--3{
418
+
419
+ background-image: url(../img/mainitem3.png);
420
+
421
+ width: 205px;
422
+
423
+ height: 200px;
424
+
425
+ position: absolute;
426
+
427
+ top: 247px;
428
+
429
+ left: 268px;
430
+
431
+ z-index: 1;
432
+
433
+ }
434
+
435
+ .main__item--3:hover {
436
+
437
+ background-image: url(../img/mainitemh3.png);
438
+
439
+ background-repeat: no-repeat;
440
+
441
+ }
442
+
443
+ .main__item--4{
444
+
445
+ background-image: url(../img/mainitem4.png);
446
+
447
+ width: 215px;
448
+
449
+ height: 215px;
450
+
451
+ position: absolute;
452
+
453
+ top: 360px;
454
+
455
+ left: 523px;
456
+
457
+ z-index: 1;
458
+
459
+ }
460
+
461
+ .main__item--4:hover {
462
+
463
+ background-image: url(../img/mainitemh4.png);
464
+
465
+ background-repeat: no-repeat;
466
+
467
+ }
468
+
469
+ .main__item--5{
470
+
471
+ background-image: url(../img/mainitem5.png);
472
+
473
+ width: 234px;
474
+
475
+ height: 234px;
476
+
477
+ position: absolute;
478
+
479
+ top: 581px;
480
+
481
+ left: 784px;
482
+
483
+ z-index: 1;
484
+
485
+ }
486
+
487
+ .main__item--5:hover {
488
+
489
+ background-image: url(../img/mainitemh5.png);
490
+
491
+ background-repeat: no-repeat;
492
+
493
+ }
494
+
495
+ .main__item--6{
496
+
497
+ background-image: url(../img/mainitem6.png);
498
+
499
+ width: 330px;
500
+
501
+ height: 245px;
502
+
503
+ position: absolute;
504
+
505
+ top: 617px;
506
+
507
+ left: 191px;
508
+
509
+ z-index: 1;
510
+
511
+ }
512
+
513
+ .main__item--6:hover {
514
+
515
+ background-image: url(../img/mainitemh6.png);
516
+
517
+ background-repeat: no-repeat;
518
+
519
+ }
520
+
521
+ .information {
522
+
523
+ width: 1200px;
524
+
525
+ margin: 340px auto 0;
526
+
527
+ justify-content: space-around;
528
+
529
+ color: #666;
530
+
531
+ }
532
+
533
+ .information__text {
534
+
535
+ margin-left: 30px;
536
+
537
+ }
538
+
539
+ .information__text p {
540
+
541
+ margin-top: 7px;
542
+
543
+ font-size: 2rem;
544
+
545
+ letter-spacing: 5px;
546
+
547
+ }
548
+
549
+ .information__text p:nth-of-type(3) {
550
+
551
+ margin-top: 40px;
552
+
553
+ }
554
+
555
+ .information__right img:last-child {
556
+
557
+ margin-top: 30px;
558
+
559
+ }
560
+
561
+ .facebook {
562
+
563
+ margin-top: 30px;
564
+
565
+ }
566
+
567
+ .instagram {
568
+
569
+ margin-top: 50px;
570
+
571
+ width: 100%;
572
+
573
+
574
+
575
+ }
576
+
53
577
  .main__item--text {
54
578
 
55
579
  width: 100%;
@@ -58,24 +582,12 @@
58
582
 
59
583
  opacity: 0; /* マスクを表示しない */
60
584
 
61
- background-color: rgba(0,0,0,0); /* マスクは半透明 */
62
-
63
585
  -webkit-transition: all 0.2s ease;
64
586
 
65
587
  transition: all 0.2s ease;
66
588
 
67
589
  }
68
590
 
69
- /*マウスが乗った時の状況*/
70
-
71
- .main__item--1:hover {
72
-
73
- background-image: url(../img/mainitemh1.png);
74
-
75
- background-repeat: no-repeat;
76
-
77
- }
78
-
79
591
  .main__item--text:hover {
80
592
 
81
593
  opacity: 1; /* マスクを表示する */

6

大幅に変更しました

2017/08/14 14:14

投稿

ryuji000
ryuji000

スコア19

test CHANGED
File without changes
test CHANGED
@@ -1,20 +1,16 @@
1
1
  ###前提・実現したいこと
2
2
 
3
- 通常はこの画像で表示して
3
+ 現状はこのマウスが乗る前はこのようになり
4
4
 
5
- ![イメージ説明](465af4b645e4e6feb27f4f167cfddf1d.png)
5
+ ![イメージ説明](a7f9d3e6145f498ced44d45082ae6507.png)
6
6
 
7
- マウスが乗ったらこん感じに表示
7
+ マウスが乗ると画像の様に背景が真白にって
8
8
 
9
- ![イメージ説明](cf98b0229b83143397ef0c8a51381787.png)
9
+ ![イメージ説明](1ecd5590806224f80baf9637871cc83f.png)
10
10
 
11
- 現在はこのように表示されて
11
+ マウスが乗ったときどのようにしたいかというとこの下の画像のようにし
12
12
 
13
- ![イメージ説明](8409aae0bd20eac97a219e20ef2d7723.png)
13
+ ![イメージ説明](8edd63c4feed727e7afa21a5f3dd39e0.png)
14
-
15
- 次はこのようになってしまいました
16
-
17
- ![![イメージ説明](a55275abb4cb5c735e51bb87fb743868.png)]
18
14
 
19
15
  ```html
20
16
 
@@ -31,6 +27,10 @@
31
27
  ```
32
28
 
33
29
  ```css
30
+
31
+
32
+
33
+ /*マウスが乗っていない状況*/
34
34
 
35
35
  .main__item--1{
36
36
 
@@ -50,12 +50,6 @@
50
50
 
51
51
  }
52
52
 
53
- .main__item--1:hover {
54
-
55
- background-image: url(../img/mainitemh1.png);
56
-
57
- }
58
-
59
53
  .main__item--text {
60
54
 
61
55
  width: 100%;
@@ -72,9 +66,19 @@
72
66
 
73
67
  }
74
68
 
75
- .main__item--text:hover {
69
+ /*マウスが乗った時の状況*/
76
70
 
71
+ .main__item--1:hover {
72
+
73
+ background-image: url(../img/mainitemh1.png);
74
+
75
+ background-repeat: no-repeat;
76
+
77
+ }
78
+
79
+ .main__item--text:hover {
80
+
77
- opacity: 1; /* マスクを表示する */
81
+ opacity: 1; /* マスクを表示する */
78
82
 
79
83
  padding-top: 110px;
80
84
 

5

脱字の修正

2017/08/14 02:51

投稿

ryuji000
ryuji000

スコア19

test CHANGED
File without changes
test CHANGED
@@ -20,13 +20,13 @@
20
20
 
21
21
  <div class="main__item--1">
22
22
 
23
- <div class="main__item--text">
23
+ <div class="main__item--text">
24
24
 
25
- <p>心から「きれいに」「かわいく」したいと思っているため、すべての施術にはオススメのトリートメントと前処理と後処理を無料で含めさせて頂きます。</p>
25
+ <p>心から「きれいに」「かわいく」したいと思っているため、すべての施術にはオススメのトリートメントと前処理と後処理を無料で含めさせて頂きます。</p>
26
26
 
27
- </div>
27
+ </div>
28
28
 
29
- </div>
29
+ </div>
30
30
 
31
31
  ```
32
32
 

4

画像とcss変更しました

2017/08/13 14:27

投稿

ryuji000
ryuji000

スコア19

test CHANGED
File without changes
test CHANGED
@@ -11,6 +11,10 @@
11
11
  現在はこのように表示されてしまいます
12
12
 
13
13
  ![イメージ説明](8409aae0bd20eac97a219e20ef2d7723.png)
14
+
15
+ 次はこのようになってしまいました
16
+
17
+ ![![イメージ説明](a55275abb4cb5c735e51bb87fb743868.png)]
14
18
 
15
19
  ```html
16
20
 
@@ -70,7 +74,9 @@
70
74
 
71
75
  .main__item--text:hover {
72
76
 
73
- opacity: 0; /* マスクを表示する */
77
+ opacity: 1; /* マスクを表示する */
78
+
79
+ padding-top: 110px;
74
80
 
75
81
  }
76
82
 

3

htmlの修正です

2017/08/13 06:11

投稿

ryuji000
ryuji000

スコア19

test CHANGED
File without changes
test CHANGED
@@ -16,13 +16,13 @@
16
16
 
17
17
  <div class="main__item--1">
18
18
 
19
- <div class="main__item--text">
19
+ <div class="main__item--text">
20
20
 
21
- <p>お客さまと信頼しあえる関係性で一緒都市を重ねてたいという思いからわかりやい料金メニューにしいます。施術に追加でプショがつくこはありせん。</p>
21
+ <p>心から「きれい」「かわく」したいと思ってるため、す施術にススメのトリートメ前処理と後処理を無料で含めさせて頂き。</p>
22
22
 
23
- </div>
23
+ </div>
24
24
 
25
- </div>
25
+ </div>
26
26
 
27
27
  ```
28
28
 

2

html修正しました

2017/08/13 05:54

投稿

ryuji000
ryuji000

スコア19

test CHANGED
File without changes
test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  ```html
16
16
 
17
- <div class="main__item--2">
17
+ <div class="main__item--1">
18
18
 
19
19
  <div class="main__item--text">
20
20
 

1

現在の症状の追加

2017/08/13 00:58

投稿

ryuji000
ryuji000

スコア19

test CHANGED
File without changes
test CHANGED
@@ -8,7 +8,9 @@
8
8
 
9
9
  ![イメージ説明](cf98b0229b83143397ef0c8a51381787.png)
10
10
 
11
+ 現在はこのように表示されてしまいます
11
12
 
13
+ ![イメージ説明](8409aae0bd20eac97a219e20ef2d7723.png)
12
14
 
13
15
  ```html
14
16