質問編集履歴

1

htmlとcss、画像を追加しました

2018/08/24 08:54

投稿

chamaki40
chamaki40

スコア32

test CHANGED
File without changes
test CHANGED
@@ -30,7 +30,89 @@
30
30
 
31
31
 
32
32
 
33
+ <html>
34
+
35
+ <head>
36
+
37
+ <meta charset="UTF-8">
38
+
39
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
40
+
41
+ <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">
42
+
43
+ <meta name="keywords" content="セカンドライフ,デイトレード,アービトラージ,錬金術,投資">
44
+
45
+ <meta name="description" content="疑似体験プロジェクト、バイナリーオプション">
46
+
47
+ <link rel="SHORTCUT ICON" HREF="">
48
+
49
+ <title>セカンドライフ|投資マスターへの道</title>
50
+
51
+
52
+
53
+ <!-- Include jQuery Library -->
54
+
55
+ <link rel="stylesheet" href="css/reset.css" type="text/css" charset="utf-8" />
56
+
57
+ <link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8" />
58
+
59
+ <link href="css/sandbox.css" rel="stylesheet">
60
+
61
+ <link href="dist/css/drawer_2.css" rel="stylesheet">
62
+
63
+
64
+
65
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
66
+
67
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.js"></script>
68
+
69
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
70
+
71
+ <script src="dist/js/drawer.min.js" charset="utf-8"></script>
72
+
73
+ <script>
74
+
75
+ $(document).ready(function() {
76
+
77
+ $('.drawer').drawer();
78
+
79
+ });
80
+
81
+ </script>
82
+
83
+
84
+
85
+
86
+
87
+ </head>
88
+
89
+ <body class="drawer drawer--top drawer--navbarTopGutter">
90
+
91
+
92
+
93
+
94
+
95
+ <header class="drawer-navbar drawer-navbar--fixed" role="banner">
96
+
97
+ <div class="drawer-container">
98
+
99
+ <div class="drawer-navbar-header">
100
+
101
+ <a class="drawer-brand" href="./index.html">セカンドライフ</a>
102
+
103
+ <button type="button" class="drawer-toggle drawer-hamburger">
104
+
105
+ <span class="sr-only">toggle navigation</span>
106
+
107
+ <span class="drawer-hamburger-icon"></span>
108
+
109
+ </button>
110
+
111
+ </div>
112
+
113
+
114
+
33
- <nav class="drawer-nav" role="navigation">
115
+ <nav class="drawer-nav" role="navigation">
34
116
 
35
117
  <ul class="drawer-menu">
36
118
 
@@ -44,7 +126,7 @@
44
126
 
45
127
  <a class="drawer-menu-item" data-target="#" href="#" data-toggle="dropdown" role="button" aria-expanded="false">
46
128
 
47
- トークアプリを使った実用例 <span class="drawer-caret"></span>
129
+ トークアプリを使った実用例<span class="drawer-caret"></span>
48
130
 
49
131
  </a>
50
132
 
@@ -104,18 +186,366 @@
104
186
 
105
187
 
106
188
 
107
- ### 試したこと
108
-
109
-
110
-
111
- z-indexはあらかじめメニューに指定してあったので数値を変えたりしましたが
112
-
113
- 反応なしです 前面にきているメニュー以下のcontainerにz-index:0; メニューに対してz-index:100;など
114
-
115
-
116
-
117
- ### 補足情報(FW/ツールのバージョンなど)
118
-
119
-
120
-
121
- ここにより詳細な情報を記載してください。
189
+ </div>
190
+
191
+
192
+
193
+ </header>
194
+
195
+
196
+
197
+
198
+
199
+ <main role="main">
200
+
201
+ <!-- Page content -->
202
+
203
+ <div id="head_1"><img src="img/for_sitetop2.jpg" alt="サイトイメージ"></div>
204
+
205
+
206
+
207
+
208
+
209
+ </main>
210
+
211
+
212
+
213
+
214
+
215
+ <!-- メインコンテンツ -->
216
+
217
+
218
+
219
+ <div id="container"> ※このcontainerに対してz-indexを指定しましたが無反応でした
220
+
221
+
222
+
223
+
224
+
225
+ <div id="left">
226
+
227
+
228
+
229
+ ~以下、省略~
230
+
231
+
232
+
233
+
234
+
235
+ 【CSS】
236
+
237
+
238
+
239
+ /*!
240
+
241
+ * jquery-drawer v3.2.2
242
+
243
+ * Flexible drawer menu using jQuery, iScroll and CSS.
244
+
245
+ * http://git.blivesta.com/drawer
246
+
247
+ * License : MIT
248
+
249
+ * Author : blivesta <design@blivesta.com> (http://blivesta.com/)
250
+
251
+ */
252
+
253
+
254
+
255
+ .drawer-open{overflow:hidden!important}
256
+
257
+ .drawer-nav{
258
+
259
+ position:fixed;
260
+
261
+ z-index:4;
262
+
263
+ top:0;
264
+
265
+ overflow:hidden;
266
+
267
+ width:16.25rem;
268
+
269
+ height:100%;
270
+
271
+ color:#222;
272
+
273
+ background-color:#fff;
274
+
275
+ opacity: 0.7;
276
+
277
+ transition: opacity .2s ease-out;
278
+
279
+ }
280
+
281
+
282
+
283
+ #container {
284
+
285
+ max-width:1100px;
286
+
287
+ min-height: 100%;
288
+
289
+ height: auto;
290
+
291
+ position: relative;
292
+
293
+ z-index: 0 !important;
294
+
295
+ margin:0 auto;
296
+
297
+ background:#fff;
298
+
299
+ min-height: calc(100vh - 70px);
300
+
301
+ overflow:auto;
302
+
303
+
304
+
305
+ }
306
+
307
+
308
+
309
+
310
+
311
+
312
+
313
+ .drawer-brand{
314
+
315
+ font-size:1.5rem;
316
+
317
+ font-weight:700;
318
+
319
+ line-height:3.75rem;
320
+
321
+ display:block;
322
+
323
+ padding-right:.75rem;
324
+
325
+ padding-left:.75rem;
326
+
327
+ text-decoration:none;
328
+
329
+ color:#222
330
+
331
+ }
332
+
333
+
334
+
335
+ .drawer-menu{
336
+
337
+ margin:0;padding:0;
338
+
339
+ list-style:none;
340
+
341
+ }
342
+
343
+
344
+
345
+ .drawer-menu-item{
346
+
347
+ font-size:1rem;
348
+
349
+ display:block;
350
+
351
+ padding:.75rem;
352
+
353
+ text-decoration:none;
354
+
355
+ color:#222
356
+
357
+ }
358
+
359
+
360
+
361
+ .drawer-menu-item:hover
362
+
363
+ {
364
+
365
+ text-decoration:underline;
366
+
367
+ color:#555;background-color:transparent
368
+
369
+ }
370
+
371
+
372
+
373
+ .drawer-overlay
374
+
375
+ {
376
+
377
+ position:fixed;
378
+
379
+ z-index:2;
380
+
381
+ top:0;
382
+
383
+ left:0;
384
+
385
+ display:none;
386
+
387
+ width:100%;
388
+
389
+ height:100%;
390
+
391
+ background-color:
392
+
393
+ rgba(0,0,0,.2)
394
+
395
+ }
396
+
397
+
398
+
399
+ .drawer-open .drawer-overlay{
400
+
401
+ display:block
402
+
403
+ }
404
+
405
+
406
+
407
+ .drawer--top .drawer-nav{
408
+
409
+ top:-100%;
410
+
411
+ left:0;
412
+
413
+ width:100%;
414
+
415
+ height:auto;
416
+
417
+ max-height:100%;
418
+
419
+ -webkit-transition:top .6s cubic-bezier(.19,1,.22,1);
420
+
421
+ transition:top .6s cubic-bezier(.19,1,.22,1)
422
+
423
+ }
424
+
425
+
426
+
427
+ .drawer--top.drawer-open
428
+
429
+ .drawer-nav{top:0}
430
+
431
+ .drawer--top .drawer-hamburger,.drawer--top.drawer-open
432
+
433
+ .drawer-hamburger{right:0}.drawer--left .drawer-nav
434
+
435
+ {
436
+
437
+ left:-16.25rem;
438
+
439
+ -webkit-transition:left .6s cubic-bezier(.19,1,.22,1);
440
+
441
+ transition:left .6s cubic-bezier(.19,1,.22,1)
442
+
443
+ }
444
+
445
+
446
+
447
+ .drawer--left .drawer-hamburger,.drawer--left.drawer-open .drawer-nav,.drawer--left.drawer-open .drawer-navbar .drawer-hamburger
448
+
449
+ {left:0}
450
+
451
+
452
+
453
+ .drawer--left.drawer-open .drawer-hamburger{left:16.25rem}
454
+
455
+ .drawer--right .drawer-nav{right:-16.25rem;-webkit-transition:right .6s cubic-bezier(.19,1,.22,1);transition:right .6s cubic-bezier(.19,1,.22,1)}.drawer--right
456
+
457
+ .drawer-hamburger,.drawer--right.drawer-open .drawer-nav,.drawer--right.drawer-open .drawer-navbar .drawer-hamburger
458
+
459
+ {right:0}
460
+
461
+ .drawer--right.drawer-open .drawer-hamburger{right:16.25rem}
462
+
463
+ .drawer-hamburger{position:fixed;
464
+
465
+ z-index:3;
466
+
467
+ top:0;
468
+
469
+ display:block;
470
+
471
+ box-sizing:content-box;
472
+
473
+ width:2rem;
474
+
475
+ padding:0;
476
+
477
+ padding:18px .75rem 30px;
478
+
479
+ -webkit-transition:all .6s cubic-bezier(.19,1,.22,1);
480
+
481
+ transition:all .6s cubic-bezier(.19,1,.22,1);
482
+
483
+ -webkit-transform:translateZ(0);
484
+
485
+ transform:translateZ(0);border:0;
486
+
487
+ outline:0;background-color:transparent}
488
+
489
+
490
+
491
+ .drawer-hamburger:hover{
492
+
493
+ cursor:pointer;
494
+
495
+ background-color:
496
+
497
+ transparent
498
+
499
+ }
500
+
501
+
502
+
503
+ .drawer-hamburger-icon{
504
+
505
+ position:relative;
506
+
507
+ display:block;
508
+
509
+ margin-top:10px
510
+
511
+ }
512
+
513
+
514
+
515
+ .drawer-hamburger-icon,.drawer-hamburger-icon:after,.drawer-hamburger-icon:before{
516
+
517
+ width:100%;
518
+
519
+ height:2px;
520
+
521
+ -webkit-transition:all .6s cubic-bezier(.19,1,.22,1);
522
+
523
+ transition:all .6s cubic-bezier(.19,1,.22,1);
524
+
525
+ background-color:#222}
526
+
527
+
528
+
529
+ .drawer-hamburger-icon:after,.drawer-hamburger-icon:before{
530
+
531
+ position:absolute;
532
+
533
+ top:-10px;left:0;content:" "}
534
+
535
+
536
+
537
+ .drawer-hamburger-icon:after{top:10px}
538
+
539
+ .drawer-open .drawer-hamburger-icon{
540
+
541
+ background-color:transparent
542
+
543
+ }
544
+
545
+
546
+
547
+ ~以下、省略~
548
+
549
+
550
+
551
+ ![![![イメージ説明](72fdbabcf2beed096c0788825040ade8.jpeg)](760737bc75b48b85aa5bb54e7a34d055.jpeg)](8959b6397d6fb1e6c8a6cc5b0c84e71b.jpeg)