質問編集履歴

1

全てのコードを追加しました。無駄なコードもあるのですが、ご了承ください。

2017/05/12 09:30

投稿

usawb
usawb

スコア26

test CHANGED
File without changes
test CHANGED
@@ -14,86 +14,562 @@
14
14
 
15
15
 
16
16
 
17
- ###HTML
18
-
19
- ```HTML
20
-
21
- <div id="side_menu">
22
-
23
- <ul>
24
-
25
- <li></li>
26
-
27
- <li></li>
28
-
29
- <li></li>
30
-
31
- <li></li>
32
-
33
- </ul>
34
-
35
- </div>
17
+
18
+
19
+ ###すべてのコード
20
+
21
+ ```HTML CSS Javascript
22
+
23
+ <!DOCTYPE html>
24
+
25
+ <html lang="ja">
26
+
27
+ <head>
28
+
29
+
30
+
31
+ <meta charset="utf-8">
32
+
33
+ <meta name="viewport" content="width=device-width" ,initial-scale="1.0">
34
+
35
+
36
+
37
+ <title>Sidemenu</title>
38
+
39
+
40
+
41
+ <style>
42
+
43
+ *{
44
+
45
+ font-family: 'FOT-筑紫ゴシック Pr5 L','ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','Meiryo UI','MS UI Gothic','メイリオ',Meiryo,'MS Pゴシック',sans-serif;
46
+
47
+ color:#333;
48
+
49
+
50
+
51
+ }
52
+
53
+ body{
54
+
55
+ width:100%;
56
+
57
+ height:100%;
58
+
59
+ }
60
+
61
+ nav{
62
+
63
+ position: fixed;;
64
+
65
+ top:0;
66
+
67
+ left:0;
68
+
69
+ right:auto;
70
+
71
+ bottom:0;
72
+
73
+ width:200px;
74
+
75
+ height:100%;
76
+
77
+ background:white;
78
+
79
+ box-shadow: 2px 0 4px rgba(50,50,50,0.8);
80
+
81
+ text-align: center;
82
+
83
+ box-sizing: border-box;
84
+
85
+ word-wrap: break-word;
86
+
87
+
88
+
89
+ }
90
+
91
+ #mail{
92
+
93
+ width:100%;
94
+
95
+ height:30px;
96
+
97
+ margin:8px auto;
98
+
99
+ }
100
+
101
+ #mail p{
102
+
103
+ width:150px;
104
+
105
+ height:32px;
106
+
107
+ line-height: 32px;
108
+
109
+ font-size:12px;
110
+
111
+ font-weight: bold;
112
+
113
+ border-radius: 5px;
114
+
115
+ margin:0px auto;
116
+
117
+ background: #45484d; /* Old browsers */
118
+
119
+ background: -moz-linear-gradient(top, #45484d 0%, #333 100%); /* FF3.6-15 */
120
+
121
+ background: -webkit-linear-gradient(top, #45484d 0%,#333 100%); /* Chrome10-25,Safari5.1-6 */
122
+
123
+ background: linear-gradient(to bottom, #45484d 0%,#333 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
124
+
125
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#333',GradientType=0 ); /* IE6-9 */
126
+
127
+ box-shadow: 1px 2px 5px black;
128
+
129
+ }
130
+
131
+ #mail p a{
132
+
133
+ width:100%;
134
+
135
+ height:100%;
136
+
137
+ display: inline-block;
138
+
139
+ color:white;
140
+
141
+ text-decoration: none;
142
+
143
+ }
144
+
145
+ #side_menu{
146
+
147
+ width:100%;
148
+
149
+ height:100%;
150
+
151
+ overflow-y: hidden;
152
+
153
+ box-sizing: border-box;
154
+
155
+ word-wrap: break-word;
156
+
157
+ position: relative;
158
+
159
+
160
+
161
+ }
162
+
163
+ #side_menu::-webkit-scrollbar {
164
+
165
+ width: 5px;
166
+
167
+ height:100px;
168
+
169
+ }
170
+
171
+ #side_menu::-webkit-scrollbar-track {
172
+
173
+ background: white;
174
+
175
+
176
+
177
+ }
178
+
179
+ #side_menu::-webkit-scrollbar-thumb {
180
+
181
+ box-shadow: inset 0 0 2px rgba(50,50,50,0.4);
182
+
183
+ background-color: rgba(70, 70,70, 0.3);
184
+
185
+ height:100px;
186
+
187
+
188
+
189
+ }
190
+
191
+ #side_menu .side_wrapper h1{
192
+
193
+ width:100%;
194
+
195
+ height:60px;
196
+
197
+ line-height:60px;
198
+
199
+ margin:0 auto;
200
+
201
+ background: white;
202
+
203
+ border-bottom:0.5px solid rgba(137, 140, 142, 0.5);
204
+
205
+ }
206
+
207
+
208
+
209
+ #share_area{
210
+
211
+ width:90%;
212
+
213
+ height:35px;
214
+
215
+ margin:8px auto;
216
+
217
+ margin-bottom:10px;
218
+
219
+ }
220
+
221
+ #share_area .share_b{
222
+
223
+ width:30px;
224
+
225
+ height:30px;
226
+
227
+ float:left;
228
+
229
+ margin-right:5px;
230
+
231
+ margin-left:5px;
232
+
233
+ border-radius: 50%;
234
+
235
+ border:solid 1px g;
236
+
237
+ background: rgba(90, 208, 118, 0.9);
238
+
239
+ padding: 5px;
240
+
241
+ transition: all .3s ease;
242
+
243
+ overflow: hidden;
244
+
245
+ position: relative;
246
+
247
+ z-index: 0;
248
+
249
+ }
250
+
251
+ #share_area .share_b:first-child{
252
+
253
+ margin-left:20px;
254
+
255
+ }
256
+
257
+ #share_area .share_b:after{
258
+
259
+ display: inline-block;
260
+
261
+ content:'';
262
+
263
+ width:100%;
264
+
265
+ height:100%;
266
+
267
+ transform:rotateZ(140deg);
268
+
269
+ background:green;
270
+
271
+ position:absolute;
272
+
273
+ top:13px;
274
+
275
+ right:-13px;
276
+
277
+ z-index:-5;
278
+
279
+ opacity: 0.5;
280
+
281
+
282
+
283
+ }
284
+
285
+ #share_area .share_b img{
286
+
287
+ width:100%;
288
+
289
+ height:100%;
290
+
291
+ z-index: 3;
292
+
293
+ }
294
+
295
+ #share_area .share_b:hover{
296
+
297
+ opacity: 0.7;
298
+
299
+ transition: all .3s ease;
300
+
301
+ }
302
+
303
+ ul{
304
+
305
+ padding:0;
306
+
307
+ width:98%;
308
+
309
+ font-size: 12px;
310
+
311
+ margin:0 auto;
312
+
313
+
314
+
315
+ }
316
+
317
+ .sogo_list,.kategori_list,.gozyu_list{
318
+
319
+ width:100%;
320
+
321
+ list-style-type:none;
322
+
323
+ }
324
+
325
+ .sogo_list li,.kategori_list li,.gozyu_list li{
326
+
327
+ width:100%;
328
+
329
+ height: 35px;
330
+
331
+ line-height: 35px;
332
+
333
+ /*border-bottom:0.3px solid rgba(200, 200, 200, 0.7);*/
334
+
335
+ }
336
+
337
+ .sogo_list li a,.kategori_list li a,.gozyu_list li a{
338
+
339
+ text-decoration:none;
340
+
341
+ color:black;
342
+
343
+ display: inline-block;
344
+
345
+ width:100%;
346
+
347
+ height:100%;
348
+
349
+ transition:all .3s ease-out;
350
+
351
+ position: relative;
352
+
353
+
354
+
355
+ }
356
+
357
+ .sogo_list li:first-child,.kategori_list li:first-child,.gozyu_list li:first-child{
358
+
359
+ font-size:15px;
360
+
361
+ font-weight: 700;
362
+
363
+ height:40px;
364
+
365
+ line-height: 40px;
366
+
367
+ border-bottom:transparent;
368
+
369
+ background:rgba(90, 208, 118, 0.6);
370
+
371
+ color:white;
372
+
373
+ letter-spacing: 1.3px;
374
+
375
+ position: relative;
376
+
377
+ overflow: hidden;
378
+
379
+ text-shadow: 1px 2px 1px #333;
380
+
381
+ }
382
+
383
+ .sogo_list li:first-child::after,.kategori_list li:first-child:after,.gozyu_list li:first-child:after{
384
+
385
+ display: inline-block;
386
+
387
+ content:'';
388
+
389
+ width:120%;
390
+
391
+ height:120%;
392
+
393
+ transform:rotateZ(160deg);
394
+
395
+ background:green;
396
+
397
+ position:absolute;
398
+
399
+ top:15px;
400
+
401
+ right:-50px;
402
+
403
+ z-index: -5;
404
+
405
+ opacity: 0.7;
406
+
407
+ }
408
+
409
+ #side_menu ul li a:hover{
410
+
411
+ transition:all .3s ease-in;
412
+
413
+ background-color: rgba(220, 220, 220, 0.4);
414
+
415
+ }
416
+
417
+ #side_menu ul li a::after{
418
+
419
+ display: inline-block;
420
+
421
+ content: '';
422
+
423
+ position: absolute;
424
+
425
+ bottom:0;
426
+
427
+ left:0;
428
+
429
+ width:100%;
430
+
431
+ height:0px;
432
+
433
+ opacity: 0.4;
434
+
435
+ background: gray;
436
+
437
+ }
438
+
439
+ </style>
440
+
441
+ </head>
442
+
443
+ <body>
444
+
445
+ <nav>
446
+
447
+ <div id="side_menu">
448
+
449
+ <div class="bar"></div>
450
+
451
+ <div class="side_wrapper">
452
+
453
+ <h1>タイトル</h1>
454
+
455
+ </div>
456
+
457
+ <div id="share_area">
458
+
459
+ <div class="share_b"><a href=""><img src="../IMG/CONP/twitter.png"></a></div>
460
+
461
+ <div class="share_b"><a href=""><img src="../IMG/CONP/facebook.png"></a></div>
462
+
463
+ <div class="share_b"><a href=""><img src="../IMG/CONP/google.png"></a></div>
464
+
465
+ </div>
466
+
467
+ <div class="sogo_nav">
468
+
469
+ <ul class="sogo_list">
470
+
471
+ <li></li>
472
+
473
+ <li><a href=""></a></li>
474
+
475
+ <li><a href=""></a></li>
476
+
477
+ <li><a href=""></a></li>
478
+
479
+ <li><a href=""></a></li>
480
+
481
+ <li><a href=""></a></li>
482
+
483
+ </ul>
484
+
485
+ </div>
486
+
487
+ <div class="katgori_nav">
488
+
489
+ <ul class="kategori_list">
490
+
491
+ <li></li>
492
+
493
+ <li><a href=""></a></li>
494
+
495
+ <li><a href=""></a></li>
496
+
497
+ <li><a href=""></a></li>
498
+
499
+ <li><a href=""></a></li>
500
+
501
+ <li><a href=""></a></li>
502
+
503
+ </ul>
504
+
505
+ </div>
506
+
507
+ <div class="gozyu_nav">
508
+
509
+ <ul class="gozyu_list">
510
+
511
+ <li></li>
512
+
513
+ <li><a href=""></a></li>
514
+
515
+ <li><a href=""></a></li>
516
+
517
+ <li><a href=""></a></li>
518
+
519
+ <li><a href=""></a></li>
520
+
521
+ <li><a href=""></a></li>
522
+
523
+ <li><a href=""></a></li>
524
+
525
+ <li><a href=""></a></li>
526
+
527
+ <li><a href=""></a></li>
528
+
529
+ <li><a href=""></a></li>
530
+
531
+ <li><a href=""></a></li>
532
+
533
+ </ul>
534
+
535
+ </div>
536
+
537
+ <div id="mail"><p><a href="">お問い合わせ</a></p></div>
538
+
539
+
540
+
541
+ </div>
542
+
543
+ </nav>
544
+
545
+
546
+
547
+ <script>
548
+
549
+ var Nav = document.querySelector("#side_menu");
550
+
551
+
552
+
553
+ Nav.addEventListener("mouseover",function(){
554
+
555
+ Nav.style.overflowY = "scroll";
556
+
557
+ },false);
558
+
559
+ Nav.addEventListener("mouseout",function(){
560
+
561
+ Nav.style.overflowY = "hidden";
562
+
563
+ },false);
564
+
565
+ </script>
566
+
567
+ </body>
568
+
569
+ </html>
570
+
571
+
572
+
573
+
36
574
 
37
575
  ```
38
-
39
- ###CSS
40
-
41
- ```CSS
42
-
43
- #side_menu{
44
-
45
- width:100px;
46
-
47
- height:200px;
48
-
49
- overflow-y: hidden;
50
-
51
- }
52
-
53
- ```
54
-
55
- ###該当のソースコード
56
-
57
- ```CSS
58
-
59
- #side_menu{
60
-
61
- width:100px;
62
-
63
- height:200px;
64
-
65
- overflow-y: hidden;
66
-
67
- }
68
-
69
- ```
70
-
71
- ###Javascript
72
-
73
- ```Javascript
74
-
75
- <script>
76
-
77
- var Nav = document.querySelector("#side_menu");
78
-
79
-
80
-
81
- Nav.addEventListener("mouseover",function(){
82
-
83
- Nav.style.overflowY = "scroll";
84
-
85
- },false);
86
-
87
- Nav.addEventListener("mouseout",function(){
88
-
89
- Nav.style.overflowY = "hidden";
90
-
91
- },false);
92
-
93
- </script>
94
-
95
-
96
-
97
-
98
-
99
- ```